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


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

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

В чем отличия

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

Ну хорошо, а чем же отличается создание главной навигации (меню), раз уж вы читаете статью на эту тему, то какие-то отличия точно должны быть. Ну а как раньше создавалось меню? Обычно для этого использовали маркированный список, который помещали в дополнительный контейнер для всей навигации – обычный div.


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

В nav можно поместить как список, так и просто набор ссылок. Мне кажется, это даже более простое и правильное решение, хотя во многих шаблонах по-прежнему видно реализацию меню с помощью тегов ul, li, a.

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

Как сделать с помощью html5 горизонтальное меню

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

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

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


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

Теперь они идут сверху вниз, то есть наша навигация стала вертикальной. Чтобы вновь превратить ее в горизонтальную, нужно добавить определенные свойства. Например, вместо блочного типа определить для них блочно-строчный, либо задать им (float: left). Читайте подробнее об этих способах здесь.

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

Вертикальная навигация

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

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

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

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


Что еще можно сделать

Наконец, давайте посмотрим, как можно сделать меню в html5 с изменением цвета пунктов при наведении. За добавление стилей к элементу при наведении отвечает псевдокласс hover. Соответственно, достаточно его добавить к ссылкам и написать нужные стили.

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

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

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

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

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


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

webformyself.com

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

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

Разновидности меню в CSS

Существует сразу несколько видов и типов CSS меню:

  1. Главное меню. Это список определённых ссылок на ключевые разделы веб-сайта.
  2. Дополнительное меню. Такое меню имеет иерархическую структуру и бывает трёх типов:
    • Выпадающее меню. Раскрывается при наведении курсора мыши на пункт;
    • Всплывающее меню сайта. Раскрывается при клике на определённом пункте;
    • Статическое дополнительное меню для CSS. Древовидная структура, представленная в уже раскрытом виде.

Как создать меню в CSS?

Приведём пример создания простого горизонтального и вертикального меню на CSS с пояснениями.

Код горизонтального меню прописывается следующим образом:

В конечном итоге получается подобное горизонтальное меню:

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

Вертикальное меню, полученное при помощи данного кода, выглядит так:

Руководствуясь всеми вышеперечисленными принципами, приведём код для простого выпадающего меню:

Получаем такое выпадающее меню:

Как вы видите, достаточно простая HTML разметка и всего несколько строк CSS кода позволяют создать простое, но стильное меню, которое обязательно найдёт свое место в каком-либо веб-сайте. Обязательно попробуйте реализовать что-то подобное самостоятельно.

Желаем удачи!

www.internet-technologies.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 5.0+ 10.5+ 3.1+ 3.5+ 2.1+ 2.0+

Задача

Сделать горизонтальное меню, пункты которого имеют произвольный наклон (рис. 1).

Вид меню с наклонными пунктами

Рис. 1. Вид меню с наклонными пунктами

Решение

За трансформацию элемента отвечает стилевое свойство transform, в качестве его значения используется функция skewX, которая и задаёт нужный наклон. Угол наклона проще устанавливать в градусах, к примеру, 30deg — это 30º от вертикали. Трансформация действует и на все дочерние элементы, поэтому текст внутри элемента также будет наклонён, что не лучшим образом отражается на его читабельности и красоте. Поэтому к тексту важно ещё раз применить наклон, но уже в другую сторону, для этого достаточно просто поменять знак перед значением градусов.

Браузеры поддерживают свойство transform преимущественно со своими префиксами, так что для универсальности в стилях следует повторить его несколько раз с одним и тем же значением, добавляя -moz- для Firefox, -webkit- для Safari и Chrome, -o- для Opera и -ms- для браузера Internet Explorer как показано в примере 1.

Пример 1. Наклон пункта меню

