Меня для сайта

Доброго времени суток всем, кто сейчас читает данную публикацию. Сегодня я хочу рассказать вам об одном из инструментов сайтостроения, без которого ни один веб-ресурс не может обойтись. Это меню сайта, или как еще говорят карта сайта. На сегодняшний день существует безграничное множество видов и подвидов меню.

Разработчики интернет-магазинов, блогов, обучающих сервисов и других ресурсов экспериментируют и создают все более новые и необычные карты. После прочтения статьи вы узнаете, на какие основные группы делятся все виды панелей навигации, сможете опробовать каждую из них, а также научиться писать код меню для сайта html. А теперь перейдем непосредственно к делу!

Инструменты для создания панели навигации

В языке разметки существует несколько способов создания меню. Основная их концепция заключается в использовании ненумерованного списка. Таким образом, в привычном для нас html 4 разработчики прописывают на станице теги <ul> и <li>.

Как оговаривалось в предыдущих публикациях, парный элемент <ul> создает маркированный список, а <li> — один элемент списка. Для наглядности давайте напишем код простого меню:

Однако с появлением платформы html5 язык разметки пополнился дополнительными тегами. Именно поэтому меню современных веб-сайтов создается при помощи специального тега <menu>. В использовании этот элемент ничем не отличается от маркированных списков.

Вместо единицы <ul> прописывается <menu>. Однако существенные различия появляются если судить со стороны работы браузеров. Так, второй пример ускоряет работу поисковых программ и роботов в интернете. При анализе структуры сайта они сразу понимают, что данный кусок кода отвечает за карту сайта.

Бывают горизонтальные, вертикальные и выпадающие меню. Иногда панель навигации оформляют в виде изображения. Так как сегмент технологий расширился, веб-сервисы делают адаптивными, т.е. структура страниц автоматически адаптируется под размер экрана девайсов. Рассмотрим же перечисленные группы меню.

Создадим-ка горизонтальную навигационную модель

Такой вид навигации наиболее популярен. При горизонтальном оформлении панели все пункты меню расположены в шапке страницы или в «подвале» (иногда навигационные элементы дублируются, отображаясь одновременно и сверху, и снизу).

В качестве примера мы создадим горизонтальную панель, пункты меню которого будут оформлены при помощи css (каскадных таблиц стилей), а точнее трансформированы. Так, каждый отдельный элемент будет находится в скошенном прямоугольнике. Заинтриговал?

Горизонтальное меню

Для трансформации мы используем свойство css под названием transform. Чтобы указать трансформацию, используется встроенная функция skewX, в которой угол наклона указывается в градусах.

К сожалению, каждый браузер работает с данным свойством по-своему, не смотря на прописанные стандарты. Поэтому для обозначения того или иного браузера были созданы специальные префиксы:

  • -ms- (Internet Explorer)
  • -o- (Opera)
  • -webkit- (Chrome, Safari)
  • -moz- (Firefox)

А теперь полученные знания применим к написанию примера.

А теперь вертикально. Я сказал вертикально!

Для второй программы используем за основу предыдущий код. Я захотел, чтобы пункты моего вертикального меню были не скошены, а с округленными углами.

Для этого я воспользовался еще одним свойством css border-radius.

В предыдущих статьях я уже работал с данным параметром, так что сложностей с пониманием его функционирования, думаю, не возникнет.

Как вы уже заметили, главное изменение в этом коде – это отсутствие объявления display: inline-block, который собственно и отвечал за горизонтальное расположение пунктов навигации.

Подпункты в меню: выпадающий список

Мы с вами рассмотрели основные группы навигационных панелей, однако существует еще несколько разновидностей или лучше сказать дополнений.

Выпадающее меню на css

Иногда возникают такие ситуации, когда некоторые из пунктов дополняют основные. В этом случае не обойтись без выпадающих списков. Они создаются путем преобразований инструментами css.

Ниже я прикрепил код небольшой программки, в которой реализуется данный подход.

В данном примере я разделил единицы меню на два класса:

  1. m-menu
  2. s-menu

Первый класс отвечает за основное меню, а s-menu – за подменю.

В коде можно встретить такой прием, как .m-menu > li:hover или .m-menu > li.

Так, при помощи :hover указывается, как будет вести себя элемент при наведении на него курсора.

При этом знак «>» видоизменяет селектор так, чтобы блочно-строчными были только объекты, относящиеся к верхнему уровню.

Изначально подменю было задано display: none, что оповещает обработчик скрывать данный объект. После наведения на элемент навигации с указанием hover, значение свойства display меняется на block и поэтому открывается выпадающий список.

Как видите, реализация такого приема очень простая.

Теперь вы освоили основные виды навигационных панелей и можете самостоятельно их видоизменять, дополнять и модернизировать. Если вам понравилась моя статья, то подписывайтесь на обновления блога и делитесь источником знаний с друзьями и коллегами. Пока-пока!

С уважением, Роман Чуешов

romanchueshov.ru

Вертикальное меню

Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент <li> нашего списка будет содержать по одной ссылке:

  <ul id="navbar">   <li><a href="#">Главная</a></li>   <li><a href="#">Новости</a></li>   <li><a href="#">Контакты</a></li>   <li><a href="#">О нас</a></li>  </ul>  

Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:

  #navbar {   margin: 0;   padding: 0;   list-style-type: none;   width: 100px;  }  

Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента <a> со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.

Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.

  #navbar a {   background-color: #949494;   color: #fff;   padding: 5px;   text-decoration: none;   font-weight: bold;   border-left: 5px solid #33ADFF;   display: block;  }  #navbar li {   border-left: 10px solid #666;   border-bottom: 1px solid #666;  }  

Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Название документа</title>   <style>   #navbar {   margin: 0;   padding: 0;   list-style-type: none;   width: 100px;   }   #navbar li {   border-left: 10px solid #666;   border-bottom: 1px solid #666;   }  	 #navbar a {   background-color: #949494;   color: #fff;   padding: 5px;   text-decoration: none;  		font-weight: bold;   border-left: 5px solid #33ADFF;  		display: block;   }   </style>   </head>     <body>      <ul id="navbar">   <li><a href="#">Главная</a></li>   <li><a href="#">Новости</a></li>   <li><a href="#">Контакты</a></li>   <li><a href="#">О нас</a></li>   </ul>     </body>  </html>

