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


Выпадающее меню можно сделать на CSS не используя скрипты и модули. Просто дописываем несколько строк в CSS файл и готово. Несмотря на простоту меню будет достаточно универсальным. Стили подходить под произвольное количество уровней вложенности. Хоть два хоть десять уровней. Код при этом остаётся тем же. В статье описаны три вида меню, но если вы только начинаете разбираться в вёрстке советую читать сначала. Так будет проще понять.

  1. Вертикальное выпадающее меню
  2. Горизонтальное выпадающее меню с одним уровнем вложенности
  3. Горизонтальное меню с несколькими уровнями вложенности

Сначала сделаем HTML разметку для меню. Принято делать меню списком. Это не стандарт просто так сложилось. 

 

HTML файл мы больше трогать не будем. Все дальнейшие изменения производятся только за счёт CSS. Первое что нам нужно сделать — скрыть вложенные пункты.

 ul.nav li ul {display: none;}  

Ещё нужно убрать маркеры но это дело вкуса.

 ul.nav li {list-style: none;}

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

 ul.nav li:hover > ul {display: block;} 

В этой строчке заключается вся магия нашего выпадающего меню, поэтому разберём её подробнее. Благодаря псевдоклассу :hover, при наведении курсора на пункт меню, он же элемент списка li, для первого вложенного списка ul значение display станет block. Так открывается первый уровень вложенности. Если на этом уровне есть пункты содержащие подпункты, то при наведении на них также откроется только один вложенный уровень.

С основной механикой разобрались. Осталось переопределить место где будут появляться вложенные пункты. Для этого воспользуемся свойством position: absolute. При таком позиционировании отсчёт координат ведётся от края окна браузера если только для родительского элемента не задано свойство position с значением fixed, relative или absolute. В этом случае отсчёт ведётся от края родительского элемента.


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

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

 

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

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

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

Для горизонтального меню мы будем так же применять позиционирование но есть несколько нюансов. Что бы сделать меню горизонтальным используем свойство float. Меню будет раскрываться вниз значит при позиционировании нужно учитывать высоту. Для начала сделаем меню с одним уровнем вложенности. Вложенное меню также будет горизонтальным. Для этого вложенное меню позиционируем относительно списка а не родительского пункта и задаём для него ширину.

 

Вот что получиться в итоге демка.

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

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


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

 

Вот так будет выглядеть наше многоуровневое меню демка.

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

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

sitear.ru

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

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

 <ul id="nav1">  <li><a href="#1">Пункт 1</a>  <li><a href="#2">Пункт 2</a>  <li><a href="#3">Пункт 3</a>  <li><a href="#4">Пункт 4</a> </ul>

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


 <ul id="nav2">  <li><a href="#1">Пункт 1</a>  <li><a href="#2">Пункт 2</a>  <li><a href="#3">Пункт 3</a>  <li><a href="#4">Пункт 4</a> </ul>

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

 <ul id="nav3">  <li><a href="#1">Пункт 1</a>  <li><a href="#2">Пункт 2</a>  <li><a href="#3">Пункт 3</a>  <li><a href="#4">Пункт 4</a> </ul>
 <ul id="nav4">  <li><a href="#1">Пункт 1</a>  <li><a href="#2">Пункт 2</a>  <li><a href="#3">Пункт 3</a>  <li><a href="#4">Пункт 4</a> </ul>

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

 <ul id="nav5">  <li><a href="#1">Пункт 1</a>  <li><a href="#2">Пункт 2</a>  <li><a href="#3">Пункт 3</a>  <li><a href="#4">Пункт 4</a> </ul>

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

 <ul id="nav6">  <li><a href="#1">Пункт 1</a>  <li><a href="#2">Пункт 2</a>  <li><a href="#3">Пункт 3</a>  <li><a href="#4">Пункт 4</a> </ul>

shpargalkablog.ru

Главная » HTML и CSS » Горизонтальное выпадающее меню HTML + CSS
Это простое меню с несколькими уровнями, которое полностью создано на чистом CSS, где подойдет под многие тематические сайты. Идея состоит в том, чтобы оживить каждый пункт меню после изменения уровня. Анимация начинается с щелчка элемента и задержки распространяются через категорию, что можно присвоить каждому запросу. Простая и понятная анимация следуют той же логике для входящих элементов нового уровня многоуровневой навигаций

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

