Меню сайта

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

Разработчики интернет-магазинов, блогов, обучающих сервисов и других ресурсов экспериментируют и создают все более новые и необычные карты. После прочтения статьи вы узнаете, на какие основные группы делятся все виды панелей навигации, сможете опробовать каждую из них, а также научиться писать код меню для сайта 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

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; /*делаем отступ сверху*/ .    
и*/ } 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; /*добавляем фон к пункту мен.    
*добавляем эффект при наведении*/ } li { float:left; /*Размещаем список горизонтально для реализации меню*/ }

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

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

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

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

  
ли 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

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

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

Дизайн с использованием вкладок:

Дизайн с элементами, отображаемыми в виде ссылок или кнопок:

С использованием иконок:

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

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

Если страницы сайта длинные, можно зафиксировать горизонтальное меню наверху, когда пользователь прокручивает страницу вниз:

Недостатком горизонтальных меню является то, что количество ссылок, которые они могут вмещать, довольно ограничено. Именно поэтому сайты со сложной структурой предпочитают использовать раскрывающиеся меню или и горизонтальные, и вертикальные раздвижные меню для сайта. Например, этот сайт использует как выпадающее меню-гамбургер, так и горизонтальное меню (в виде вкладок «Журнал», «Популярное» и «Рекомендуем»):

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

А здесь горизонтальное и вертикальное многоуровневое меню для сайта используются вместе:

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

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

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

Но вертикальные меню чаще используют группировку ссылок:

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

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

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

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

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

Или все разделы и подразделы:

Приведенный выше пример меню сайта соответствует передовым практикам и эффективно использует пустое пространство, чтобы меню было проще просматривать.

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

И при объединении различных типов меню нужно решить, какие части будут раскрываться вниз и представлять дополнительные разделы:

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

И в вертикальном меню:

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

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

Идея всплывающего красивого вертикального меню для сайта хорошо реализована в шаблоне WordPress Wordie:

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

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

Данная публикация представляет собой перевод статьи «Examples of website menu designs» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.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

Меню сайта

Хабр, привет!

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

Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

В этом обзоре мы рассмотрим многоуровневые меню.

Flat Horizontal Navigation

Меню сайта

Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy

Material Nav Header w/ Aligned Dropdowns

Меню сайта

Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
 
Smooth Accordion Dropdown Menu

Меню сайта

Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ
 
Pure CSS Dark Inline Navigation Menu

Меню сайта

Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
 
Pure CSS3 Mega Dropdown Menu With Animation

Меню сайта

Меню сайта

Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs
 
CSS3 Dropdown Menu

Меню сайта

Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg
 
Simple Pure CSS Dropdown Menu

Меню сайта

Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW
 
Bootstrap 3 mega-dropdown menu

Меню сайта

Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
 
Flat Navigation

Меню сайта

Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN
 
3D nested navigation

Меню сайта

Горизонтальное меню с очень крутой анимацией без js!
http://codepen.io/devilishalchemist/pen/wBGVor
 
Responsive Mega Menu — Navigation

Меню сайта

Горизонтальное адаптивное меню.  Выглядит неплохо, но мобильная версия немного "хромает". Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc
 
Pure Css3 Menu

Меню сайта

Оригинальное меню. С простым и чистым кодом без js. Применяйте для "вау" эффектов.
http://codepen.io/Sonick/pen/xJagi
 
Full CSS3 Dropdown Menu

Меню сайта

Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi
 
Css3 only dropdown menu

Меню сайта

Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb
 
Dropdown Menus

Меню сайта

Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa
 
Pure CSS DropDown Menu

Меню сайта

Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH
 
Pull Menu — Menu Interaction Concept

Меню сайта

Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ
 
Make Simple Dropdown Menu

Меню сайта

Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb
 
Pure CSS dropdown [work for mobile touch screen]

Меню сайта

Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR
 
Dropdown Menu

Меню сайта

Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq
 
CSS 3 Dropdown Menu

Меню сайта

Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR
 
KVdKQJ (автор очень долго думал над названием)

Меню сайта

Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ
 
CSS3 Menu Dropdowns (особенное решение)!

Меню сайта

Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz
 
П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.

habr.com

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

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

Навигация в 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

Виды меню сайта

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

Главное

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

Второстепенное

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

Меню сайта

По способу реализации выделяют:

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

Меню сайта

  • В раскрывающемся меню вывод дополнительных полей происходит по клику.

Меню сайта

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

Первое располагают, как правило, вверху. Может быть на прозрачном фоне, либо статично закрепленным.

Меню сайта

Второе бывает левым либо правым, либо комбинацией обоих.

Варианты дизайна меню

Стили отвечают за внешний вид, то есть за то, как видим элементы мы с вами. Варианты оформления меню сайта:

  • с динамическими эффектами при наведении;
  • с иконками, картинками;
  • стиль «метро»;
  • аккордеон.

Меню сайта

