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

Доброго времени суток, дорогие читатели. Сегодня мы разберем тему «как сделать горизонтальное меню используя HTML и CSS». Меню, как правило, находится в шапке сайта и является перечнем ссылок на самые важные страницы, его также называют главным меню. Данные ссылки пользователи будут постоянно нажимать. То, как вы их расположите и какой дизайн вы зададите меню будет влиять на поведение пользователей, конверсию, их общее впечатление от вашего сайта и, конечно, на seo-продвижение.

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.    
e; } 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; /*убираем подчеркиван.    
ansition: 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;/*добавляем эффект при наведен.    
e>

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

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

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

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

nz4.ru

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

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

HTML код меню:


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

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

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

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

HTML код меню:

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

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

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

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

HTML код меню:

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

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

ab-w.net

Простое HTML меню

По смыслу меню является списком разделов сайта, поэтому логично для меню использовать тег ul — маркированный список. Кроме того, в HTML5 появился новый тег, который следует использовать для обозначения области навигации по сайту — nav. Использование этих двух тегов позволит поисковой системе точнее разобраться в структуре нашего сайта.

В качестве примера возьмём меню из 4-х пунктов: Главная, Статьи, Услуги и Контакты. Таким образом код HTML нашего меню будет выглядеть так:


 <nav class='hmenuA'>  <ul>  <li><a href="#">Главная</a></li>  <li><a href="#">Статьи</a></li>  <li><a href="#">Услуги</a></li>  <li><a href="#">Контакты</a></li>  </ul> </nav> 

Если у вас nav используется только для главного горизонтального меню, можно обойтись без указания класса и все стили описать с использованием nav в качестве опорного селектора. Но я буду показывать несколько вариантов меню, поэтому добавил класс hmenuA, чтобы можно было применить разные стили к разным вариантам меню. Буква A на конце класса потому, что будут еще варианты B и С

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

В первую очередь необходимо убрать маркеры списка и лишние отступы:

  .hmenuA > ul {  list-style: none;  margin: 0px;  padding: 0px;  } 

К элементам списка мы применяем режим inline-block:

  .hmenuA > ul > li {  display: inline-block;  } 

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

Видите пробелы между элементами меню? Это не отступы, а реальные текстовые пробелы. Они возникли из-за того, что HTML-код был разбит на несколько строк, и «пустые» символы между пунктами меню браузер интерпретировал как пробелы между «словами». Эту особенность надо учитывать при использовании режима inline-block.

В принципе, эти пробелы нам не очень мешают. Но если вам при вёрстке меню потребуется задать точные расстояния отступов между пунктами меню или прижать пункты меню друг к другу вообще без отступов, пробелы нам помешают. Поэтому при вёрстке горизонтальных панелей inline-block-ом принято все ненужные пробелы убирать. Я исправил HTML код меню так, чтобы между тегами не было лишних пробелов. Чтобы код оставался нормально читаемым, я поместил переводы строк внутрь тегов, перед закрывающей угловой скобкой. Вот такой код получился:

 <nav class='hmenuA'>  <ul>  <li><a href="#">Главная</a></li  ><li><a href="#">Статьи</a></li  ><li><a href="#">Услуги</a></li  ><li><a href="#">Контакты</a></li>  </ul> </nav> 

Теперь пробелы исчезли:

Не бойтесь, что пункты меню сливаются. Сейчас мы добавим немного оформления, и всё станет намного симпатичнее:

  .hmenuA > ul {  list-style: none;  margin: 0px;  padding: 0px;  background-color: #d0e0ff;  text-align: center;  }   .hmenuA > ul > li {  display: inline-block;  }   .hmenuA > ul > li > a {  display: block;  padding: 0 30px;  text-decoration: none;  color: #088;  line-height: 50px;  font-family: "Verdana", "Arial";  font-size: 18px;  } 

text-align: center используется, чтобы выровнять меню по центру страницы. Та как мы указали, что пункты меню следует воспринимать как строчные элемениты, они выравниваются при помощи text-align.

Высоту меню я задал, указав line-height. Этот приём позволяет одновременно указать высоту блока и выровнять текст по центру блока в вертикальном направлении.

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

Результат:

Как поведёт себя наше меню при уменьшении ширины страницы? Уменьшите окно браузера по ширине так, чтобы меню перестало в него помещаться. Что происходит? Меню из однострочного становистя двустрочным. (Или даже трёх- и четырёхстрочным, если сделать окно браузера совсем узким.)

Если вы не хотите, чтобы меню становилось многострочным, вам придётся ограничить минимальную ширину страницы, подобрав подходящее значение min-width для тега body.

Давайте добавим немного анимации. Самый простой вариант — подчёркивание пунктов меню при наведении мыши. Но так как простое подчёркивание — это совсем скучно, давайте сделаем, чтобы оно появлялось и исчезало плавно.

Добавим к стилям следующее:

  .hmenuA > ul > li > a {  position: relative;  }   .hmenuA > ul > li > a:after {  content: ' ';  position: absolute;  height: 2px;  background-color: transparent;  bottom: 10px;  left: 30px;  right: 30px;  transition: background-color 0.6s ease;  }   .hmenuA > ul > li > a:hover:after {  background-color: #088;  } 

Результат:

Другой вариант анимации:

  .hmenuA > ul > li > a {  position: relative;  }   .hmenuA > ul > li > a:after {  content: ' ';  position: absolute;  height: 2px;  background-color: #088;  bottom: 10px;  left: 30px;  right: 100%;  transition: right 0.7s ease;  }   .hmenuA > ul > li > a:hover:after {  right: 30px;  }  

Посмотрим еще несколько вариантов, как можно оформить меню. Всё ограничивается лишь вашей фантазией.

Меню с плоскими кнопками

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

 <style>  .hmenuB > ul {  list-style: none;  margin: 0px;  padding: 0px;  text-align: center;  }   .hmenuB > ul > li {  display: inline-block;  padding: 3px;  }   .hmenuB > ul > li > a {  display: block;  padding: 0 15px;  text-decoration: none;  background-color: #349;  color: #fff;  line-height: 36px;  font-family: "Verdana", "Arial";  font-size: 16px;  transition: background-color 0.7s ease;  position: relative;  }   .hmenuB > ul > li > a:hover {  background-color: #119;  }   .hmenuB > ul > li > a:after {  content: ' ';  position: absolute;  background-color: transparent;  border: 1px solid transparent;  transition: border-color 0.7s ease;  top: 2px;  bottom: 2px;  left: 2px;  right: 2px;  }   .hmenuB > ul > li > a:hover:after {  border-color: #fff;  }  </style>  <nav class='hmenuB'>  <ul>  <li><a href="#">Главная</a></li  ><li><a href="#">Статьи</a></li  ><li><a href="#">Услуги</a></li  ><li><a href="#">Контакты</a></li>  </ul> </nav> 

Меню с рельефными разделителями

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

 <style>  .hmenuC > ul {  list-style: none;  margin: 0px;  padding: 0px;  text-align: center;  background-color: #322;  }   .hmenuC > ul > li {  display: inline-block;  border-left: 1px solid rgba(255, 255, 255, 0.1);  border-right: 1px solid rgba(0, 0, 0, 0.5);  }   .hmenuC > ul > li:first-child {  border-left-color: transparent;  }   .hmenuC > ul > li:last-child {  border-right-color: transparent;  }   .hmenuC > ul > li > a {  display: block;  padding: 0 15px;  text-decoration: none;  color: #fff;  line-height: 36px;  font-family: "Verdana", "Arial";  font-size: 16px;  transition: all 0.7s ease;  }   .hmenuC > ul > li > a:hover {  text-decoration: underline;  } </style>  <nav class='hmenuC'>  <ul>  <li><a href="#">Главная</a></li  ><li><a href="#">Статьи</a></li  ><li><a href="#">Услуги</a></li  ><li><a href="#">Контакты</a></li>  </ul> </nav> 

www.helpful-stuff.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

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

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

  <div class="top-menu">  	<ul>  		<li><a href="#">Ссылка 1</a></li>  		<li>  			<a href="#">Ссылка 2</a>  			<ul>  				<li><a href="#">Ссылка подменю 1</a></li>  				<li><a href="#">Ссылка подменю 2</a></li>  			</ul>  		</li>  		<li><a href="#">Ссылка 3</a></li>  		<li><a href="#">Ссылка 4</a></li>  	</ul>  </div>  

Теперь к созданной структуре применим следующие стили:

  .top-menu li{  	list-style:none;/*Убираем маркер*/	  	display:inline-block;/*Выстраиваем пункты в ряд*/  	background:#ccc;/*Цвет фона для пункта*/  	position:relative;  }  .top-menu li:hover{  	background:#eee;/*Цвет фона при наведение на пункт*/  }  .top-menu li a{  	color:#222;/*Цвет шрифта в пункте*/  	padding:5px 7px;/*Отступы для пункта*/	  	text-decoration:none;/*Убираем подчеркивание*/	  	display:block;  }  .top-menu li ul{  	display:none;/*Прячем выпадающее меню*/  	position:absolute;  	padding-left:0;  	width:120px;/*Ширина выпадающего меню*/  	padding-top:3px;/*Отступ сверху у выпадающего меню*/  }  .top-menu li:hover ul{  	display:block;/*Показываем выпадающее меню при наведение*/  	left:0px;  }  