Если немного изменить, то должно получиться примерно следующее, что уже прописано в стилях:

Горизонтальное меню для сайта на HTML+CSS

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

После того, как мы применили CSS, у нас должно получиться что-то вроде этого:

Навигация для сайта

Чтобы добавить многоуровневые выпадающие списки, мы повторим тот же процесс. Мы выбираем пункт меню, в который хотим добавить новое раскрывающееся меню, и добавим новый ul между li этого пункта меню.

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

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

Мобильное меню с помощью CSS

Как ранее говорили в этом материале, здесь используем псевдоэлемент CSS3, где :only-child в нашем случае это проверяет, есть ли у родительского элемента какие-либо другие элементы внутри других тегов li, если нет, то он удаляет плюс +, который добавляется по умолчанию.

И вот как должен выглядеть конечный результат:

Подменю для навигаций сайта

Приступаем к установке:

HTML

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

Как вы можете видеть в приведенном коде, где был добавлен неупорядоченные списки с несколькими элементами списка во втором li, что в этом случае является элементом меню. Здесь обязательно нужно обратить внимание на добавление ul, что прописан после тега привязки.

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

Поэтому добавьте следующее после вышеуказанного CSS:

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

Многие используют jQuery для достижения этого эффекта раскрывающееся списка, где аналогично используются совершенно другие методы CSS стилей. Вы предпочитаете создавать свои выпадающие списки, что помощью CSS или jQuery.

Позвольте мне знать в комментариях ниже.

Демонстрация


zornet.ru

Концепция

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

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

 

Разметка

Большинство выпадающих меню основано на использовании громоздкой разметки и Javascript. Наш вариант будет использовать простую структуру HTML кода и 19 строк CSS, с небольшим вкраплением CSS3 для придания внешнего лоска.

Разметка достаточно проста и представляет собой серию вложенных списков <ul>. Нет никаких ID, классов и элементов. Простой ясный код.

Элемент #nav <ul> содержит серию элементов <li>. Все пункты, которые нуждаются в выпадающих подпунктах, содержат другой элемент <ul>. Обратите внимание, что элемент <ul> выпадающих подпунктов не имеет класса. Мы используем каскадные стили, сохраняя разметку как можно более чистой.

 

CSS

Здесь происходит магия  превращения — мы используем CSS для трансформирования серии вложенных списков <ul> в отличное, простое в использовании и самодостаточное выпадающее меню.

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

Следует отметить использование  position:relative; для элементов списка. Таким образом, мы сможем использовать  position:absolute; для вложенных элементов <ul>.

 

Вложенные списки

В данном коде устанавливаются стили для вложенных <ul> в пункт верхнего уровня. Очевидно, что нужно удалить метки пунктов списка с помощью  list-style:none;, и установить position:absolute; для позиционирования выпадающих подпунктов под пунктом списка, который их содержит.

Следующая строка гораздо более интересна. Обычно используется свойство display:none; для того, чтобы скрыть выпадающий пункт, когда он не используется.  Но так как большинство программ для чтения с экрана игнорируют все, что имеет свойство display:none;, то использование такого метода очень нежелательно. Вместо этого мы используем абсолютное позиционирование <ul> для помещения его в позицию -9999px за пределами экрана, когда он не используется.

Затем следует свойство opacity:0;, для скрытия <ul>, и декларация для браузеров Webkit, для плавного вывода элемента <ul> при наведении курсора мыши.

Здесь мы устанавливаем стили по умолчанию для пунктов списка и ссылок. Обратите внимание на свойство padding-top:1px; для элемента <li>. Так как все цвета устанавливаются для элементов <a>, то установка отступа в 1px для элемента <li> сдвигает элемент <a>, и, следовательно, цветную область от границы пункта списка. Таким образом, создается иллюзия, что пункты списка разделены. Интересно, что IE не распознает шаблон <li> при наведении курсора мыши и закрывает выпадающий список. Для решения этой небольшой проблемы добавляется прозрачное изображение gif 1 х 1 px. 

Для элемента #nav ul a мы устанавливаем свойство white-space:nowrap; для предотвращения переноса строк на другую строку.

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

#nav li:hover a определяет, что произойдет со ссылкой верхнего уровня, когда наследник будет иметь состояние hover:

  • Выпадающий список <ul> расположен внутри элемента <li>.
  • Если навести курсор мыши на ссылку (<a>) в выпадающем списке (<ul>), то одновременно пункт списка верхнего уровня (<li>) тоже будет иметь состояние hover, так как выделен контент внутри него.
  • Так как технически используется состояние hover для элемента списка верхнего уровня, то #nav li:hover a действует, задавая стиля для ссылки.

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

Также добавляется правило для браузеров Webkit  -webkit-transition:-webkit-transform 0.075s linear;, которое анимирует -webkit-transform с помощью затухания/появления в течение 0.075 секунды.

В последней части определяются стили для выделения определенного пункта в выпадающем списке при наведении курсора мыши.

Вначале мы определяем два свойства background:;. Определение background:rgba(51,51,51,0.75); устанавливает умеренно серый фон для пункта с прозрачностью  0.75. Те браузеры, которые не распознают такое определение цвета (например, IE) будут использовать определение цвета в старом стиле в предыдущей строке.

 

Готово!

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

ruseller.com

Горизонтальное меню с выпадающими подпунктами. Выпадающие элементы используют jQuery, все остальное оформлено на CSS. В демо включен практически макет сайта, осталось только заполнить центральную часть контентом и нарисовать красивую шапку. Но можно использовать и только саму идею меню.

HTML

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

<!-- Start Menu -->  <div id="menu">      <div class="active" id="nav">          <ul>              <li class="active">                  <span class="outer_active">                      <span>                          <a class="active" href="#">                              Главная                              <span class="bottom_text"></span>                          </a>                          <span class="outer"></span>                      </span>                  </span>              </li>              <li>                  <span class="outer_active">                      <span>                          <a class="active" href="#">                              Форум                              <span class="bottom_text"></span>                          </a>                          <span class="outer"></span>                      </span>                  </span>              </li>              <li>                  <span class="outer_active">                      <span>                          <a class="active" href="#">                              Новости                              <span class="bottom_text"></span>                          </a>                          <span class="outer"></span>                      </span>                  </span>                  <ul>                      <li class="toparrow"></li>                      <li class="noback">                          <span>                              <span class="span_nonactive">                                  <a class="sub" href="#">                                      Пункт 0                                  </a>                              </span>                          </span>                      </li>                      <li class="menubottom"></li>                  </ul>              </li>              <li>                  <span class="outer_active">                      <span>                          <a class="active" href="#">                              Видео                              <span class="bottom_text"></span>                          </a>                          <span class="outer"></span>                      </span>                  </span>                  <ul>                      <li class="toparrow"></li>                      <li class="noback">                          <span>                              <span class="span_nonactive">                                  <a class="sub" href="#">Пункт 1</a>                              </span>                          </span>                      </li>                      <li class="menubottom"></li>                  </ul>              </li>              <li>                  <span class="outer_active">                      <span>                          <a class="active" href="#">                              Музыка                              <span class="bottom_text"></span>                          </a>                          <span class="outer"></span>                      </span>                  </span>                  <ul>                      <li class="toparrow"></li>                      <li class="noback">                          <span>                              <span class="span_nonactive">                                  <a class="sub" href="#">                                      Пункт 2                                  </a>                              </span>                          </span>                      </li>                      <li class="menubottom"></li>                  </ul>              </li>              <li>                  <span class="outer_active">                      <span>                          <a class="active" href="#">                              Контакты                              <span class="bottom_text"></span>                          </a>                          <span class="outer"></span>                      </span>                  </span>              </li>              <li>                  <span class="outer_active">                      <span>                          <a class="active" href="#">                              Ссылки                              <span class="bottom_text"></span>                          </a>                          <span class="outer"></span>                      </span>                  </span>                  <ul>                      <li class="toparrow"></li>                          <li class="noback">                              <span>                                  <span class="span_nonactive">                                      <a class="sub" href="#">                                          Пункт 3                                      </a>                                  </span>                              </span>                          </li>                          <li class="noback">                              <span>                                  <span class="span_nonactive">                                      <a class="sub" href="#">                                          Пункт 4                                      </a>                                  </span>                              </span>                          </li>                          <li class="noback">                              <span>                                  <span class="span_nonactive">                                      <a class="sub" href="#">                                          Пункт 5                                      </a>                                  </span>                              </span>                          </li>                          <li class="noback">                              <span>                                  <span class="span_nonactive">                                      <a class="sub" href="#">                                          Пункт 6                                      </a>                                  </span>                              </span>                          </li>                          <li class="noback">                              <span>                                  <span class="span_nonactive">                                      <a class="sub" href="#">                                          Пункт 7                                      </a>                                  </span>                              </span>                          </li>                          <li class="noback">                              <span>                                  <span class="span_nonactive">                                      <a class="sub" href="#">                                          Пункт 8                                      </a>                                  </span>                              </span>                          </li>                          <li class="noback">                              <span>                                  <span class="span_nonactive">                                      <a class="sub" href="#">                                          Пункт 9                                      </a>                                  </span>                              </span>                          </li>                          <li class="noback">                              <span>                                  <span class="span_nonactive">                                      <a class="sub" href="#">                                          Пункт 10                                      </a>                                  </span>                              </span>                          </li>                          <li class="menubottom"></li>                  </ul>              </li>              <li>                  <span class="outer_active">                      <span>                          <a class="active" href="#">                              Отзывы                              <span class="bottom_text"></span>                          </a>                          <span class="outer"></span>                      </span>                  </span>              </li>          </ul>      </div>   </div>  <!-- End Menu -->