Меню сайта

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

Основные правила и ошибки

  • Меню должно быть заметным. Это может быть выделение оформлением или цветом. Ссылки, иконки должны контрастировать с фоном настолько, чтобы при считывании не возникло проблем. Откажитесь от скрытого или недостаточно контрастного меню, даже если очень хочется воплотить оригинальную дизайнерскую мысль. Если реализовали, оцените по счетчикам аналитики показатель отказов, просмотрите по вебвизору, как люди ведут себя на сайте. И расставьте приоритеты: супер-креатив или понятный дружелюбный интерфейс.
  • Дизайн. Разные средства: цвет, шрифты, тени— помогают добиться удобства восприятия. При этом помните, что нужно сделать элемент заметным, а не пестрым и аляповатым.
  • Единство оформления. На всех страницах ресурса стиль меню должен оставаться неизменным. Разные варианты будут сбивать пользователя, ухудшать восприятие информации.
  • Стандарты верстки. Располагайте меню в общепринятых местах: вверху, справа, слева. Внизу в футере могут быть дублирующие ссылки, но никак не единственный элемент навигации. Пользователи не будут его искать, они просто уйдут. Был пример размещения элемента Корзина на сайте не в стандартном правом верхнем углу, а в левом нижнем. Результат — ее просто не находили.
  • Тестирование. Если на старте трудно оценить, какой вариант будет оптимальным, подсмотрите у лидеров в топе. При вводе серьезных многоуровневых веб-проектов полезно проводить тесты на предмет доступности, удобства и т.д.
  • Индикация. Настройка отображения меню таким образом, чтобы посетитель ориентировался, в каком разделе находится. Для этого используют выделение активного пункта графикой или цветом.

Меню сайта

  • Четкие ориентиры. Люди приходят не всегда сразу на главную, могут начинать с любого подраздела. Грамотное навигационное меню должно показать, где они сейчас и как попасть в раздел любого уровня. Размещение ссылки/иконки на главную страницу на каждом URL в заметном месте обязательно.
  • Меню должно быть понятным. Не пишите неизвестные аббревиатуры, сокращения, иностранные аналоги только потому, что они короче и оригинальнее смотрятся. Посетитель не должен догадываться, что скрывается в разделе Print: печатная продукция или размещение в прессе. Если рассчитываете таким образом заинтриговать, чтобы человек перешел и посмотрел, получите процент отказов под 100.
  • Удобство. Если ваше меню многоуровневое с выпадайками, позаботьтесь о настройке, приемлемой скорости отображения вспомогательных секций. Иногда очень сложно со скоростью света уловить всю цепочку из 4 подразделов. Ставьте себя на место ваших клиентов. Даже если пунктов много, оставьте только основные.
  • Не мельчите, шрифт должен быть хорошо читаемым, высота и ширина плашек достаточной для комфортного попадания по ним курсором. Выпадающий список должен уместиться в высоту одного экрана. В противном случае не все будут напрягаться, пытаясь одновременно удерживать его открытым и осуществлять прокрутку.
  • Сегодня правило хорошего тона – верстать сайты с учетом адаптивных версий под мобильные устройства с отличными разрешениями.
  • Статичное меню. Если настройки и дизайн позволяют это реализовать, закрепите панель на странице неподвижно относительно остального контента. Так навигация всегда будет перед глазами пользователя и избавит от необходимости возвращаться каждый раз наверх, чтобы перейти в другой раздел. Или как минимум используйте заметные значки, при нажатии на которые автоматом можно перейти на первый экран.

Роль меню в процессе продвижения сайта

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

  • Удачная навигация и грамотная внутренняя перелинковка являются факторами внутренней оптимизации. Это удобство для людей и положительная оценка от поисковиков. Понятная перелинковка поможет пользователю сориентироваться, увидеть ссылки на интересные разделы. Удобным считается такой вариант, когда добраться до нужного материала можно в 3 клика.
  • Если содержимое заинтересовало, человек проведет на веб-сайте дольше времени. Поисковые системы учтут это, как положительный результат для поведенческих факторов.
  • Есть еще один важный момент. В web-разработке при проектировании сайтов правильным считается разрабатывать структуру на основе семантического ядра. То есть, сначала нужно собрать и структурировать информацию обо всех тематических поисковых запросах. Самые высокочастотные лягут в основу заголовков разделов. Соответственно, названия пунктов меню лучше не изобретать с креативным копирайтером, а согласовывать с seo-специалистом. Он подскажет, насколько часто люди ищут ту или иную информацию, это поможет сформировать интуитивно понятные названия.
  • Если ссылки оформлены в виде графических элементов, нужно прописывать alt и title к ссылкам. Тогда роботы при индексации смогут учесть эти пункты.

Как сделать меню сайта

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

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

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

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

semantica.in

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

  • Содержание:
  • 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 для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector