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

Cоздание выпадающего меню на HTML и CSS просто

Автор статьи: admin

В этой статье мы разберём, как происходит создание выпадающего меню на HTML, CSS и JavaScript.

Также, если вы вообще не знаете как делать меню, то посмотрите статью: Меню навигации на HTML и CSS, там вы научитесь создавать простое меню навигации.

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

Сперва на HTML и CSS сделаем выпадающее меню которое будет проявляться при наведении мышки, вот его HTML.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<header>     <nav>         <ul>             <li><a href=»#»>Главная</a></li>             <li>Галерея                 <ul>                     <li><a href=»#»>Машины</a></li>                     <li><a href=»#»>Горы</a></li>                     <li><a href=»#»>Компьютеры</a></li>                 </ul>             </li>             <li>О себе                 <ul>                     <li><a href=»#»>Имя</a></li>                     <li><a href=»#»>Аватарка</a></li>                 </ul>             </li>         </ul>     </nav> </header>

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

Теперь перейдём к CSS, но сначала мы не будем делать прям выпадающие меню, оно просто при наведении мыши, будет просто появляться, вот и всё.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

html, body { margin: 0; padding: 0; }   nav > ul { display: flex; margin: 0; width: 100%; background-color: green; }   nav > ul > li { margin-right: 20px; }   li { color: white; list-style: none; font-size: 20px; }   li a { color: white; text-decoration: none; }   li > ul{ display: none; position: absolute; background-color: tomato; padding: 0; }   li:hover > ul{ display: block; }

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

Дальше настраиваем внешний вид, делаем FlexBox и задаём отступы, самое главное, что нужно сделать, это тегам <ul>, которые находятся внутри тега <li>, сделать позиционирование absolute и добавить ему свойство display: none, что бы блок не показывался на экране.

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

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

Примечание:

Тут покажу только те селекторы, которые изменим, а не весь CSS, так как, там добавилось не много.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

nav > ul { display: flex; margin: 0; width: 100%; height: 25px; background-color: green; }   li > ul{ position: absolute; top: 40px; visibility: hidden; opacity: 0; background-color: tomato; padding: 0; transition: 400ms; }   li:hover > ul{ visibility: visible; top: 25px; opacity: 1; }

В первом селекторе мы добавляем высоту, чтобы было проще менять позицию, во втором, добавляем позицию top равного 45 пикселем, также устанавливаем свойство visibility: hidden, которое отвечает за скрытие элемента, и opacity: 0, для прозрачности, значение ноль, означает что элемент полностью прозрачен.

В последнем селекторе который мы изменяем, который ещё отвечает за наведение мышки, убираем display и добавляем visibility: visible, для показа элемента, top равный 25 пикселям и opacity: 1, для полной не прозрачности.

Также появилось свойство transition, для плавных переходов, мы задаём ему время перехода 400 миллисекунды.

Вывод:

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

Подписываетесь на соц-сети:

Оценка:

Количество оценивших: 1
Средняя оценка: 5,00

Загрузка…

Поделится:

Пока кнопок поделиться нет

Также рекомендую:

Как сделать плавное выпадающее меню на CSS • ЭРА ТЕХНОЛОГИЙ

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

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

Верстаем меню HTML + CSS

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

Что мы имеем? Самый обыкновенные ненумерованный список с идентификатором «top_menu» и со ссылками, обернутыми в элементы этого самого списка. Все банально и просто. При наведении пункты меню меняют цвет… это все вы уже знаете и понимаете, как это сделать (я надеюсь).

Добавляем меню второго уровня

Чтобы сделать многоуровневое меню, нам нужно добавить второй ненумерованный список внутрь первого. Думаю, это вы проходили где-то на начальных уроках. А также то, что его вставить нужно не просто внутри нашего списка, а именно внутри элемента списка, то есть тега «li», сразу после закрывающего тега «a».

Позиционируем вложенные списки абсолютно по отношению к «li», в которые они вложены. А все «li» верхнего уровня позиционируем относительно (relative). Чтобы выпадающее меню находилось СРАЗУ же после нашего меню верхнего уровня, ему (выпадающему – “inner_menu”) нужно задать

position: absolute;
top: 100%;

То есть отступ от верхней границы родителя будет равен высоте родителя. Очень логично, по-моему.

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

Как видите, наше выпадающее меню пока выглядит не выпадающим, а выпавшим и висящим. Но ничего, это мы скоро исправим.

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

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

Выпадающему меню добавляем:

display: none;

А чтобы его отобразить, нужно прописать:

#top_menu > li:hover > ul {
   display: block;
}

Что нам говорит это целое скопище селекторов? Читаем с конца. Мы задаем стили (видмости) для списка второго уровня, который лежит внутри элемента списка первого уровня, но стили эти сработают только в том случае, если мы наведем мышкой (ховер) на элемент «li» в который вложен наш список второго уровня.

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

Да, мы вроде бы добились того, чего хотели – мы сделали выпадающее меню, самое настоящее выпадающее меню, мать его! Но ему чего-то не хватает. А знаете чего? Плавности! Ведь все выглядит так, как будто меню не выпадает, а просто появляется. Причем очень резко, моментально даже, я бы сказал.

Ну что же, давайте еще немного поколдуем над ним.

Плавное выпадающее меню – это просто

Итак, давайте сделаем плавное выпадающее меню на чистом CSS. Зачем это делать? Потому что люди любят, когда все плавненько и мягонько… и это выглядит красиво. Будет плюс к юзабилити вашего сайта. Погнали!

Запомните, вы можете анимировать только точные математические величины, например 50px и 300px, 0 и 100%, 0,5 и 1,0 и так далее. В нашем случае мы не сможем анимировать два состояния нашего выпадающего меню (display:none; и display:block;

).

Но мы можем заменить их на прозрачность – opacity:0 и opacity:1. И задать время в течение которого наше меню будет проявляться из прозрачного состояния. Да, это действительно сработает, однако это не совсем тот эффект, который вы возможно ожидали. Поэтому давайте сделаем немного сложнее. Но это того стоит, поверьте.

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

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

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

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

Вывод:

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

Кстати это был мой первый урок по CSS. Опишите, как вам? Понятно все объяснил или нужно еще подробнее разжевывать? И стоит ли вообще продолжать писать статьи на тему лайфхаков в CSS?