В итоге получим:
drop-down-menu

Меню созданному на чистом css, очень легко предать требуемый вид. Для того чтобы сменить цвет шрифта нужно поменять значение color, для смены фона значение background

Готовый пример — Скачать

pro-cod.ru

ДемоИсходники

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

Так как любое меню представляет из себя список ссылок, которые ведут на внутренние страницы сайта. Для создания меню обычно используют маркированные списки, которые создаются с помощью html тегов <ul> и <li>. Но как известно элементы списка по умолчанию выстраиваются вертикально друг под другом, а что если необходимо сделать горизонтальное меню? С использованием CSS это не является большой проблемой.

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

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

Для того чтобы идентифицировать список и задать для него нужные css стили, я добавил к нему атрибут id с идентификатором "menu".

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

  • Главная
  • Новости
  • Контакты
  • О сайте

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

Если же требуется получить горизонтальное меню, то просто необходимо расположить элементы списка по горизонтали. Для этого к селектору LI следует добавить стилевое свойство display со значением inline или inline-block. Я буду использовать правило display:inline-block. Итак, для того, чтобы элементы списка выстроились по горизонтали просто добавляем код CSS:

<style>
    ul#menu li{
        display:inline-block; /* расположить пункты горизонтально */
    }
</style>

Теперь элементы списка будут расположены по горизонтали:

Как видим пункты меню выстроились в один горизонтальный ряд. Но пока на меню похоже не очень. Теперь, чтобы получить полноценную навигационную панель, оформим меню с помощью css стилей. Для начала добавим фон для панели, растянем ссылки на весь пункт <code>li</code>, уберем подчеркивание ссылок, настроим отступы и др.:

<style>
    #menu, #menu li {
        margin: 0; /* убрать внутренние отступы */
        padding: 0; /* убрать внешние отступы */
    }
    #menu {
        background: #03658e; /* цвет фона навигационной панели */
    }
    #menu li{
        display:inline-block; /* расположить пункты горизонтально */
        text-align: center; /* текст горизонтально по центру */
    }
    #menu a {
        display: block; /* ссылка растягивается на весь пункт li */
        padding: 5px 15px; /* задаем внутренние отступы */
        color: #fff; /* цвет текста */
        text-decoration: none; /* убрать нижнее подчёркивание у ссылок */
    }
    #menu a:hover {
        background: #8AB8CC; /* фон пунктов при наведении */
    }
</style>

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

Вообще внешний вид меню далее зависит только от вашей фантазии и знания свойств css. Далее для примера приведу несколько вариантов оформления меню.

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

Выравнять меню по центру можно так:

<style>
    #menu, #menu li {
        margin: 0;
       padding: 0;
    }
    #menu {
        text-align: center; /* пункты и текст горизонтально по центру */
       background: #03658e;
    }
    #menu li{
        display:inline-block;
        text-align: center;
    }
    #menu a {
        display: block;
        padding: 5px 15px;
        color: #fff;
       font-size:150%;
       text-decoration: none;
    }
    #menu a:hover {
        background: #8AB8CC;
    }
</style>

Результат:

Либо так:

<style>
    #menu, #menu li {
        margin: 0;
        padding: 0;
    }
    #menu {
        max-width: 550px; /* ограничение длины панели */
        margin: 0 auto; /* навигационная панель по центру страницы */
        text-align: center;
        background: #03658e;
    }
    #menu li{
        display:inline-block;
        text-align: center;
    }
    #menu a {
        display: block;
        padding: 5px 15px;
        color: #fff;
        font-size:150%;
        text-decoration: none;
    }
    #menu a:hover {
        background: #8AB8CC;
    }
</style>

Результат:

webcodius.ru

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

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


You May Also Like

About the Author: admind

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

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

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

Adblock
detector