HTML5CSS3IECrOpSaFx

 

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Меню</title> <style> li { display: inline-block; /* Строчно-блочные элементы */ background: #CA181A; /* Цвет фона */ margin-right: 3px; /* Расстояние между пунктами меню */ -webkit-transform: skewX(-30deg); /* Для Safari и Chrome */ -moz-transform: skewX(-30deg); /* Для Firefox */ -o-transform: skewX(-30deg); /* Для Opera */ -ms-transform: skewX(-30deg); /* Для IE */ transform: skewX(-30deg); /* CSS3 */ } a { color: #fff; /* Цвет ссылок */ display: block; /* Блочный элемент */ padding: 5px 15px; /* Поля вокруг текста */ text-decoration: none; /* Убираем подчёркивание */ -webkit-transform: skewX(30deg); /* Для Safari и Chrome */ -moz-transform: skewX(30deg); /* Для Firefox */ -o-transform: skewX(30deg); /* Для Opera */ -ms-transform: skewX(30deg); /* Для IE */ transform: skewX(30deg); /* CSS3 */ } li:hover { background: #333; /* Цвет фона при наведении курсора мыши */ } </style> </head> <body> <ul> <li><a href="1.html">Джокер</a></li> <li><a href="2.html">Пазузу</a></li> <li><a href="3.html">Палпатин</a></li> <li><a href="4.html">Доктор Дум</a></li> </ul> </body> </html>

В данном примере горизонтальное меню создаётся с помощью маркированного списка. Чтобы список был именно горизонтальным, в стилях к элементу li добавляется свойство display со значением inline-block. Для наклона применяется свойство transform с функцией skewX и значением -30º. К ссылкам внутри списка также применяется это свойство, но уже с положительным значением 30º, это обеспечивает правильное, а не наклонное отображение букв.

Браузеры Chrome, Safari и Firefox используют свойство transform для блочных или строчно-блочных элементов, поэтому для ссылок задано свойство display со значением block.

htmlbook.ru

Выпадающее горизонтальное меню html

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

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


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

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

 

Горизонтальное выпадающее меню на CSS

к менюСтили CSS для выпадающего меню и не только – вещь необходимая как воздух. Ведь выпадающая вкладка делается на основе псевдокласса :hover.

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


Это еще не конец, а только часть CSS для основного горизонтального меню. Далее мы напишем стили для выпадающего списка меню:


Вот теперь все. Сам механизм выпадашки реализован одной строчкой.

Смотрите скин с этим меню:

горизонтальное выпадающее менюРис. 2 (горизонтальное выпадающее меню)

к менюНиже доступен демо просмотр работы выпадающего меню, а также ссылка на скачивание исходников. (Демо будет открыт выпадашкой поверх этой страницы, не нужно нажимать открыть в новом окне ?  или колесико мышки)

Горизонтальное выпадающее меню на всю ширину

к менюБольшинство из вас могут меня упрекнуть, мол такие менюшки, как я показал выше, это привет из прошлого и от части вы правы, хотя я встречал свежие верстки с такими менюшками.

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

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


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

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

выпадающее меню cssДля очень длинных пунктов меню, такой вариант может быть не сильно удобным, так как они будут вылазить за пределы. Чтобы отключить это свойство, достаточно найти свойство «white-space:nowrap;» у селектора #menu1 ul li ul, и удалить его.

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

Без разделителей это меню смотрится так себе. Разделители можно добавить в хтмл руками, но если у вас CMS, например WordPress, – то руками там добавлять не сильно удобно.

Далее я покажу вам как можно добавить разделители в меню.

Горизонтальное выпадающее меню с разделителями

к менюСуществует несколько десятков вариантов, как на чистом CSS добавить полоску (разделитель) между пунктами меню. Варианты, которые используют ::before или ::after , или куда проще border-left, border-right я дублировать не буду.

Бывают ситуации, когда верстка построена так чудесненько, что без jquery не обойтись.

Html код у нас остается прежним, мы только подключаем в самом начале библиотеку jQuery и файл, который ее использует:


Сразу после </title>.

Как вы поняли, нужно создать файл script-menu-3.js и туда закинуть вот такой маленький код:


Стили CSS для такого меню нужно оставить те что есть, + забросить вот этот кусок в конец:

Выглядеть такое горизонтальное выпадающее меню с разделителями на jQuery будет вот так:gorizontal-menu-3-0

Можно просмотреть в режиме демо или скачать шаблон горизонтального меню ниже:

Преимуществами такого решения является:

  • меню будет тянутся динамически;
  • отступы от разделителя до пункта везде одинаковые;
  • более красивое и гибкое оформление.

 

Горизонтальное многоуровневое выпадающее меню CSS+HTML

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

  1. с випадашкой при наведении в сторону
  2. со всплывающей выпадашкой третьего уровня

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

Многоуровневое выпадающее меню с випадашкой в сторону при наведении

к менюДля начала нам нужно немножко подкоректировать наш хтмл. Там добавится парочка строк для 3 уровня:


Далее, для нашего горизонтального выпадающего меню нужно поменять стили CSS, меняем полностью все:


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

Вот так получилось: gorizontal-menu-4-0Я сделал 2 скина в одном, что бы показать как выпадашка смотрится справа и по средине.

Ниже вы можете посмотреть демо а также скачать пример:

 

Многоуровневое выпадающее меню со всплывающей випадашкой при наведении

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

Суть этого примера сделать горизонтальное выпадающее меню на всю ширину с выпадашкой на всю ширину + многоуровневость.

Хтмл код я менять не буду, его можно взять с предыдущего примере. Разделители на jQuery также оставляем.

Будет меняться только CSS полностью:


Вот так меню будет смотреться:gorizontal-menu-5-0Единственный момент – у сайта должно быть достаточно места, так как крайнего пункта справа нет места для выпадашки. Эту проблему можно решить через :nth-child но я не стал городить огород.

Смотрите демо горизонтального многоуровневого выпадающего меню:

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

 

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

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

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

Также, советую посетить родительскую страницу https://help-wp.ru/vypadayushhee-menu/, там собраны все примеры и разновидности выпадающих меню.

help-wp.ru

HTML код горизонтального выпадающего меню

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

  <nav role="navigation">  <ul>   <li><a href="/">Главная</a></li>   <li><a href="#">О блоге</a>   <ul>   <li><a href="/about">Об авторе</a></li>   <li><a href="/history">История блога</a></li>   <li><a href="/privacy-policy">Политика конфиденциальности</a></li>   <li><a href="/disclaimer">Отказ от ответственности</a></li>   </ul>   </li>   <li><a href="/sitemap">Карта сайта</a></li>   <li><a href="/contact">Обратная связь</a></li>  </ul>  <nav>  

Это классический вариант по структуре меню из комбинаций тегов UL и LI. Который встречается на большинстве сайтов в интернете, в том числе и WordPress.

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

  /*| Navigation |*/    nav{  background: #334; /* Задаем основной фон меню */  padding: 0 3%; /* Задаем внутренние отступы */  }    nav ul {  list-style: none; /* Убираем маркер для элементов списка */  }    nav ul li {  display:inline-block;/*Выстраиваем пункты меню в ряд по горизонтали */  }    nav ul li a {  display:block; /* Настраиваем оформление пунктов меню */  padding: 15px 20px;  font-size: .9em;  color: #eee;  letter-spacing: 1px;  text-decoration: none;  text-transform: uppercase;  border-top: 1px solid #445;  }    nav ul li:hover {  background: #445; /* Меняем фон пункта меню при наведении указателя мыши */  }    nav ul li ul {  display: none; /* Прячем пункты выпадающего блока меню */  position:absolute;  background: #334; /* Задаем фон выпадающего блока меню */  }    nav ul li:hover ul {  display:block; /* Отображаем подменю при наведении мыши */  }    nav ul li ul li {  display:block; /* Выстраиваем по вертикали пункты выпадающего меню */  }  

Выводы о реализации меню на CSS и HTML

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

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

moonback.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

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

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