Попробовать »

При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.

Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:

  #navbar a:hover {   background-color: #666;   border-left: 5px solid #3333FF;  }  

Попробовать »

Горизонтальное меню

В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.

Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов <li> нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.

Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:

  <ul id="navbar">   <li><a href="#">Главная</a></li>   <li><a href="#">Новости</a></li>   <li><a href="#">Контакты</a></li>   <li><a href="#">О нас</a></li>  </ul>  

Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:

  #navbar {   margin: 0;   padding: 0;   list-style-type: none;  }  #navbar li { display: inline; }  

Попробовать »

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

  #navbar {   margin: 0;   padding: 0;   list-style-type: none;   border: 2px solid #0066FF;   border-radius: 20px 5px;   width: 550px;   text-align: center;   background-color: #33ADFF;  }  #navbar a {   color: #fff;   padding: 5px 10px;   text-decoration: none;   font-weight: bold;   display: inline-block;   width: 100px;  }  #navbar a:hover {   border-radius: 20px 5px;   background-color: #0066FF;  }  

Попробовать »

puzzleweb.ru

И снова всех приветствую на нашем проекте! Сегодня у нас будет рассмотрен урок на тему создание простого меню для сайта. Тема очень распространенная, но надеюсь Вы сможете для себя, как новичок, получить полезные знания и возможно просто разобраться, как это реализуется.

 

Данный урок был записан по просьбе одного из наших постоянных читателей, поэтому другие темы и не рассматривались. После чего я, вместе со своим напарником по разработке, Евгением Кузьменко, подготовил для Вас выпадающее меню для сайта. С данным уроком Вы можете ознакомиться, как на сайте прочитав статью, так и по видео уроку, чтобы более детально понять основные принципы реализации выпадающего меню. Кстати, по поводу создания меню, также рассказывали и в других уроках, например таких как: Создание меню в Битрикс, Делаем меню как в nexus или например, как Адаптивное меню SlickNav, поэтому можете рассмотреть и их, вдруг что-то окажется полезным и пригодится!

 

 

 

И так, переходим к первому шагу данного урока и сначала нам нужно подключить файл demo.css, который лежит у нас в папочке css, а затем уже подключаем шрифт Open Sans. Ребята, я рассказываю все по демо, поэтому Вы можете все делать по своему усмотрению. 

 

  <link rel="stylesheet" href="css/demo.css">  <link href="http://allfont.ru/allfont.css?fonts=open-sans" rel="stylesheet" type="text/css" />

 

Далее нам нужно создать обычный маркированный список ul li, а также задать первому ul идентификатор nav, чтобы мы могли работать через него, обращаясь к стилям css. Делается это очень просто, не знаю, что тут можно описать, поэтому скидываю сразу структуру, как в демо.

 

  <ul id="nav">  	<li>  	<a href="">Ссылка</a>  		<ul>  			<li><a href="">Ссылка</a></li>  			<li><a href="">Ссылка</a></li>  			<li><a href="">Ссылка</a></li>  			<li><a href="">Ссылка</a></li>  		</ul>  	</li>  	<li>  	<a href="">Ссылка</a>  		<ul>  			<li><a href="">Ссылка</a></li>  			<li><a href="">Ссылка</a></li>  			<li><a href="">Ссылка</a></li>  			<li><a href="">Ссылка</a></li>  		</ul>  	</li>  	<li>  	<a href="">Ссылка</a>  		<ul>  			<li><a href="">Ссылка</a></li>  			<li><a href="">Ссылка</a></li>  			<li><a href="">Ссылка</a></li>  			<li><a href="">Ссылка</a></li>  		</ul>  	</li>  	<li>  	<a href="">Ссылка</a>  		<ul>  			<li><a href="">Ссылка</a></li>  			<li><a href="">Ссылка</a></li>  			<li><a href="">Ссылка</a></li>  			<li><a href="">Ссылка</a></li>  		</ul>  	</li>  	<li>  	<a href="">Ссылка</a>  		<ul>  			<li><a href="">Ссылка</a></li>  			<li><a href="">Ссылка</a></li>  			<li><a href="">Ссылка</a></li>  			<li><a href="">Ссылка</a></li>  		</ul>  	</li>  </ul>

 

 

 

 

Переходим к стилям CSS и первым делом, мы должны установить тот шрифт, который прописали вначале данного урока, а именно Open Sans. После того, как наш шрифт успешно прописан, переходим уже к самому каркасу нашего маркированного списка, которому зададим определенные свойства, а также расположение и позиционирование элементов. Заметим, что мы создаем горизонтальное меню, поэтому применяем свойство float left

 

  #nav{  	font-family: 'Open Sans', arial;  }    #nav li{  	float:left; /* все ссылки идут слева на право */   position:relative;   list-style:none; /* убираем точки */   background:#ff3131;  	width:190px;  }

 

Убираем у каждой ссылки нашего меню нижнее подчеркивание, а также придаем белый цвет. Далее, чтобы при наведении на выпадающее меню основная ссылка была выделена, задаем идентификатор active, а также не забываем про сам цвет при наведении всех элементов данного меню. Так как у нас имеется выпадающее меню, нам соответственно нужно его будет скрыть. Для этого прописываем свойство visible и указываем ему параметр hidden, а также не забываем про абсолютное позиционирование данного элемента.

 

  #nav a{   text-decoration:none;   display:block; /* делаем блочным элементов тег "a" */   padding:35px 65px;   color:#ffffff;  }    #active a, #nav li:hover > a{   background:#b32424;  }    #nav ul {  	visibility:hidden; /* скрываем выпадающее меню */   padding:0;    position:absolute;  }

 

Теперь после того, как наше меню успешно скрыто, нам нужно сделать выпадающее меню. Это реализовать достаточно просто, нужно задать элементу меню с идентификатором nav свойство visible. Тем самым мы получим результат выпадающего меню. Далее все по стандарту, изменяем выпадающее меню на наше усмотрение, задаем ему отступы и цвет. Не забываем указать свойство left 0 при ховере, ведь без него все выпадающее меню поедет и соответственно будет не очень красиво. (пункт 1)

 

  #nav li:hover > ul{   visibility:visible; /* показываем выпадающее меню при наведении */  	position: relative;  }    #nav ul a{  	padding:18.5px 65px; /* делаем отступы выпадающего меню меньше от основного */  }    #nav ul li:hover{   background:#d92a2a;  }    #nav li:first-child:hover > ul{  	left: 0px; /* при наведении на первый элемент чтобы не съежало выпадающее меню */  }

 

Так как Евгений, подготовил макет данного меню, то все моменты связанные с его дизайном, мы реализовали с Вами в соответствии. Теперь, нам нужно реализовать border меню, так как он имеют некую функциональную особенность. Давайте ее рассмотрим. Для начала нам потребуется сделать border справа для основного меню, затем чтобы border не было слева нам нужно указать основному меню задать свойство none

 

  #nav > li{  	border-right: 2px solid #d92a2a; /* добавляем рамку к основному меню справа */  }    #nav > li:last-child{  	border-right: none; /* убираем рамку справа основного меню */  }

 

Теперь, пора перейти к выпадающему меню, где функциональные свойства намного покажутся сложнее основного меню, ведь нам придется задавать определенные свойства элементам. Для начала укажем border для двух сторон выпадающего меню, а именно для правой стороны и левой. И напоследок нам будет необходимо скрыть с помощью свойства border none правую и левую сторону меню. 

 

  #nav > li ul li{  	border-left: 2px solid #d92a2a; /* добавляем рамку к выпадающему меню слева */  	border-right:2px solid #d92a2a; /* добавляем рамку к выпадающему меню справа */  }    #nav li:first-child ul li,#nav li:first-child ul{  	border-left:none; /* убираем рамку у выпадающего меню слева */  }   #nav li:last-child ul li,#nav li:last-child ul{  	border-right:none; /* убираем рамку у выпадающего меню справа */  } 

 

Проверяем все на сайте и видим, что все отлично работает, кроме одной детали, а именно наше выпадающее меню при наведении на вторую ссылку и последующую сдвигается немного вправо. Для этого, чтобы устранить данную проблему, мы задаем элементу меню с идентификатором nav свойство left и в качестве параметра даем ему минус два. (см. пункт 1)

 

  #nav li:hover > ul{   left: -2px; /* смещаем выпадающее меню слева от размера рамки*/  }

 

Проверяем все на сайте и видим, что мы теперь действительно все сделали верно и можем заканчивать данный урок.

 

Я благодарю Вас за ваше внимание, за ваши комментарии, а также за то, что Вы ознакомились с данным уроком и надеюсь, смогли для себя что-то выделить и подчеркнуть. А я с Вами прощаюсь и в следующем уроке мы рассмотрим тему меню сопровождением звуковой анимацией. Всем удачи!)

roothelp.ru

HTML-код для горизонтального меню

Когда-то давно главное меню для сайта делали на картинках, таблицах, флэше и возможно на чем-то еще, но в наше время существует самый популярный и он же правильный метод создания меню используя теги «списка».

Для создания меню используют теги <ul>, <li> и <a>.

Если вам не совсем понятно, что такое эти html-теги, css, таблицы, то почитайте об основных технологиях для создания сайта.

Пример использования html тегов для создания меню в коде ниже:

<ul>  <li><a href="#">Главная</a></li>  <li><a href="#">Услуги</a></li>  <li><a href="#">Цены</a></li>  <li><a href="#">Контакты</a></li>  </ul>

Стандартные CSS стили для горизонтального меню

ul {   list-style: none; /*убираем маркеры списка*/   margin: 0; /*убираем отступы*/   padding-left: 0; /*убираем отступы*/  }  a {   text-decoration: none; /*убираем подчеркивание текста ссылок*/  }  li {   float:left; /*Размещаем список горизонтально для реализации меню*/    margin-right:5px; /*Добавляем отступ у пунктов меню*/  }

Мы получаем готовое верхнее меню в шапку, без каких-либо особых стилей и наворотов это можно назвать каркасом вашего будущего красивого меню. Если вы скопируете и поставите у себя данный html и css это будет выглядеть следующим образом.

Пример каркаса (шаблона) вашего будущего меню

Получилось все достаточно простенько, вы ,конечно же, хотите сразу красивое главное меню, но без понимания основ у вас просто не получится создать хорошее меню без ошибок в html и css.

Существует так же несколько других CSS методов используемых для того чтобы сделать меню горизонтальным помимо float:left;, например, display:inline-block; или display:flex;, но рекомендуется использовать способ описанный выше.

Давайте же наполним наш шаблон меню различными стилями и сделаем его красивым.

Примеры красивого горизонтального меню для сайта

Сейчас я приведу несколько готовых примеров с готовым дизайном горизонтального меню.

Все «красивости» вы можете создать для своего сайта сами, а не искать в интернете. Проще всего это сделать взяв за основу один из примеров ниже

Простое меню синего цвета с раздельными пунктами

CSS стили «верхнего» меню

Ниже расположены стили данного меню. HTML остается тем же, что и в «каркасе» меню.

ul {   list-style: none; /*убираем маркеры списка*/   margin: 0; /*убираем отступы*/   padding-left: 0; /*убираем отступы*/   margin-top:25px; /*делаем отступ сверху*/  }  a {   text-decoration: none; /*убираем подчеркивание текста ссылок*/   background:#30A8E6; /*добавляем фон к пункту меню*/   color:#fff; /*меняем цвет ссылок*/   padding:10px; /*добавляем отступ*/   font-family: arial; /*меняем шрифт*/   border-radius:4px; /*добавляем скругление*/   -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/   -o-transition: all 0.3s 0.01s ease;   -webkit-transition: all 0.3s 0.01s ease;  }  a:hover {   background:#1C85BB;/*добавляем эффект при наведении*/  }  li {   float:left; /*Размещаем список горизонтально для реализации меню*/   margin-right:5px; /*Добавляем отступ у пунктов меню*/     }

Главное меню, расположенное на цветной линии с красным фоном

CSS стили меню на цветной линии

ul {   list-style: none; /*убираем маркеры списка*/   margin: 0; /*убираем отступы*/   padding-left: 0; /*убираем отступы*/   margin-top:25px; /*делаем отступ сверху*/   background:#FF4444; /*добавляем фон всему меню (заменив этот параметр, вы поменяете цвет всего меню)*/   height: 50px; /*задаем высоту*/  }  a {   text-decoration: none; /*убираем подчеркивание текста ссылок*/   background:#FF4444; /*добавляем фон к пункту меню (заменив этот параметр, вы поменяете цвет всех пунктов меню)*/   color:#fff; /*меняем цвет ссылок*/   padding:0px 15px; /*добавляем отступ*/   font-family: arial; /*меняем шрифт*/   line-height:50px; /*ровняем меню по вертикали*/   display: block;    border-right: 1px solid #F36262; /*добавляем бордюр справа*/   -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/   -o-transition: all 0.3s 0.01s ease;   -webkit-transition: all 0.3s 0.01s ease;    }  a:hover {   background:#D43737;/*добавляем эффект при наведении*/  }  li {   float:left; /*Размещаем список горизонтально для реализации меню*/  }

Выпадающее меню на HTML+CSS

Для реализации дополнительного выпадающего (раскрывающегося) меню на сайте у какого-либо пункта меню нам необходимо добавить дополнительный перечень пунктов в HTML-код для какой-либо ссылки из горизонтального меню и изменить стили CSS. В стилях мы будем применять простой трюк — изменение отображения раскрывающегося меню по средствам наведения на нужный нам пункт в верхнем меню. Для примера возьмем пункт «услуги».

Пример создания простого выпадающего меню

HTML код выпадающего меню

<ul>   <li><a href="#">Главная</a></li>   <li><a href="#">Услуги</a>   <ul>   <li><a href="#">Услуга 1</a></li>   <li><a href="#">Длинная услуга 2</a></li>   <li><a href="#">Услуга 3</a></li>   </ul>   </li>    <li><a href="#">Цены</a></li>   <li><a href="#">Контакты</a></li>  </ul>

Стили CSS выпадающего меню

ul {   list-style: none; /*убираем маркеры списка*/   margin: 0; /*убираем отступы*/   padding-left: 0; /*убираем отступы*/   margin-top:25px; /*делаем отступ сверху*/   background:#819A32; /*добавляем фон всему меню*/   height: 50px; /*задаем высоту*/  }  a {   text-decoration: none; /*убираем подчеркивание текста ссылок*/   background:#819A32; /*добавляем фон к пункту меню*/   color:#fff; /*меняем цвет ссылок*/   padding:0px 15px; /*добавляем отступ*/   font-family: arial; /*меняем шрифт*/   line-height:50px; /*ровняем меню по вертикали*/   display: block;    border-right: 1px solid #677B27; /*добавляем бордюр справа*/   -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/   -o-transition: all 0.3s 0.01s ease;   -webkit-transition: all 0.3s 0.01s ease;    }  a:hover {   background:#D43737;/*добавляем эффект при наведении*/  }  li {   float:left; /*Размещаем список горизонтально для реализации меню*/   position:relative; /*задаем позицию для позиционирования*/  }      /*Стили для скрытого выпадающего меню*/   li > ul {   position:absolute;   top:25px;   display:none;    }      /*Делаем скрытую часть видимой*/   li:hover > ul {   display:block;    width:250px; /*Задаем ширину выпадающего меню*/    }   li:hover > ul > li {   float:none; /*Убираем горизонтальное позиционирование*/   }

А чтобы понять, какие именно у вас должны быть услуги и категории рекомендую ознакомиться с материалом: составление структуры и семантического ядра.

Я постарался максимально кратко рассказать вам о том как создать главное горизонтальное меню, сделать несколько шаблонов, как добавить к нему простые стили и сделать его симпатичнее, как сделать выпадающее меню для вашего сайта. Для удобства я собрал все меню, представленные выше, в одном html-файле, который вы можете скачать ниже. Выглядит это как на скриншоте: Подборка красивых горизонтальных меню на html+css

Поделитесь в одной из социальных сетей и скачивание сразу же будет доступно.

Благодарю за внимание.

nz4.ru

Выпадающее и цветное меню для сайта на чистом CSS3

Меня для сайта

Демо ι Скачать

HTML

Для начала давайте сделаем сам код HTML, и посмотрим как он будет выглядеть. Тут как обычно ничего сложного нет. Мы здесь выведем сам перечень цветов которые находятся над меню, и которые сможет выбирать пользователь. А также выведем код самого выпадающего меню. Вот как этот весь код будет выглядеть:

<div class="container">   <!-- Начало кнопок для выбора цвета меню -->   <span id="red"></span>   <span id="orange"></span>   <span id="pink"></span>   <span id="green"></span>   <span id="blue"></span>   <span id="indigo"></span>   <span id="violet"></span>   <span id="grey"></span>    <div class="colorScheme">   <a href="#red" class="red"></a>   <a href="#orange" class="orange"></a>   <a href="#pink" class="pink"></a>   <a href="#green" class="green"></a>   <a href="#blue" class="blue"></a>   <a href="#indigo" class="indigo"></a>   <a href="#violet" class="violet"></a>   <a href="#grey" class="grey"></a>   </div>   <!-- А тут сам код выпадающего меню-->   <ul id="nav">   <li><a href="http://www.script-tutorials.com/">Главная</a></li>   <li><a class="hsubs" href="#">Меню 1</a>   <ul class="subs">   <li><a href="#">Подменю 1</a></li>   <li><a href="#">Подменю 2</a></li>   <li><a href="#">Подменю 3</a></li>   <li><a href="#">Подменю 4</a></li>   <li><a href="#">Подменю 5</a></li>   </ul>   </li>   <li><a class="hsubs" href="#">Меню 2</a>   <ul class="subs">   <li><a href="#">Подменю 2-1</a></li>   <li><a href="#">Подменю 2-2</a></li>   <li><a href="#">Подменю 2-3</a></li>   <li><a href="#">Подменю 2-4</a></li>   <li><a href="#">Подменю 2-5</a></li>   <li><a href="#">Подменю 2-6</a></li>   <li><a href="#">Подменю 2-7</a></li>   <li><a href="#">Подменю 2-8</a></li>   </ul>   </li>   <li><a class="hsubs" href="#">Меню 3</a>   <ul class="subs">   <li><a href="#">Подменю 3-1</a></li>   <li><a href="#">Подменю 3-2</a></li>   <li><a href="#">Подменю 3-3</a></li>   <li><a href="#">Подменю 3-4</a></li>   <li><a href="#">Подменю 3-5</a></li>   </ul>   </li>   <li><a href="#">Меню 4</a></li>   <li><a href="#">Меню 5</a></li>   <li><a href="#">Меню 6</a></li>     </ul>    </div>

CSS

Теперь, непосредственно давайте задавать сам стиль CSS для меню и для кнопок цвета. Вот он сам CSS код:

#nav,#nav ul {   list-style: none outside none;   margin: 0;   padding: 0;  }  #nav {   background-color: #000000;   border-radius: 5px 5px 5px 5px;   box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);   display: table;   padding: 10px;   position: relative;  }  #nav ul {   background-color: red;   border:1px solid red;   border-radius: 0 5px 5px 5px;   border-width: 0 1px 1px;   box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);   left: -9999px;   overflow: hidden;   padding: 20px 0 10px;   position: absolute;   top: -9999px;    -moz-transform: scaleY(0);   -ms-transform: scaleY(0);   -o-transform: scaleY(0);   -webkit-transform: scaleY(0);   transform: scaleY(0);    -moz-transform-origin: 0 0;   -ms-transform-origin: 0 0;   -o-transform-origin: 0 0;   -webkit-transform-origin: 0 0;   transform-origin: 0 0;    -moz-transition: -moz-transform 0.1s linear;   -ms-transition: -ms-transform 0.1s linear;   -o-transition: -o-transform 0.1s linear;   -webkit-transition: -webkit-transform 0.1s linear;   transition: transform 0.1s linear;  }  #nav li {   float: left;   position: relative;  }  #nav li a {   color: #FFFFFF;   display: block;   font-size: 16px;   padding: 7px 20px;   text-decoration: none;  }  #nav li:hover > a {   background-color: red;   border-radius: 5px 5px 5px 5px;   color: #FFFFFF;  }  #nav li:hover > a.hsubs {   border-radius: 5px 5px 0 0;  }  #nav li:hover ul.subs {   left: 0;   top: 34px;   width: 180px;    -moz-transform: scaleY(1);   -ms-transform: scaleY(1);   -o-transform: scaleY(1);   -webkit-transform: scaleY(1);  }  #nav ul li {   width: 100%;  }  #nav ul li:hover > a {   background-color: #222222 !important;   border-radius: 5px 5px 5px 5px;  }    /* colors */  .colorScheme {   height: 32px;   list-style: none outside none;   margin: 0 auto 25px;   width: 320px;  }  .colorScheme a {   cursor: pointer;   float: left;   height: 30px;   margin: 0 5px;   width: 30px;  }  .colorScheme .red {   background-color: red;  }  .colorScheme .orange {   background-color: orange;  }  .colorScheme .pink {   background-color: pink;  }  .colorScheme .green {   background-color: green;  }  .colorScheme .blue {   background-color: blue;  }  .colorScheme .indigo {   background-color: indigo;  }  .colorScheme .violet {   background-color: violet;  }  .colorScheme .grey {   background-color: grey;  }    #red:target ~ #nav ul {   background-color: red;   border: 1px solid red;  }  #orange:target ~ #nav ul {   background-color: orange;   border: 1px solid orange;  }  #pink:target ~ #nav ul {   background-color: pink;   border: 1px solid pink;  }  #green:target ~ #nav ul {   background-color: green;   border: 1px solid green;  }  #blue:target ~ #nav ul {   background-color: blue;   border: 1px solid blue;  }  #indigo:target ~ #nav ul {   background-color: indigo;   border: 1px solid indigo;  }  #violet:target ~ #nav ul {   background-color: violet;   border: 1px solid violet;  }  #grey:target ~ #nav ul {   background-color: grey;   border: 1px solid grey;  }    #red:target ~ #nav li:hover > a {   background-color: red;  }  #orange:target ~ #nav li:hover > a {   background-color: orange;  }  #pink:target ~ #nav li:hover > a {   background-color: pink;  }  #green:target ~ #nav li:hover > a {   background-color: green;  }  #blue:target ~ #nav li:hover > a {   background-color: blue;  }  #indigo:target ~ #nav li:hover > a {   background-color: indigo;  }  #violet:target ~ #nav li:hover > a {   background-color: violet;  }  #grey:target ~ #nav li:hover > a {   background-color: grey;  }

beloweb.ru

Создание меню сайта – как?

От автора: Меню – пожалуй, самый важный элемент сайта для пользователей, поскольку именно благодаря ему возможна навигация по ресурсу и быстрый переход в интересующие разделы. Давайте посмотрим, как происходит создание меню сайта.

Навигация в wordpress

В любом шаблоне вы можете в визуальном режиме создать свое меню и поставить его в одну из возможных областей. Для этого перейдите Внешний вид – Меню. Тут вы можете создать новое или редактировать уже имеющееся.

Меня для сайта

В навигацию можно добавить рубрики, страницы, а также ссылки на любые другие страницы, в том числе и вншние. То есть этими произвольными ссылками могут быть любые ссылки, как бы примитивно это ни звучало. В том числе ссылающиеся на другие сайты или на какие-то ваши записи.

В визуальном режиме вы можете просто наполнить навигацию ссылками, а также выбрать область для ее отображения. Вообще количество и позиции таких областей зависят от шаблоне. В одном 1 такая область, в другом может быть 4-6.

Что делать, если вы хотите изменить именно внешний вид? Для этого полезно будет воспользоваться инструментом для разработчиков – отладчиком. Хотя вы не разработчик, он вам пригодится.

Для его запуска в Google Chrome или Яндекс. Браузере нажмите F12. Вам нужно найти, какой кусочек кода ответственен за вывод блока меню. А точнее, нам нужно обнаружить стилевой класс или идентификатор у навигационного блока. Если это получится, то можно будет найти в css стили для этого элемента и изменить их на свои.

При наведении на html-код отладчик будет подсвечивать вам элемент, который он формирует. Так можно найти нужный элемент быстро и просто. Всего лишь в 2 клика нашли, что наше меню находится в блоке с классом all-width и лежит в теге nav.

Меня для сайта

Справа будет отображаться css-код элемента. Например, вы можете выбрать сам список, его пункты или ссылки, кликнув по ним в отладчике, а справа появятся стили для них. Редактируя стили, вы сразу сможете видеть результат. Это очень полезно. Вы можете сразу изменить внешний вид меню так, как вам надо. Но помните, что изменение кода в отладчике никак не влияет на реальный внешний вид меню. После этого вам нужно зайти на сервер и отредактировать style.css вручную, внеся нужные поправки.

Меня для сайта

Меню с помощью html

Теперь можно посмотреть, как на самом деле в коде выглядит практически любое меню. Для его создания сегодня принято использовать контейнер nav. Это парный html-тег, в который обычно помещают важные ссылки, которые есть на странице. Выводят такие ссылки обычно маркированным списком, в нем располагаются пункты списка, а уже в них – сами ссылки, то есть теги <a> с указанием обязательного атрибута href и прочих атрибутов, если они будут необходимы.

По умолчанию такое меню будет вертикальным. Уже в css выполняется настройка внешнего вида. Во-первых, убирают маркеры у списка. Во-вторых, отображают меню таким образом, как оно должно быть отображено. То есть если оно должно быть горизонтальным, то блочные элементы преобразуют в строчно-блочные, либо делают их плавающими.

В общем, создание меню сайта в html выглядит примерно так:

И выглядит вот так:

Меня для сайта

В реальном меню, разумеется, в атрибуте href должны быть рабочие ссылки на различные страницы. Идентификатор можно задать как для nav, так и для самого контейнера списка, это не так важно.

Собственно, дальнейшая работа происходит в css. Например, если вам нужно убрать маркеры и сделать все пункты в ряд, то используют следующие свойства:

И вот наша навигация выглядит уже более цивилизованно. А именно, вот так:

Меня для сайта

Остается сделать наши ссылки блочными элементами и применить к ним нужные стили. Например, это может быть цвет фона, отступы, цвет текста и т.д. Также для того, чтобы оживить навигацию, обычно стили меняют при наведении на пункт.

И теперь навигация приобрела человеческий вид:

Меня для сайта

Можно и дальше продолжать работать со стилями и довести оформление до того состояния, которое вам необходимо. Если вы верстаете меню чисто для себя, то просто можете выбрать для себя оптимальные цвета, выбрать оптимальные размеры ссылок и реализовать все это в коде. Ну а если вышеприведенный код был для вас не очень понятен, рекомендую вам пройти серию уроков по css для новичков, это позволит вам научиться оформлять html-элементы и понимать, как работают эти технологии в связке.

Что ж, у меня на этом все. Теперь можно практиковаться и создавать свое уникальное оформление для навигации на любом веб-ресурсе.

Меня для сайта

webformyself.com

Пример 2. Создание меню для сайта CSS методами

или как сделать CSS меню без использования изображения

HTML код меню:

<title>Создание меню для сайта CSS методами</title>
</head>
<body>
<ul class="css-menu-2">
<li><a href="#">Главная</a></li>
<li><a href="#">CSS уроки</a></li>
<li><a href="#" class="selected">CSS меню</a></li>
<li><a href="#">Справочник</a></li>
</ul>

Посмотреть CSS РєРѕРґ меню

Пример 3. Красивое горизонтальное CSS меню для сайта

или как сделать CSS меню для сайта без использования изображения

HTML код меню:

<title>Создание красивого горизонтального CSS меню для сайта</title>
</head>
<body>
<div id="css-menu">
<ul>
<li><a href="#">
<span class="text-top">Главная</span>
<span class="text-bottom">О нашем проекте</span>
</a></li>
<li><a href="#">
<span class="text-top">Справочник</span>
<span class="text-bottom">CSS справочник</span>
</a></li>
<li><a href="#">
<span class="text-top">CSS уроки</span>
<span class="text-bottom">Для начинающих</span>
</a></li>
<li><a href="#">
<span class="text-top">CSS меню</span>
<span class="text-bottom">Коллекция CSS меню</span>
</a></li>
</ul>
</div>

Посмотреть CSS РєРѕРґ меню

Пример 4. Горизонтальное меню для сайта CSS методами

или как сделать CSS меню для сайта без использования изображения

HTML код меню:

<title>Создание горизонтального CSS меню без изображения</title>
</head>
<body>
<ul class="css-menu-3">
<li><a href="#">Главная</a></li>
<li><a href="#">HTML уроки</a></li>
<li><a href="#">CSS уроки</a></li>
<li><a href="#" class="selected">CSS меню</a></li>
<li><a href="#">Справочник</a></li>
</ul>

Посмотреть CSS РєРѕРґ меню

ab-w.net

Как сделать горизонтальное меню: разметка и примеры оформления

  • Содержание:
  • HTML-разметка и базовые стили для горизонтального меню
  • 1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку
  • 2. Адаптивное меню для свадебного сайта
  • 3. Адаптивное меню с фестонами
  • 4. Адаптивное меню на ленточке
  • 5. Адаптивное меню с логотипом по середине
  • 6. Адаптивное меню с логотипом слева

HTML-разметка и базовые стили для горизонтального меню

По умолчанию все элементы списка <li>...</li> располагаются вертикально, занимая по ширине всю ширину элемента контейнера <ul>...</ul>, который в свою очередь занимает всю ширину его блока-контейнера.

HTML разметка для горизонтальной навигации

<ul>  <li><a href="">Пункт меню</a></li>  <li><a href="">Пункт меню</a></li>  <li><a href="">Пункт меню</a></li>  ...  </ul>

Горизонтальное меню, находящееся внутри тега <ul>...</ul>, можно дополнительно помещать внутрь элемента <nav>...</nav> и/или <header>...</header>. Благодаря этому html-разметке придается семантический смысл, а также появляется дополнительная возможность для форматирования блока меню.

Существует несколько способов разместить их горизонтально. Для начала нужно сбросить стили браузера по умолчанию для элементов навигации:

ul {   list-style: none; /*убираем маркеры списка*/   margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/   padding-left: 0; /*убираем левый отступ, равный 40px*/  }  a {text-decoration: none; /*убираем подчеркивание текста ссылок*/}

See the Pen GJxayB by Elena Nazarova (@nazarelen) on CodePen.

Способ 1. li {display: inline;}

Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li {margin-right: -4px;}. Дальше стилизуем ссылки по своему желанию.

Способ 2. li {float: left;}

Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul {overflow: hidden;}, расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.

Способ 3. li {display: inline-block;}

Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.

Способ 4. ul {display: flex;}

Делаем список ul гибким контейнером с помощью модели CSS3 flexbox. В результате элементы списка располагаются горизонтально. Добавляем для ссылок a {display: block;} и стилизуем их по своему желанию.

1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку

<ul class="menu-main">   <li><a href="" class="current">Work</a></li>   <li><a href="">About</a></li>   <li><a href="">Blog</a></li>   <li><a href="">Contact</a></li>  </ul>
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed');  .menu-main {   list-style: none;   margin: 40px 0 5px;   padding: 25px 0 5px;   text-align: center;   background: white;  }  .menu-main li {display: inline-block;}  .menu-main li:after {   content: "|";   color: #606060;   display: inline-block;   vertical-align:top;  }  .menu-main li:last-child:after {content: none;}  .menu-main a {   text-decoration: none;   font-family: 'Ubuntu Condensed', sans-serif;   letter-spacing: 2px;   position: relative;   padding-bottom: 20px;   margin: 0 34px 0 30px;   font-size: 17px;   text-transform: uppercase;   display: inline-block;   transition: color .2s;  }  .menu-main a, .menu-main a:visited {color: #9d999d;}  .menu-main a.current, .menu-main a:hover{color: #feb386;}  .menu-main a:before,  .menu-main a:after {   content: "";   position: absolute;   height: 4px;   top: auto;   right: 50%;   bottom: -5px;   left: 50%;   background: #feb386;   transition: .8s;  }  .menu-main a:hover:before, .menu-main .current:before {left: 0;}  .menu-main a:hover:after, .menu-main .current:after {right: 0;}   @media (max-width: 550px) {  .menu-main {padding-top: 0;}  .menu-main li {display: block;}  .menu-main li:after {content: none;}  .menu-main a {   padding: 25px 0 20px;    margin: 0 30px;  }  }

2. Адаптивное меню для свадебного сайта

<nav class="top-menu">   <ul class="menu-main">   <li><a href="" class="current">Work</a></li>   <li><a href="">About</a></li>   <li><a href="">Blog</a></li>   <li><a href="">Contact</a></li>   </ul>  </nav>
@import url('https://fonts.googleapis.com/css?family=PT+Sans');  .top-menu {   position: relative;    background: #fff;   box-shadow: inset 0 0 10px #ccc;  }  .top-menu:before,  .top-menu:after {   content: "";   display: block;   height: 1px;   border-top: 3px solid #575350;   border-bottom: 1px solid #575350;   margin-bottom: 2px;  }  .top-menu:after {   border-bottom: 3px solid #575350;   border-top: 1px solid #575350;   box-shadow: 0 2px 7px #ccc;   margin-top: 2px;  }  .menu-main {   list-style: none;   padding: 0 30px;   margin: 0;   font-size: 18px;   text-align: center;   position: relative;  }  .menu-main:before,  .menu-main:after {   content: "25C8";   line-height: 1;   position: absolute;   top: 50%;   transform: translateY(-50%);  }  .menu-main:before {left: 15px;}  .menu-main:after {right: 15px;}  .menu-main li {   display: inline-block;   padding: 5px 0;  }  .menu-main a {   text-decoration: none;   display: inline-block;   margin: 2px 5px;   padding: 6px 15px;   font-family: 'PT Sans', sans-serif;   font-size: 16px;   color: #777777;   border-bottom: 1px solid transparent;   transition: .3s linear;  }  .menu-main .current, .menu-main a:hover {   border-radius: 3px;   background: #f3ece1;   color: #313131;   text-shadow: 0 1px 0 #fff;   border-color: #c6c6c6;  }  @media (max-width: 500px) {   .menu-main li {display: block;}  }

3. Адаптивное меню с фестонами

<ul class="menu-main">   <li><a href="" class="current">Work</a></li>   <li><a href="">About</a></li>   <li><a href="">Blog</a></li>   <li><a href="">Contact</a></li>  </ul>
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption');  .menu-main {   list-style: none;   padding: 0 30px;   margin: 0;   font-size: 18px;   text-align: center;   position: relative;   background: white;  }  .menu-main:after {   content: "";   position: absolute;   width: 100%;   height: 20px;   left: 0;   bottom: -20px;   background: radial-gradient(white 0%, white 70%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%) 0 -10px;   background-size: 20px 20px;   background-repeat: repeat-x;  }  .menu-main li {display: inline-block;}  .menu-main a {   text-decoration: none;   display: inline-block;   margin: 0 15px;   padding: 10px 30px;   font-family: 'PT Sans Caption', sans-serif;   color: #777777;   transition: .3s linear;   position: relative;  }  .menu-main a:before,  .menu-main a:after {   content: "";   position: absolute;   top: calc(50% - 3px);   width: 6px;   height: 6px;   border-radius: 50%;   background: #F58262;   opacity: 0;   transition: .5s ease-in-out;  }  .menu-main a:before {left: 5px;}  .menu-main a:after {right: 5px;}  .menu-main a.current:before,  .menu-main a.current:after,  .menu-main a:hover:before,   .menu-main a:hover:after {opacity: 1;}  .menu-main a.current,  .menu-main a:hover {color: #F58262;}  @media(max-width:680px) {   .menu-main li {display: block;}  }

4. Адаптивное меню на ленточке

<nav class="top-menu">   <ul class="menu-main">   <li><a href="" class="current">Work</a></li>   <li><a href="">About</a></li>   <li><a href="">Blog</a></li>   <li><a href="">Contact</a></li>   </ul>  </nav>
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption');  .top-menu {   margin: 0 60px;   position: relative;   background: #5A394E;    box-shadow:    inset 1px 0 0 rgba(255,255,255,.1),    inset -1px 0 0 rgba(255,255,255,.1),    inset 150px 0 150px -150px rgba(255,255,255,.12),    inset -150px 0 150px -150px rgba(255,255,255,.12);  }  .top-menu:before,  .top-menu:after {   content: "";   position: absolute;   z-index: 2;   left: 0;   width: 100%;   height: 3px;  }  .top-menu:before {   top: 0;   border-bottom: 1px dashed rgba(255,255,255,.2);  }  .top-menu:after {   bottom: 0;   border-top: 1px dashed rgba(255,255,255,.2);  }  .menu-main {   list-style: none;   padding: 0;   margin: 0;   text-align: center;  }  .menu-main:before,   .menu-main:after {   content: "";   position: absolute;   width: 50px;   height: 0;   top: 8px;   border-top: 18px solid #5A394E;   border-bottom: 18px solid #5A394E;   transform: rotate(360deg);   z-index: -1;  }  .menu-main:before {   left: -30px;   border-left: 12px solid rgba(255, 255, 255, 0);  }  .menu-main:after {   right: -30px;   border-right: 12px solid rgba(255, 255, 255, 0);  }  .menu-main li {   display: inline-block;   margin-right: -4px;  }  .menu-main a {   text-decoration: none;   display: inline-block;   padding: 15px 30px;   font-family: 'PT Sans Caption', sans-serif;   color: white;   transition: .3s linear;  }  .menu-main a.current,  .menu-main a:hover {background: rgba(0,0,0,.2);}  @media (max-width: 680px) {  .top-menu {margin: 0;}  .menu-main li {   display: block;   margin-right: 0;  }  .menu-main:before,   .menu-main:after {content: none;}  .menu-main a {display: block;}  }

5. Адаптивное меню с логотипом по середине

<nav class="top-menu">   <ul class="menu-main">   <li class="left-item"><a href="">Work</a></li>   <li class="left-item"><a href="">About</a></li>   <li class="left-item"><a href="">Story</a></li>   <li class="right-item"><a href="">Contact</a></li>   <li class="right-item"><a href="">Shop</a></li>   <li class="right-item"><a href="">Gallery</a></li>  </ul>   <a class="navbar-logo" href=""><img src="https://html5book.ru/wp-content/uploads/2017/04/lily-logo.png"></a>  </nav>
@import url('https://fonts.googleapis.com/css?family=Arimo');  .top-menu {   position: relative;   background: rgba(34,34,34,.2);  }  .menu-main {   list-style: none;   margin: 0;   padding: 0;  }  .menu-main:after {   content: "";   display: table;   clear: both;  }  .left-item {float: left;}  .right-item {float: right;}  .navbar-logo {   position: absolute;   left: 50%;   top: 50%;   transform: translate(-50%,-50%);  }  .menu-main a {   text-decoration: none;   display: block;   line-height: 80px;   padding: 0 20px;   font-size: 18px;   letter-spacing: 2px;   font-family: 'Arimo', sans-serif;   font-weight: bold;   color: white;   transition: .3s linear;  }  .menu-main a:hover {background: rgba(0,0,0,.3);}  @media (max-width: 830px) {  .menu-main {   padding-top: 90px;   text-align: center;  }  .navbar-logo {   position: absolute;   left: 50%;   top: 10px;   transform: translateX(-50%);  }  .menu-main li {   float: none;   display: inline-block;  }  .menu-main a {   line-height: normal;   padding: 20px 15px;   font-size: 16px;  }  }  @media (max-width: 630px) {  .menu-main li {display: block;}  }

6. Адаптивное меню с логотипом слева

<nav class="top-menu">   <a class="navbar-logo" href=""><img src="https://html5book.ru/wp-content/uploads/2017/04/lily-logo.png"></a>   <ul class="menu-main">   <li><a href="">Work</a></li>   <li><a href="">About</a></li>   <li><a href="">Story</a></li>   <li><a href="">Shop</a></li>   <li><a href="">Gallery</a></li>   <li><a href="">Contact</a></li>   </ul>  </nav>
@import url('https://fonts.googleapis.com/css?family=Arimo');  .top-menu {   background: rgba(255,255,255,.5);   box-shadow: 3px 0 7px rgba(0,0,0,.3);   padding: 20px;  }  .top-menu:after {   content: "";   display: table;   clear: both;  }  .navbar-logo {display: inline-block;}  .menu-main {   list-style: none;   margin: 0;   padding: 0;   float: right;  }  .menu-main li {display: inline-block;}  .menu-main a {   text-decoration: none;   display: block;   position: relative;   line-height: 61px;   padding-left: 20px;   font-size: 18px;   letter-spacing: 2px;   font-family: 'Arimo', sans-serif;   font-weight: bold;   color: #F73E24;   transition:.3s linear;  }  .menu-main a:before {   content: "";   width: 9px;   height: 9px;   background: #F73E24;   position: absolute;   left: 50%;   transform: rotate(45deg) translateX(6.5px);   opacity: 0;   transition: .3s linear;  }  .menu-main a:hover:before {opacity: 1;}  @media (max-width: 660px) {  .menu-main {   float: none;   padding-top: 20px;  }  .top-menu {   text-align: center;   padding: 20px 0 0 0;  }  .menu-main a {padding: 0 10px;}  .menu-main a:before {transform: rotate(45deg) translateX(-6px);}  }  @media (max-width: 600px) {  .menu-main li {display: block;}  }

html5book.ru

You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.