CSS

#nav ul li {      margin-left:0px;      position: relative;} #nav a {      color:#383838;      cursor:pointer;      display:block;      float:left;      font-size:16px;      font-weight:bold;      height:68px;      line-height:17px;      margin-left:25px;      margin-top:0;      overflow:hidden;      padding-left:3px;      padding-right:3px;      padding-top:25px;      text-decoration:none;      text-shadow:1px 1px #ffffff;} #nav a span {      display:block;      color:#383838;      font-weight:normal;      font-size:11px;} #nav li li a {      margin-left:0px;      line-height:35px;      margin-top:0px;      height: 30px;      background: none;      font-weight: normal;      padding: 0;      text-indent: 18px;} #nav li li {      text-align: left;      width: 233px;      float: left;      padding: 0;      background: none;      height:30px;      padding-top:0px;} #nav ul li ul li a {      font-size:12px;       line-height:28px;      font-weight: normal;       margin-left:-2px;      width:225px; } #nav ul li a {      background: none; }  #nav ul li ul li {      width:230px;      background:transparent url(../images/fusion_ddmenumidh.png) repeat-x scroll 0 -33px; }        #nav ul li ul li:hover {      background:transparent url(../images/fusion_ddmenumidh.png) repeat-y 0px 0px; }            #nav {      position:relative;      z-index:2;      height: 30px;}  #nav, #nav ul {      list-style: none;      padding:0px 0px 0;} #nav ul {      float:left;      padding: 0;      margin: 0;      margin:-3px 0 0;}        #nav ul ul a {      display: block;      text-decoration: none;      width: 233px;      text-transform: none;} #nav li {      float: left;      padding: 0;      margin-right:0px;      background: none;      height: 51px;} #nav li ul {      top: 59px;      position: absolute;      left: -999em;      height: auto;      width:  233px;      border-width: 0;      margin: 0;      padding: 0;      margin-left:16px;      z-index: 4;} #nav li ul a {      font-weight: bold;      color:#FFFFFF;}  #nav li ul ul {      width:230px;      margin: -70px 0 0 227px;} * html #nav li ul ul {      margin: -74px 0 0 227px;} #nav li:hover ul ul,   #nav li:hover ul ul ul,  #nav li:hover ul ul ul ul{      left: -999em;} #nav li:hover ul,   #nav li li:hover ul,   #nav li li li:hover ul,   #nav li li li li:hover ul{      left: 0;      position: absolute;}   #nav li:hover ul {      left: 0;      background-position: 0 0;}   #nav ul li:hover {      background:transparent;      color:#000000;} #nav li:hover span a{      color:#ffffff;}            #nav ul li:hover ul li span span a{      color:#ffffff;}                #nav ul li ul li:hover ul li span span a{              color:#ffffff;}                                    #nav ul li ul li ul li:hover ul li span span a{                      color:#ffffff;}                #nav ul li ul li:hover span span a{              color:#ffffff;}                    #nav ul li ul li ul li:hover span span a{                  color:#ffffff;}                                    #nav ul li ul li ul li ul li:hover span span a{                      color:#ffffff;} #nav ul li.active a {      background:transparent url(../images/fusion_mmiddle.png) repeat-x scroll left 1pt;      color:#ffffff;      text-shadow:1px 1px #000000;}     #nav ul li:hover a{      background:transparent url(../images/fusion_mmiddle.png) repeat-x scroll left 1pt;      color:#ffffff;      text-shadow:1px 1px 1px #000000;}            #nav ul li:hover ul li a{          background:transparent;           color:#ffffff;}                #nav ul li ul li:hover a{          color:#ffffff;          width:230px;}                #nav li.active span.outer_active, #nav span.outer_active:hover, #nav ul li:hover span.outer_active {      background:transparent url(../images/fusion_mleft.png) no-repeat scroll 0 1pt;      height:68px;} #nav ul li span.outer {      height:68px;      width:12px;      float:left;}                        #nav ul li:hover span.outer, #nav ul li a.active:hover span.span_active, #nav ul li.active span.outer  {          height:68px;          width:23px;          float:left;          background:transparent url(../images/fusion_mright.png) no-repeat scroll 0 1pt;}     #nav ul li span.outer, #nav ul li a.active span.span_active, #nav ul li.active span.outer  {          height:68px;          width:23px;}                    #nav ul li ul li:hover span.span_active {              background:none;} #nav span.span_active, #nav span.span_active:hover {      height:53px;      width:6px;      float:left;      background:transparent url(../images/fusion_mright.png) no-repeat scroll 0 1pt;  } #nav ul li ul li span.span_active, #nav ul li ul li span.span_active:hover {      height:29px;} .outer_active {      display:block;      height:32px;      float:left;}         #nav a span:hover, #nav li:hover a span, #nav li.active span, #nav li.over a span{      color:#cccccc;  }         #nav ul li li:hover span{      background:none;      color:#FFFFFF;} #nav ul li li span.span_active {      background:none;}      /* Rounded menu top/bottoms */  #nav ul li.toparrow, #nav ul li.toparrow:hover {      height:16px;      line-height:25px;      width:230px;      background:transparent url(../images/fusion_ddmenutop.png) no-repeat scroll 0 0;}            #nav ul li.menubottom, #nav ul li.menubottom:hover {      background:transparent url(../images/fusion_ddmenubot.png) no-repeat scroll 0 0;      height:17px;      line-height:25px;      width:230px;}

JS

И простейший скрипт, в отличие от навороченного css.

        <script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>          <script type="text/jаvascript">              jQuery(document).ready(function(){                  jQuery("#nav li").hover(function(){                      jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);                  },function(){                      jQuery(this).find('ul:first').css({visibility: "hidden"});                  });              });          </script>

pcvector.net

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

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

Источник | Пример

Первый туториал CSS3 Dropdown Menu — самый новый в подборке (за апрель 2016). Плюсы решения: в данном горизонтальном выпадающем меню для сайта в подпунктах есть иконки, реализация и сам CSS код достаточно простые для понимания и внедрения.

Шаг1 — HTML разметка

Первым делом создаем неупорядоченный список в HTML с якорными ссылками (#) для его элементов. Туда же в один из пунктов добавляем еще один вложенный список, который будет отвечать за подменю.

Шаг2 — отображение меню

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

Шаг3 — оформление ссылок

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

Шаг4 — подменю

Поскольку у нас меню сайта на CSS выпадающее, то следует задать также оформление вложенному списку. Вначале ставим отступ 40px сверху и 0px слева + добавлем округленные углы. Для показа/скрытия подменю изначально устанавливаем свойство прозрачности (opacity) равное нулю, а при наведении — единице. Для создания эффекта появления подменю указываем значение высоты списка в ноль, а при hover = 36px.

Ширину ссылок ставим = 100px, внизу всех элементов кроме последнего добавляется граница border-bottom. Также, по желанию, вы можете разместить картинки для пунктов подменю (внимание! не забудьте изменить пути к изображениям в коде на используемые вами).

Мне лично нравится простота реализации и использование иконок. Вот итоговый код с codepen:

2. Простое выпадающее CSS3 меню

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

Источник

Вариант от Josh Riser визуально похож на предыдущее выпадающее меню на HTML и CSS. В коде нет дочернего селектора " > " (полезен в многоуровневых конструкциях), но автор удачно использует эффекты CSS3 (transition, box-shadow и text-shadow) для более красивого результата. По ссылке в источнике отсутствует описание процесса создания горизонтального выпадающего меню, поэтому я сразу приведу итоговый код:

3. Выпадающее меню с блоком поиска

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

Источник | Пример

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

HTML код

Для навигации, как всегда, используется неупорядоченный список (с классом nav). Обычные пункты меню являются элементами списка (li) и содержат ссылки (a href) без каких-либо классов и ID. Исключением являются 3 специализированных элемента данного горизонтального выпадающего меню с такими ID:

  • settings — ссылка картинка;
  • search — блок с поиском и соответствующей кнопкой;
  • options — содержит подменю (реализовано через список с классом subnav).

Также в коде увидите скрипт prefixfree для использования свойств CSS без префиксов. Итоговый вариант HTML для выпадающего меню имеет вид:

CSS для меню

1. Базовые стили и элементы меню

Во-первых, указываем шрифт Montserrat, темный серый фон и фиксированную высоту для пунктов меню. Все элементы имеют выравнивание float: left и позиционирование relative дабы потом можно было добавить подменю с position: absolute;

2. Оформление ссылок

Для пунктов меню применяется базовое оформление + css hover эффект при наведении. Высота такая же как и в классе nav. Для #settings ссылки-картинки в начале меню задается выравнивание.

3. Блок поиска

Данный элемент имеет фиксированную ширину и состоит из нескольких частей — поля ввода (#search_text) с зеленым фоном и кнопки поиска (#search_button). В некоторых браузерах цвет фона может быть серым.

4. Выпадающее подменю

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

В стилях найдете вставку фонового изображения треугольника (triangle.png) для обозначения подменю — не забудьте указать правильный путь для этой и других картинок в примере. Появлением подменю реализуется с помощью свойства opacity. Итоговое решение на codepen:

4. Многоуровневое выпадающее CSS меню

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

Источник

В данном варианте в основном используются приемы CSS2.1, решение плюс-минус новое — за март 2015. Если вам не хватает одного подуровня в горизонтальном выпадающем меню для сайта, то этот пример содержит сразу три. С помощью псевдокласса :only-child для пунктов добавляется символ «+» обозначающих наличие подменю.

В целом, неплохой и несложный пример. Не будем детально описывать процесс реализации, т.к. он похож на предыдущие — сначала создаете HTML каркас, а потом постепенно добавляете для него стили. Итоговый код скачивайте по ссылке на источник, частично его можно глянуть в Codepen:

Итого

Выше мы рассмотрели 4 варианта как сделать выпадающее меню на CSS + HTML для шапки сайта (header), хотя подобных примеров в сети гораздо больше. Есть решения с jQuery, но это, скорее всего, пригодится только для реализации каких-то специальных эффектов и нестандартных задач. В большинстве случаев хватит связки CSS + HTML, тем более, что сейчас главные требования к меню — это удобство и быстрая скорость загрузки.

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

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

design-mania.ru


You May Also Like

About the Author: admind

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

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

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