Спасибо за внимание и до скорых встреч!

Простое и красивое горизонтальное выпадающее меню на CSS и HTML — Блокнот IT инженера

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

У меня на сайте оно выглядит так, при наведении мыши на пункт меню «О блоге» выпадает вертикальное подменю:

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

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

Создаем анимированное выпадающее меню при помощи CSS3

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

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

Онлайн-демо

HTML

Структура меню очень простая — это неупорядоченный список с ссылками. Вот фрагмент его кода:

<ul>
 <li><a href=»#»>Home</a></li>
 <li>
 <a href=»#»>Categories</a>
 <ul>
 <li><a href=»#»>CSS</a></li>
 <li><a href=»#»>Graphic design</a></li>
 <li><a href=»#»>Development tools</a></li>
 <li><a href=»#»>Web design</a></li>
 </ul>
 </li>
 <li><a href=»#»>Work</a></li>
 <li><a href=»#»>About</a></li>

 <li><a href=»#»>Contact</a></li>
</ul>

CSS

Сначала сбрасываем стили по-умолчанию:

#menu, #menu ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

Первый уровень меню.

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

#menu {
 width: 960px;
 margin: 60px auto;
 border: 1px solid #222;
 background-color: #111;
 background-image: -moz-linear-gradient(#444, #111);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
 background-image: -webkit-linear-gradient(#444, #111);
 background-image: -o-linear-gradient(#444, #111);
 background-image: -ms-linear-gradient(#444, #111);
 background-image: linear-gradient(#444, #111);
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;

 -moz-box-shadow: 0 1px 1px #777;
 -webkit-box-shadow: 0 1px 1px #777;
 box-shadow: 0 1px 1px #777;
}

Clear floats.

Это метод Nicolas Gallagher, который я обычно использую:

#menu:before,
#menu:after {
 content: «»;
 display: table;
}
#menu:after {
 clear: both;
}
#menu {
 zoom:1;
}

Список элементов.

Обратите внимание на селектор #menu li:hover>a. Это, пожалуй, наиболее важный CSS трюк для этого выпадающего меню.

Итак, вот как это работает: выбираем элемент «а», который является дочерним для «li», а элемент «li» должен быть в свою очередь потомком «#menu». Подробнее о селекторах читайте здесь.

#menu li {
 float: left;
 border-right: 1px solid #222;
 -moz-box-shadow: 1px 0 0 #444;
 -webkit-box-shadow: 1px 0 0 #444;
 box-shadow: 1px 0 0 #444;
 position: relative;
}
#menu a {
 float: left;
 padding: 12px 30px;
 color: #999;
 text-transform: uppercase;
 font: bold 12px Arial, Helvetica;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
 color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
 color: #fafafa;
}

Подпункты меню.

С помощью свойства CSS3 transitions мы можем создать анимацию изменяя такие CSS-свойства, как margin или opacity. И я использовал это для анимации подменю. Вот что в результате получилось:

#menu ul {
 margin: 20px 0 0 0;
 _margin: 0; /*IE6 only*/
 opacity: 0;
 visibility: hidden;
 position: absolute;
 top: 38px;
 left: 0;
 z-index: 9999;
 background: #444;
 background: -moz-linear-gradient(#444, #111);
 background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
 background: -webkit-linear-gradient(#444, #111);
 background: -o-linear-gradient(#444, #111);
 background: -ms-linear-gradient(#444, #111);
 background: linear-gradient(#444, #111);
 -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
 -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
 box-shadow: 0 -1px 0 rgba(255,255,255,.3);
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
#menu li:hover > ul {
 opacity: 1;
 visibility: visible;
 margin: 0;
}
#menu ul ul {
 top: 0;
 left: 150px;
 margin: 0 0 0 20px;
 _margin: 0; /*IE6 only*/
 -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
 -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
 box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
 float: none;
 display: block;
 border: 0;
 _line-height: 0; /*IE6 only*/
 -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 box-shadow: none;
}
#menu ul a {
 padding: 10px;
 width: 130px;
 _height: 10px; /*IE6 only*/
 display: block;
 white-space: nowrap;
 float: none;
 text-transform: none;
}
#menu ul a:hover {
 background-color: #0186ba;
 background-image: -moz-linear-gradient(#04acec,  #0186ba);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
 background-image: -webkit-linear-gradient(#04acec, #0186ba);
 background-image: -o-linear-gradient(#04acec, #0186ba);
 background-image: -ms-linear-gradient(#04acec, #0186ba);
 background-image: linear-gradient(#04acec, #0186ba);
}

Стили для первого и последнего элемента меню.

#menu ul li:first-child > a {
 -moz-border-radius: 3px 3px 0 0;
 -webkit-border-radius: 3px 3px 0 0;
 border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
 content: »;
 position: absolute;
 left: 40px;
 top: -6px;
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
 left: -6px;
 top: 50%;
 margin-top: -6px;
 border-left: 0;
 border-bottom: 6px solid transparent;
 border-top: 6px solid transparent;
 border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
 border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after {
 border-right-color: #0299d3;
 border-bottom-color: transparent;
}
#menu ul li:last-child > a {
 -moz-border-radius: 0 0 3px 3px;
 -webkit-border-radius: 0 0 3px 3px;
 border-radius: 0 0 3px 3px;
}

jQuery

Данное меню работает во всех популярных современных браузерах, но если вам нужно добавить поддержку также IE6, то без использования JavaScript не обойтись.

$(function() {
 if ($.browser.msie &amp;&amp; $.browser.version.substr(0,1)<7)
 {
 $(‘li’).has(‘ul’).mouseover(function(){
 $(this).children(‘ul’).css(‘visibility’,’visible’);
 }).mouseout(function(){
 $(this).children(‘ul’).css(‘visibility’,’hidden’);
 })
 }
});

Онлайн-демо

Данное меню протестировано в Firefox 8, Chrome 15, Opera 11.52, Safari и IE7.

Скачать исходники.

Перевод

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Плавно открывающееся меню с помощью CSS

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

Первым делом, давайте напишем HTML код нашего меню. Меню будет простейшим. Для примера у него будет 2 пункта у каждого из которых будет выпадающий список с подпунктами.

<nav>
	<ul>
		<li>
		<a href="#">пункт 1</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="#">пункт 2</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>

	</ul>
</nav>

Думаю тут все понятно, самое простое 2-х уровневое меню. Как и говорил, меню имеет два главных пункта, можете добавить сколько угодно, если нужно. Дальше нужно просто добавить стили, которые и сделают всю магию 🙂

#slow_nav > ul{
	width: 500px;
	margin:25px auto 0;
}

#slow_nav > ul > li{
	list-style: none;
	display: inline-block;
	position:relative;
	padding:0;
}

#slow_nav a{text-decoration:none;}

#slow_nav > ul > li > a{
	font-size:18px;
	padding:5px;
	background-color:#333;
	color:#fff;
}

#slow_nav li ul{
	position:absolute;
	list-style:none;
	text-align:center;
	top:15px;
	font-size:15px;
	left:0;
	margin:0;
	padding:0;

/* Данные строки нужны для правильной работы анимации */
	max-height:0px;
	overflow:hidden;
	-webkit-transition:max-height 0.4s linear;
	-moz-transition:max-height 0.4s linear;
	transition:max-height 0.4s linear;
/* конец */
}

#slow_nav li:hover ul{
	max-height:300px;
}

#slow_nav li ul li{
	background-color:#333;
	border-bottom:1px solid #888;
}

#slow_nav li ul li:last-child{
	border-bottom:none;
}

#slow_nav li ul li a{
	padding:5px 12px;
	color:#fff;
	display:block;
}

#slow_nav li ul li:hover{
	background-color:#444;
}

#slow_nav li ul li:first-child{
	margin-top:25px;
	position:relative;
}

#slow_nav li ul li:first-child:before{
	content:'';
	position:absolute;
	width:1px;
	height:1px;
	border:5px solid transparent;
	border-bottom-color:#333;
	left:10px;
	top:-10px;
}

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

Первым делом это сама анимация. Нужный код выделен комментариев в коде — /* Данные строки нужны для правильной работы анимации */. Удалять из нельзя, в противном случаи анимация перестанет работать. В данном отрезке кода, изначально мы задаем высоту в ноль пикселей —

max-height:0px; и прописываем свойство overflow:hidden;, чтобы скрыть наше дочернее меню, то есть выпадающее. Дальше уже прописываем кроссбраузерное свойство transition, которое совершит анимацию.

-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;

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

#slow_nav li:hover ul{
	max-height:300px;
}

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

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

Данный способ можно применять не только к самописным меню но и к тем же динамическим меню, которые создаются системами управления сайтом, например WordPress. Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂 Я дал идею и способ, а Вам решать, применять его или нет.

На этом все, спасибо за внимание. 🙂

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

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

Смотрите также по теме:
Выпадающее меню для blogspot
Горизонтальное меню в blogger
Программа CSS Menu Generator и сервис CSS Menu Generator

Вначале определимся с кодом HTML выпадающего меню. Его создать достаточно просто:
Создайте простой список HTML с атрибутом id:
В качестве id вы можете взять любой набор символов, для того, чтобы задать стили именно для этого списка, создав из него красивое css меню.

<div>
      <ul>
        <li>
          <a href=’https://mycrib.ru/’>Главная</a>
        </li>
        <li>
          <a href=’https://mycrib.ru/’>Обратная связь</a>
       </li> 
        <li>
           <a href=»https://mycrib.ru/»>Карта блога</a>
            <ul>
                <li><a href=’https://mycrib.ru/’>Раздел карты сайта 1</a></li>
                <li><a href=’https://mycrib.ru/’>Раздел карты сайта 2</a></li>
                <li><a href=’https://mycrib.ru/’>Раздел карты сайта 3</a></li>
              </ul>         </li>
      </ul>
    </div>

Примечание. При вставки HTML-кода меню четко следите за кавычками – ни в коем случае нельзя потерять или поставить лишнюю и сразу вставляйте код в готовом виде – со ссылками и правильно прописанными названиями пунктов меню. Для этого снечала отредактируйте код в блокноте или Notepad ++.
В примере, как вы видите показано создание списка с подкатегориями. Пример отображения такок списка-меню без подключения стилей:

Главная

Обратная связь

Карта блога

Код HTML меню вставьте в гаджет HTML / Javascript элемента страницы во вкладке Дизайн. Выберите расположение. Сохраните изменения.
Теперь наша задача при помощи стилей создать горизонтальное выпадающее меню css. Полученный код вы вставите перед кодом ]]></b:skin> в редакторе html вашего блога.
Пример CSS для выпадающего меню:
В код css я вставила комментарии, для того, чтобы вы смогли настроить горизонтальное выпадающее меню так, как вам нужно (изменили цвет меню, размеры и пр.)

/*—— CSS код выпадающего меню —-*/
#osn {
    background: #14256C; /*—— Цвет фона основного меню—-*/
    width: 290px; /*—— Ширина основного меню—-*/     color: #FFF;  
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100; /*—— Верхняя граница меню: ширина стиль цвет—-*/
        height:35px; /*—— Высота меню—-*/
}
#menu {
    margin: 0;
    padding: 0;
}
#menu ul {
    float: left; /*—— Выравнивание меню—-*/
    list-style: none; /*—— Отсутствие маркеров списка основного меню—-*/
    margin: 0;
    padding: 0;
}
#menu li {
    list-style: none; /*—— Отсутствие маркеров списка подменю—-*/
    margin: 0;
    padding: 0;
        border-left:1px solid #333; /*—— Граница левая элемента главного меню стиль и цвет—-*/
        border-right:1px solid #333; /*—— Граница правая элемента меню—-*/
        height:35px; /*—— Высота меню отдельного элемента—-*/
}
#menu li a, #menu li a:link, #menu li a:visited {
    color: #FFF;  /*—— Цвет ссылки элемента основного меню —-*/
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0; /*—— Шрифт ссылок основного меню—-*/
   padding: 9px 12px 10px 12px; /*—— Отступы ссылки от границ блока, если вы меняете отступы, то нужно изменить ширину меню и высоту основоного меню и отдельного элемента—-*/
        text-decoration: none; /*—— Отсутствие подчеркивания ссылки—-*/
       
}
#menu li a:hover, #menu li a:active {
    background: #97ABE3; /*—— Цвет элемента основного меню при наведении—-*/
    color: #FFF; /*—— Цвет ссылки элемента основного меню при наведении курсора—-*/
    display: block;
    text-decoration: none; /*—— Отсутствие подчеркивания ссылки—-*/
        margin: 0;
    padding: 9px 12px 10px 12px; /*—— Отступы ссылок при наведении и активных, должны быть равны отступам неактивных ссылок, если не задумано смещение при наведении—-*/ 
}
#menu li {
    float: left;
    padding: 0;
}
#menu li ul { 
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#menu li ul a {
    width: 140px;
}
#menu li ul ul {
    margin: -25px 0 0 161px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
    left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
    left: auto;
}
#menu li:hover, #menu li.sfhover {
    position: static;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
    background: #97ABE3; /*—— Цвет фона выпадающего меню—-*/
    width: 120px;
    color: #000; /*—— Цвет неактивных ссылок выпадающего меню—-*/
   display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px; /*—— Отступы ссылок выпадающего меню—-*/
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
    
}
#menu li li a:hover, #menu li li a:active {
    background: #fff; /*—— Цвет фона выпадающего меню при наведении на пункт—-*/
    color: #000; /*—— Цвет наведенной и активной ссылки пункта выпадающего меню—-*/
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px; /*—— Отступы наведенных и активных ссылоквыпадающего меню —-*/
        text-decoration: none;
}

Примечание. Если вы добавляете пункты к основному меню, то вы должны обязательно сделать изменения в ширине основного меню – измените значение width: 290px. Вам также придется изменить ширину даже в том случае, если вы просто иначе назовете пункты меню. В противном случае выпадающее меню css будет отображаться некорректно. Изменяют ширину меню путем подбора:

• если у вас получилось меню в 2 ряда, то увеличьте ширину в редакторе html – и просмотрите изменения без сохранения шаблона,
• если в меню образовался “пустой хвост” – часть неполной ячейки, то уменьшите ширину меню.

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

Опубликовано Иванова Наталья

Смотреть все записи от Иванова Наталья

Навигация по записям

Как сделать выпадающий список в HTML (ТОП 16)

За последние два года, разработка веб-приложений (сайтов) продвинулась далеко вперед и то, что мы использовали для создания сайта ранее — уже устарело или появились более свежие методы.

Ранее, чтобы создать выпадающий список в html (на англ. — dropdown), мы просто использовали <select> и <option>. Факт в том, что мы и сейчас может его использовать, но зачастую нам нужно менять стили и адаптировать цветовую гамму выпадающего списка под стиль дизайна. К сожалению, не всегда получается стилизовать так как хочется, потому что select и option имеют свои ограничения и плохую поддержку кроссбраузерности.

Специально для этой статьи, я нашел 16 разных примеров, которые могут пригодиться во время разработки сайта. И так приступим.

Html шаблон, который позволяет настроить собственные цвета на выпадающего списка.

 

Посмотреть в песочнице — http://codepen.io/silverdrop/pen/msrcE

Написан на CSS3 и JavaScript. Обычный выпадающий список.

Посмотреть в песочнице — http://codepen.io/pedronauck/pen/fcaDw

Прозрачный выпадающий список со стилистикой станций метро.

Посмотреть в песочнице — http://codepen.io/carlcalderon/pen/KhwDH

Посмотреть в песочнице — http://codepen.io/Tombek/pen/JAvHC

Отличное решение для длинных выпадающих меню.

Посмотреть в песочнице — http://codepen.io/larrygeams/pen/feoDc

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

Посмотреть в песочнице — http://codepen.io/Thibaut/pen/Jasci

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

Посмотреть в песочнице — http://cssdeck.com/labs/navigation-dropdown-with-flip-effect

 

Посмотреть в песочнице — http://codepen.io/jakestuts/pen/nEFyw

Посмотреть в песочнице — http://codepen.io/daniesy/pen/pfxFi

Сделано в стиле UI, подойдет под UI стилистику сайта.

Посмотреть в песочнице — http://codepen.io/Jeplaa/pen/IzAvx

 

Посмотреть в песочнице — http://codepen.io/Dianatomic/pen/HqICG

Dropdown в стиле выбора страны. 

Посмотреть в песочнице — http://codepen.io/abhishek/pen/bkfLi

Посмотреть в песочнице — http://codepen.io/Metty/pen/dglwH

 

Посмотреть в песочнице — http://codepen.io/DKunin/pen/EIobp

Посмотреть в песочнице — http://codepen.io/MrBambule/pen/jIseg

Довольно интересный и простой дизайн.

Посмотреть в песочнице — http://codepen.io/mingger/pen/hdtiD

 

Надеюсь вам понравилось моя подборка. Оставляйте комментарии, делитесь мнением и присылайте собственные работы!

Как сделать выпадающий список в html (подборка ТОП 16) от bologer

HTML и CSS примеры раскрывающихся меню, которые вы можете использовать

Выпадающее меню CSS — эффективное решение для улучшения пользовательского интерфейса и пользовательского интерфейса приложения или веб-сайта. Раскрывающееся меню — это подменю главного меню веб-сайта или приложения. Он используется для демонстрации кнопок содержимого (ссылок) для каждого родительского пункта меню.

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

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

Автор: Зеландия

Сделано с помощью: CSS, HTML

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

Рекурсивная навигация при наведении курсора (только CSS)

Автор: sean_codes

Сделано с помощью: CSS, HTML

Это раскрывающееся меню отображается при наведении курсора на главное меню.

Автор: Кевин

Сделано с помощью: CSS, HTML

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

Простое раскрывающееся меню CSS с наведением и: фокус внутри и состояниями фокусировки и ARIA

Автор: Уна Кравец

Сделано с помощью: CSS, HTML

Это простое раскрывающееся меню с минималистичным дизайном.

Автор: Rlski

Сделано с помощью: CSS, HTML

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

Создавайте визуально привлекательные и высокопроизводительные веб-сайты без написания кода

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

Примеры раскрывающегося меню для веб-сайтов и приложений

Автор: Кристина Сильва

Сделано с помощью: CSS, HTML

Это раскрывающееся меню не включает JavaScript.Из четырех пунктов меню присутствует только одна раскрывающаяся кнопка класса div. Этот класс кнопок создает подменю, которое содержит три поля содержимого.

Автор: Максим Агинский

Сделано с помощью: CSS, HTML

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

Автор: Amr SubZero

Сделано с помощью: CSS, HTML

Вот выпадающее меню CSS с освежающим цветом фона.Каждое подменю отображает раскрывающееся содержимое своего пункта главного меню.

Автор: Гол Хамер

Сделано с помощью: CSS, HTML

С помощью этого простого параметра легко создать раскрывающееся меню.

Автор: Джейми Колтер

Сделано с помощью: CSS, HTML

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

Автор: Джон Белла

Сделано с помощью: CSS, HTML

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

Автор: Роберт Боргези

Сделано с помощью: CSS, HTML

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

Автор: Коннор Брассингтон

Сделано с помощью: CSS, HTML

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

Автор: Керем Беязит

Сделано с помощью: CSS, HTML

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

Автор: Kitty giraudel

Сделано с помощью: CSS, HTML

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

Автор: Гарет МакКинли

Сделано с помощью: CSS, HTML

В этом варианте раскрывающийся код класса div может потребовать корректировки перед использованием.

Автор: Разван Тудоса

Сделано с помощью: CSS, HTML

Это раскрывающееся меню CSS, созданное с эффектом анимации складывания бумаги.

Автор: Хью Бальбоа

Сделано с помощью: HTML, CSS

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

Раскрывающийся список на чистом CSS [работа для сенсорного экрана мобильного устройства]

Автор: Джонат Ли

Сделано с помощью: HTML, CSS

Это раскрывающееся меню CSS хорошо подходит для устройств с сенсорным экраном. Было протестировано на :

1. Chrome Canary
2. Chrome PC
3. IE10 PC
4. Эмулятор Android
5. Firefox PC
6. И смартфон Android 5

Автор: Алексей Попков

Сделано с помощью: CSS, HTML

Раскрывающееся меню во всю ширину.Подменю остаются под своими родительскими элементами.

Автор: Каролина Ханссон

Сделано с помощью: HTML, CSS

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

MainMenu #CodePenChallenge

Автор: Мохамед Айман

Сделано с помощью: HTML, CSS

Это красивое и красочное горизонтальное выпадающее меню.

Автор: Дэн Матисен

Сделано с помощью: HTML, CSS

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

Автор: Jenning

Сделано с помощью: HTML, CSS

Этот простой дизайн имеет мягкий цвет фона.

Автор: Халида Астатин

Сделано с помощью: HTML, CSS

Адаптивное раскрывающееся меню с красивыми цветами.

Автор: Николас Галлер

Сделано с помощью: HTML, CSS

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

Автор: Dr.Web

Сделано с помощью: HTML, CSS

Этот пример идеально подходит для разработки веб-сайта.

Автор: Марио Лонкарек

Сделано с помощью: HTML, CSS

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

Автор: Андор Надь

Сделано с помощью: HTML, CSS

Это простой пример раскрывающегося меню.

Автор: Ахмад Наср

Сделано с помощью: HTML, CSS

Горизонтальное выпадающее меню CSS с красивым цветом фона и красивым анимационным эффектом.

Автор: Марко Бесаньи

Сделано с помощью: HTML, CSS

Этот стиль дизайна прост и имеет идеальный размер шрифта для каждого пункта меню.

Автор: Майк Рохас

Сделано с помощью: HTML, CSS

Это раскрывающееся меню имеет привлекательный зеленый цвет фона с белым текстом.

Автор: Руслан Пивоваров

Сделано с помощью: HTML, CSS

Этот вариант идеально подходит для веб-сайтов с классным CSS-дизайном.

Автор: Каталин Рошу

Сделано с помощью: HTML, CSS

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

Автор: Джон Урбанк

Сделано с помощью: HTML, CSS

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

Простой раскрывающийся список CSS

Автор: Доан Хопкинс

Сделано с помощью: HTML, CSS

Вот простое многоуровневое раскрывающееся меню CSS.

Автор: Сатиш Кумар

Сделано с помощью: HTML, CSS

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

Автор: Адам Кун

Сделано с помощью: HTML, CSS

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

Автор: Guil H

Сделано с помощью: HTML, CSS

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

Автор: Эрик Мюссер

Сделано с помощью: HTML, CSS

Яркие цвета этого варианта оживят сайт вашего клиента.

Автор: Винсент Дюран

Сделано с помощью: HTML, CSS

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

Автор: Анастасия П

Сделано с помощью: HTML, CSS

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

Завершение мыслей об этих раскрывающихся меню HTML и CSS

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

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

Если вам понравилось читать эту статью о раскрывающихся меню CSS, вам следует ознакомиться с этой статьей о формах HTML и CSS.

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

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

Коллекция специально подобранных бесплатных выпадающих меню HTML и CSS примеров кода.Обновление коллекции за октябрь 2018 г. 3 новинки.

1. Меню CSS
2. Выпадающие списки начальной загрузки

Автор

• Зеландия
• 11 декабря 2018

О коде

Расплавленное меню

Он сочетает в себе раскрывающееся меню CSS и просачивающиеся эффекты жидкого пламени.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Марко Бесаньи
• 29 июня 2018

О коде

Раскрывающееся меню HTML и CSS

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор

• Халида Астатин
• 29 июня 2018

О коде

Градиентное меню

Раскрывающееся меню адаптивного градиента.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор

• Мохамед Айман
• 28 июня 2018

О коде

Главное меню

Горизонтальное меню с выпадающими эффектами в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: ionicons.css

О коде

Меню CSS

No JS — обязательно загляните в мобильное меню.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Винсент Дюран
• 28 июня 2018

О коде

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

HTML и CSS выпадающее меню с приятным эффектом.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

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

Горизонтальное выпадающее меню на чистом CSS с красивыми переходами и красивой палитрой.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: ionicons.css

О коде

Раскрывающееся меню

Раскрывающееся меню «Классный HTML и CSS».

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор

• Хесус Родригес
• 25 июня 2018

О коде

Необычное меню

Необычное выпадающее меню в HTML и CSS. На основе https://dribbble.com/shots/1075480-Ui-Kit-Hotel

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор

• sean_codes
• 10 января 2018

О коде

Рекурсивная навигация при наведении

Только CSS-рекурсивная навигация при наведении.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Руслан Пивоваров
• 31 июля 2016 г.

О коде

Классные эффекты выпадающего меню

Cool выпадающее меню чистых CSS-эффектов.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Сатиш кумар
• 19 февраля 2015

О коде

Раскрывающееся меню

Выпадающее меню на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Роберт Боргези
• 17 февраля 2015 г.

О коде

Простое раскрывающееся меню на чистом CSS

Меню с выпадающим списком выполнено только в CSS, со строкой, следующей за наведением на строку.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Коннор Брассингтон
• 16 ноября 2014 г.

О коде

Простое раскрывающееся меню на чистом CSS

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

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

Анимированные выпадающие меню CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Каталин Рошу
• 2 сентября 2013 г.

О коде

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

Это еще одна концепция раскрывающегося меню .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Джон Урбанк
• 5 сентября 2012 г.

О коде

Адаптивное меню

Простое, только CSS, гибкое раскрывающееся меню.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Решено с помощью CSS! Выпадающие меню

CSS

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

---

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

Поиск в Google по запросу «раскрывающееся меню» дает множество примеров.

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

Теперь предположим, что нам нужно раскрывающееся подменю для второго элемента навигации. Мы можем сделать то же самое и включить список ссылок в этот элемент списка:

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

  li {
 дисплей: блок;
 продолжительность перехода: 0,5 с;
}

li: hover {
  курсор: указатель;
}

ul li ul {
  видимость: скрыта;
  непрозрачность: 0;
  позиция: абсолютная;
  переход: легкость всего 0,5 с;
  верхняя маржа: 1 бэр;
  слева: 0;
  дисплей: нет;
}

ul li: hover> ul,
ul li ul: hover {
  видимость: видимая;
  непрозрачность: 1;
  дисплей: блок;
}

ul li ul li {
  ясно: оба;
  ширина: 100%;
}  

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

Проблема

Это начинает выглядеть так, как мы хотим, но мы еще далеки от завершения. Доступность в Интернете — это основная часть разработки вашего продукта, и прямо сейчас это прекрасная возможность поднять этот вопрос. Добавление role = "navigation" — хорошее начало, но для того, чтобы панель навигации была доступна, нужно иметь возможность перемещаться по ней (и фокусироваться на нужном элементе в разумном порядке), а также иметь экран читатель точно прочитал вслух то, на чем сосредоточено внимание.

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

Теперь важно отметить, что теоретически вы сосредоточены на этом другом элементе и что программа чтения с экрана сможет его проанализировать, прочитав Sub-One , но пользователи клавиатуры не смогут увидеть, что происходит, и будут сбиться с пути.

Причина, по которой это происходит, заключается в том, что, пока мы стилизуем наведение родительского элемента, как только мы переводим фокус с родительского элемента на один из элементов списка в этом родительском элементе, мы теряем этот стиль. Это имеет смысл с точки зрения CSS, но это не то, что нам нужно.

К счастью, есть новый псевдокласс CSS, который даст нам именно то, что мы хотим в данном случае, и он называется : focus-within .

Решение:

: фокус в пределах

Псевдоселектор : focus-within является частью спецификации CSS Selectors Level 4 Spec и сообщает браузеру применить стиль к родительскому элементу, когда любой из его дочерних элементов находится в фокусе.В нашем случае это означает, что мы можем перейти к Sub-One и применить стиль : focus-within вместе со стилем : hover родительского элемента и точно увидеть, где мы находимся в раскрывающемся меню навигации. В нашем случае это будет ul li: focus-within> ul :

  ul li: hover> ul,
ул ли: фокус внутри> ул,
ul li ul: hover {
  видимость: видимая;
  непрозрачность: 1;
  дисплей: блок;
}  

Sweet! Оно работает!

Быстрый объезд! Если вы поддерживаете только современные браузеры, CSS, который мы видели до сих пор, подойдет.Но вы должны знать, что когда какой-либо браузер не понимает часть селектора, он выбрасывает весь селектор. Поэтому, если вы хотите поддерживать IE 11, вы не можете смешивать часть : focus-within .

  / * Этот составной селектор по-прежнему будет работать в IE 11, потому что: focus-within не смешивается с * /
ul li: hover> ul,
ул ли ул: наведите указатель мыши,
ul li ul: focus {
  видимость: видимая;
  непрозрачность: 1;
  дисплей: блок;
}

/ * IE 11 не получит этого, но, по крайней мере, меню верхнего уровня будут работать * /
ul li: focus-within> ul {
  видимость: видимая;
  непрозрачность: 1;
  дисплей: блок;
}  

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

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

  a: парение,
фокус {
  ...
}  

Но в этом случае, поскольку мы применяем стили наведения на основе родительского li , мы снова можем использовать : focus-within , чтобы получить то же ощущение при переходе по табуляции. Это потому, что мы не можем на самом деле сфокусировать на li (если мы не добавим tabindex = "0" ). На самом деле мы фокусируемся на ссылке ( a ) внутри нее.: focus-within позволяет нам по-прежнему применять стили к родительскому li при фокусировке на ссылке (чертовски круто!):

  ли: парение,
li: focus-within {
  ...
}  

На этом этапе, поскольку мы применяем стиль фокусировки, мы можем сделать что-то, что обычно не рекомендуется (удалить стиль этого синего контура кольца фокусировки). Мы можем сделать это по:

  li: focus-within a {
  наброски: нет;
}  

Приведенный выше код указывает, что когда мы фокусируемся на элементах списка через ссылку ( a ), не применяем схему к элементу ссылки ( a ).Это довольно безопасно писать таким образом, потому что мы задаем стили исключительно для состояния наведения, а в браузерах, которые не поддерживают : focus-within , ссылка все равно будет иметь кольцо фокусировки. Теперь наше меню выглядит так:

Окончательное меню с использованием состояний : focus-within , : hover и настройка исчезновения кольца фокусировки

А как насчет ARIA?

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

Вы добавляете aria-haspopup = "true" к родительскому элементу раскрывающегося меню, чтобы указать альтернативное состояние, и включаете aria-label = "submenu" в само раскрывающееся меню (в данном случае наш список с class = "dropdown" .

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

Предупреждение о поддержке браузера

Говоря о предостережениях, давайте поговорим о поддержке браузером. Хотя : focus-within действительно имеет довольно хорошую поддержку браузера , важно отметить, что Internet Explorer и Edge не поддерживаются, поэтому ваши пользователи на этих платформах не смогут видеть навигацию.

Desktop

Chrome	Firefox	IE	Edge	Safari
60	52	Нет	79	8 10,1
Android Chrome	Android Firefox	Android	iOS Safari
94	92	94	10.3

Окончательным решением здесь было бы использование как разметки ARIA, так и CSS : focus-within , чтобы обеспечить надежное раскрывающееся меню для ваших пользователей.

Если вы хотите иметь возможность использовать эту функцию в будущем, проголосуйте за нее на Edge User Voice! И проголосуйте за : кольцо фокусировки , пока вы на нем, так что мы сможем стилизовать это кольцо фокусировки и создать красивый интерактивный веб-интерфейс для всех 😀

Подробнее о

: фокус в пределах и A11Y

Как создать раскрывающееся меню в CSS

Что такое выпадающие списки?

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

Примеры:

  

   Имя 
  

     Один 
     Два 
     Три 
  
  

Затем вы должны настроить классы в CSS следующим образом:

  .dropdown {
  положение: относительное;
  дисплей: встроенный блок;
}

.dropbtn {
  цвет фона: красный;
  отступ: 10 пикселей;
}

.dropdown-content {
  дисплей: нет;
  позиция: абсолютная;
}

.dropdown: hover .dropdown-content {
  дисплей: блок;
}  

Вам нужны отдельные классы div для создания кнопки и еще один div для разделения списка того, что содержит кнопка.

Пример

  

  
        

  
            

  
                

                     Содержание 1 
                
                

                     Контент 2 
                
  
            
  
         
  
         

  
              и время 
            

  
                

                     Содержание 3 
                
                

                    Содержание 4 
                
                

                   Содержание 5 
                
  
            
  
         
  
 
  

  # myNav1 {
    высота: 0;
    ширина: 50%;
    положение: фиксированное;
    z-индекс: 6;
    верх: 0;
    слева: 0;
    цвет фона: #ffff;
    переполнение: скрыто;
    переход: 0.3 с;
    непрозрачность: 0,85;
}

# myNav2 {
    высота: 0;
    ширина: 50%;
    положение: фиксированное;
    z-индекс: 6;
    внизу: 0;
    справа: 0;
    цвет фона: #ffff;
    переполнение: скрыто;
    переход: 0,3 с;
    непрозрачность: 0,85;
}

.overlay-content {
    положение: относительное;
    ширина: 100%;
    выравнивание текста: центр;
    маржа сверху: 30 пикселей;
}

# myNav1-content {
    верх: 12%;
    осталось: 5%;
    дисплей: нет;
}

# myNav2-content {
    верх: 12%;
    справа: 10%;
    дисплей: нет;
}  

Подробнее о раскрывающихся списках CSS:

Как оформить раскрывающийся список с помощью CSS?

< html >

< голова >

9065

9065 9065 h2 {

цвет: зеленый;

}

выберите {

-webkit-внешний вид: нет;

-моз-внешний вид: нет;

-ms-внешний вид: нет;

внешний вид: отсутствует;

контур: 0;

фон: зеленый;

фоновое изображение: нет;

граница: сплошной черный 1 пиксель;

}

.выберите {

положение: относительное;

дисплей: блочный;

ширина: 20em;

высота: 3em;

line-height: 3;

фон: # 2C3E50;

переполнение: скрыто;

радиус границы:.25em;

}

выбор {

ширина: 100%;

высота: 100%;

маржа: 0;

заполнение: 0 0 0 .5em;

цвет: #fff;

курсор: указатель;

}

select :: - ms-expand {

дисплей: нет;

}

.select :: after {

content: '\ 25BC';

Положение: абсолютное;

верх: 0;

правый: 0;

внизу: 0;

заполнение: 0 1em;

фон: # 34495E;

события указателя: нет;

}

.выберите: hover :: после {

цвет: # F39C12;

}

.select :: after {

-webkit-transition: .25s all easy;

-o-переход: .25s all easy;

переход: 0,25 с легкостью;

}

стиль >

головка >

685

корпус < центр >

< h2 > GeeksforGeeks h2 >

9068

906 906 выберите " >

< выберите имя = " slct " id = " slct " >

05 > Предметы информатики option >

< опция значение = "1" > Операционная система опция >

< опция значение = значение « > Компьютерные сети опция >

< опция значение = « 3 » > Структура данных 5 5

< опция значение = "4" > Алгоритм опция >

68 < значение опции значение 5 " > Программирование на C опция >

9 0653 < опция значение = "6" > JAVA опция >

выбор 9 / div >

центр >

корпус >

68мл >

мл > 9006 html - раскрывающееся меню, которое открывается вверх / вверх с чистым css html - раскрывающееся меню, которое открывается вверх / вверх с чистым css - qaru

Спросил 10 лет назад

Просмотрено 133k раз

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

  #menu * {
  отступ: 0;
  маржа: 0;
  шрифт: 12px грузия;
  тип-стиль-список: нет;
}
#menu {
  маржа сверху: 100 пикселей;
  плыть налево;
  высота строки: 10 пикселей;
  слева: 200 пикселей;
}
#menu a {
  дисплей: блок;
  текстовое оформление: нет;
  цвет: # 3B5330;
}
#menu a: hover {background: # B0BD97;}
#menu ul li ul li a: hover {
  фон: # ECF1E7;
  отступ слева: 9 пикселей;
  граница слева: сплошной 1px # 000;
}
#menu ul li ul li {
  ширина: 140 пикселей;
  граница: нет;
  цвет: # B0BD97;
  padding-top: 3 пикселя;
  padding-bottom: 3px;
  отступ слева: 3 пикселя;
  отступ справа: 3 пикселя;
  фон: # B0BD97;
}
#menu ul li ul li a {
  шрифт: 11px arial;
  шрифт: нормальный;
  вариант шрифта: капители;
  padding-top: 3 пикселя;
  padding-bottom: 3px;
}
#menu ul li {
  плыть налево;
  ширина: 146 пикселей;
  font-weight: жирный;
  граница-верх: сплошной 1px # 283923;
  нижняя граница: сплошной 1px # 283923;
  фон: # 979E71;
}
#menu ul li a {
  font-weight: жирный;
  отступ: 15 пикселей 10 пикселей;
}
#menu li {
  положение: относительное;
  плыть налево;
}
#menu ul li ul, #menu: hover ul li ul, #menu: hover ul li: hover ul li ul {
  дисплей: нет;
  тип-стиль-список: нет;
  ширина: 140 пикселей;
}
#menu: hover ul, #menu: hover ul li: hover ul, #menu: hover ul li: hover ul li: hover ul {
  дисплей: блок;
}
#menu: hover ul li: hover ul li: hover ul {
  позиция: абсолютная;
  маржа слева: 145 пикселей;
  маржа сверху: -22px;
  шрифт: 10 пикселей;
}
#menu: hover ul li: hover ul {
  позиция: абсолютная;
  маржа сверху: 1px;
  шрифт: 10 пикселей;
}  

  

  

    
   На главную  
      

        
  О нас  
        
  Заявление об ограничении ответственности  
      
    
    

        Области практики  
      

        
  Гражданское право  
        
  Уголовное право & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & rsaquo; 
          

            
  Joomla  
            
  Drupal  
            
  WordPress  
          
        
  Семейное право & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & rsaquo; 
          

            
  Joomla  
            
  Drupal  
            
  WordPress  
          
        
  Личные травмы & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & rsaquo; 
          

            
  Joomla  
            
  Drupal  
            
  WordPress  
          
        
  Нарушения правил дорожного движения & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & rsaquo; 
          

            
  Joomla  
            
  Drupal  
            
  WordPress  
          
        
  Часто задаваемые вопросы  
      
    

    
   поверенный  
      

        
  X  
        
  X  
        
  X  
        
  X  
      
    

    
   Свяжитесь с нами  
      

        
  Местоположения & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & rsaquo; 
          

            
  Офис Rockville  
            
  Офис Фредерика  
            
  Офис Greenbelt  
          
        
  Телефонный справочник  
        
  Почтовый адрес  
      

    

    
   Ресурсы  
      

        
  Полезные ссылки  
        
  Аффилированные лица & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & rsaquo; 
          

            
  Поставщики медицинских услуг  
            
  Страховые компании  
          
        
 
    
   Новости и amp; События  
      

        
  Статьи для прессы  
        
  Информационный бюллетень  
        
  События  
        
  Блог  
      
    
   испанский  
      

        
  X  
      

  
  

Мохаммад Усман

32.4k1616 золотых знаков8585 серебряных знаков8383 бронзовых знака

Создан 18 окт.

серый костюм

42311 золотой знак44 серебряных знака77 бронзовых знаков

2

Добавить bottom: 100% к вашему #menu: hover ul li: hover ul rule

Демо 1

  #menu: hover ul li: hover ul {
    позиция: абсолютная;
    маржа сверху: 1px;
    шрифт: 10 пикселей;
    внизу: 100%; / * добавлен этот атрибут * /
}
  

---

Или еще лучше, чтобы подменю не имели такого же эффекта, просто добавьте это правило

Демо 2

  #menu> ul> li: hover> ul {
    внизу: 100%;
}
  

---

Демо 3

источник: http: // jsfiddle.сеть / W5FWW / 4/

И чтобы вернуть границу, вы можете добавить следующий атрибут

  #menu> ul> li: hover> ul {
    внизу: 100%;
    border-bottom: 1px сплошной прозрачный
}
  

Создан 18 окт.

Джозеф Марикл Джозеф Марикл

70.1k1616 золотых знаков106106 серебряных знаков121121 бронзовый знак

8

Если мы используем выбранный раскрывающийся список, то мы можем использовать нижеприведенный css (JS / JQuery не требуется)

  
    

<стиль>
.selected-container .chosen-drop {
    нижняя граница: 0;
    верхняя граница: сплошной 1px #aaa;
    верх: авто;
    внизу: 40 пикселей;
}

.chosen-container.chosen-with-drop .chosen-single {
    граница-верх-левый-радиус: 0 пикселей;
    граница-верх-правый-радиус: 0 пикселей;

    граница-нижний-левый-радиус: 5 пикселей;
    граница-нижний-правый-радиус: 5 пикселей;

    фоновое изображение: нет;
}

.chosen-container.chosen-with-drop .chosen-drop {
    граница-нижний-левый-радиус: 0 пикселей;
    граница-нижний-правый-радиус: 0 пикселей;

    граница-верх-левый-радиус: 5 пикселей;
    граница-верх-правый-радиус: 5 пикселей;

    тень коробки: нет;

    нижнее поле: -16 пикселей;
}

  

Создан 17 янв.

Рохит Партэ

2,1662121 серебряный знак1717 бронзовых знаков

lang-html

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie Настроить параметры

Показать скрыть раскрывающееся меню при наведении курсора мыши с помощью CSS

Тема: HTML / CSSPrev | След.

Ответ: Используйте CSS

: hover псевдокласс

Если вы просто хотите показывать и скрывать раскрывающееся меню при наведении курсора мыши, вам не нужен JavaScript.Вы можете сделать это, просто используя свойство CSS display и псевдокласс : hover .

В следующем примере показано, как реализовать простое раскрывающееся меню с помощью CSS.

  




<стиль>
    ul {
        отступ: 0;
        стиль списка: нет;
        фон: # f2f2f2;
    }
    ul li {
        дисплей: встроенный блок;
        положение: относительное;
        высота строки: 21px;
        выравнивание текста: слева;
    }
    ul li a {
        дисплей: блок;
        отступ: 8px 25px;
        цвет: # 333;
        текстовое оформление: нет;
    }
    ul li a: hover {
        цвет: #fff;
        фон: # 939393;
    }
    ul li ul.падать {
        минимальная ширина: 100%; / * Устанавливаем ширину раскрывающегося списка * /
        фон: # f2f2f2;
        дисплей: нет;
        позиция: абсолютная;
        z-индекс: 999;
        слева: 0;
    }
    ul li: hover ul.dropdown {
        дисплей: блок; / * Показать раскрывающийся список * /
    }
    ul li ul.dropdown li {
        дисплей: блок;
    }



    

        
  На главную  
        
  О компании  
        

             Продукты ▾ 
            

                
  Ноутбуки  
                
  Мониторы  
                
  Принтеры  
            
        
        
  Связаться  
    
 
  

---

Связанные вопросы и ответы

Вот еще несколько часто задаваемых вопросов по этой теме:

.