Как в css сделать выпадающее меню: Как сделать всплывающее меню при наведении

Содержание

Как Создать Выпадающее Меню CSS

Введение

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

Нужен недорогой, но надёжный хостинг для вашего нового проекта? Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!

К предложению

Что вам понадобится

Перед тем, как мы начнем это руководство, вам понадобится следующее:

  • Доступ к контрольной панели вашего хостинга

Шаг 1 — Создание HTML-файла

Во-первых, вам нужно создать пустой HTML-файл. В этом руководстве мы создадим новый файл под названием menu.html. Для этого мы будем использовать Файловый менеджер. Однако тот же результат может быть достигнут с использованием FTP-клиента (создайте файл menu.html на вашем компьютере и загрузите его на ваш хостинг).

Шаг 2 — Добавление кода HTML меню

Наше меню будет сделано из одного родительского элемента под названием Главное меню и пяти подразделов. Изменяя адрес внутри атрибута href, вы можете связать каждый подраздел с разными страницами вашего сайта. Вы наверное заметили, что каждый элемент имеет разный класс — dropdown, mainmenubtn и dropdown-child. Классы необходимы для применения правил CSS.

<div>
  <button>Главное меню</button>
  <div>
    <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a>
    <a href="http://www.вашдомен. ru/page2.html">Подраздел 2</a>
    <a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a>
    <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a>
    <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a>
  </div>
</div>

Вот, как это выглядит без применения каких-либо CSS-правил:

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

Шаг 3 — Как создать выпадающее меню CSS

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

.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}

.mainmenubtn:hover {
    background-color: red;
    }
    
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
. dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}

Как вы видите, класс .dropdown-child имеет CSS правило display: none. Однако, как только пользователь проведет курсором (.dropdown:hover) по родительскому элементу, это правило изменит его отображение на display: block. Это и создаст эффект выпадающего меню.

Ниже представлен финальный результат нашего файла menu.html:

<html>
<head>
<style>
.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.
dropdown:hover .dropdown-child {    display: block; } </style> </head> <body> <div class="dropdown">  <button class="mainmenubtn">Главное меню</button>  <div class="dropdown-child">    <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a>    <a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a>    <a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a>    <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a>    <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a>  </div> </div> </body> </html>

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

Как только вы закончите, финальный результат должен быть похож на это:

Не бойтесь экспериментировать c CSS стилем, изменяя цвета и размер.

Адаптируйте меню под ваши нужды.

Заключение

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

HTML/CSS выпадающее меню, хотите сделать его фон фиксированной ширины



Я использую меню HTML/CSS из выпадающих списков статьи SuckerFish . Мое конкретное меню имеет серый фон. Я пытаюсь сделать так, чтобы фон меню имел фиксированную ширину. Я попытался добавить параметр ширины в раздел #navbar в CSS, но это, похоже, ничего не дало. Как мне получить такое поведение фиксированной ширины?

HTML

<ul>
    <!-- The strange spacing herein prevents an IE6 whitespace bug. -->
    <li><a href="index.html">System Set-Up &amp; Status</a>
    </li>
    <li><a href="#">NMEA Output</a>
        <ul>
            <li><a href="ch2. html">Channel 1</a></li><li>
                <a href="ch3.html">Channel 2</a></li><li>
                <a href="ch4.html">Channel 3</a></li><li>
                <a href="ch5.html">Channel 4</a></li></ul>
    </li>
    <li><a href="#">UDP Output</a>
        <ul>
            <li><a href="udpch2.html">Channel 1</a></li><li>
                <a href="udpch3.html">Channel 2</a></li><li>
                <a href="udpch4.html">Channel 3</a></li><li>
                <a href="udpch5.html">Channel 4</a></li><li></li></ul>
        </li>
        <li><a href="baro.html">Baro / PoE</a>
        </li>
        <li><a href="advanced.html">Advanced</a>
        </li>
    <li><a href="mob.html">MOB</a>
    </li>
</ul>

CSS

#navbar {
    margin: 0;
    padding: 0;
    height: 1em; }
#navbar li {
    list-style: none;
    float: left; }
#navbar li a {
    display: block;
    padding: 3px 8px;
    background-color: #cccccc;
    color: #000000;
    text-decoration: none; }
#navbar li a:hover {
    background-color: #999999; }
#navbar li ul {
    display: none;
    width: 10em; /* Width to help Opera out */
    background-color: #69f;}
#navbar li:hover ul, #navbar li. hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; }
#navbar li:hover li, #navbar li.hover li {
    float: none; }
#navbar li:hover li a, #navbar li.hover li a {
    background-color: #c0c0c0;
    border-bottom: 1px solid #fff;
    color: #000; }
#navbar li li a:hover {
    background-color: #999999; }

Фрагмент CSS находится здесь , а фрагмент HTML-здесь

jsfiddle вопроса :

html css menu
Поделиться Источник fred basset     26 февраля 2012 в 19:23

2 ответа


  • Как сделать ширину потомка не зависящей от его родительской ширины

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

  • Выпадающее меню CSS выпуск

    Я создал выпадающее меню для своего сайта WordPress. В этом jsfiddle вы можете найти код HTML и CSS: http://jsfiddle.net/N5h5c / see jsfiddle У меня там проблема CSS. Я создал выпадающее меню, но при наведении курсора пункт меню один оно растягивается и приобретает большую ширину. Этого не должно…



1

Поскольку вы перемещаете элементы списка меню, вам нужно будет поместить clearfix в неупорядоченный список. Затем вы можете установить ширину и цвет фона на ul. Проверьте http://jsfiddle.net/qT7xs/ .

Поделиться Brian Richards     26 февраля 2012 в 19:47



1

#navbar принимает соответствующую ширину, но у него нет набора background-color , поэтому по умолчанию он прозрачен.

Удалите background-color из #navbar li a и добавьте его вместо

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

#navbar {
    background-color: #cccccc;
    margin: 0;
    padding: 0;
    overflow: hidden;    /*clear floats */
}

Рабочий пример: http://jsfiddle.net/UfuG2 /

Поделиться My Head Hurts     26 февраля 2012 в 19:49


Похожие вопросы:


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

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


Хотите иметь выпадающее меню в HTML

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


Фон меню фиксированной ширины с меню CSS/JQuery не работает

У меня есть проблема с моим фоновым меню jquery . Я не могу сделать его с фиксированной шириной, которая совпадает с фоновым изображением . Он идет с шириной набранного текста . и кнопка повторить…


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

У меня есть вертикальное выпадающее меню, и я хочу, чтобы подменю тоже было вертикальным. По-видимому, если вы установите float:left для подменю li , это должно быть хорошо, но проблема в том, что…


Выпадающее меню CSS выпуск

Я создал выпадающее меню для своего сайта WordPress. В этом jsfiddle вы можете найти код HTML и CSS: http://jsfiddle.net/N5h5c / see jsfiddle У меня там проблема CSS. Я создал выпадающее меню, но…


Полная ширина выпадающего меню css

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

..


CSS Выпадающее Меню Без Фиксированной Ширины

Я пытаюсь заставить выпадающее меню не разворачивать первый уровень ul при наведении курсора и отображать элементы ниже, но без установки фиксированной ширины. Есть идеи? В настоящее время…


растягивание CSS меню по div

Я работаю на веб-сайте,который имеет горизонтальное меню в верхней части. Вот пример страницы: http://workinprogress.pw/test.html вот мой лист CSS: http://workinprogress.pw/test.css Я создал меню,…


Сделайте выпадающее меню без списка в CSS

Я хочу сделать выпадающее меню с CSS . Я немного знаю, как это сделать, но структура HTML отличается. Моя структура такова: Так что в конце концов я хотел бы, чтобы это работало именно так: -При…


Как сделать выпадающее меню полной ширины и push-контент только с HTML+CSS?

Я пытаюсь создать чистое и простое выпадающее меню HTML+CSS, которое будет открываться в режиме полной ширины под каждым элементом, а также будет нажимать контент. Это изображение и jsfiddle лучше…

CSS выпадающее подменю с динамической шириной: как выровнять влево?



Легко иметь подменю LI > UL с CSS:

.menu ul { padding-left: 0px; }
.menu li { list-style-type: none; display: inline-block; padding-left: 0px; margin: 1px; background: #ddd; width: 100px; }
.menu li ul { display: none; }
.menu li:hover > ul { display: block; position: absolute; background: #000; }
.menu li:hover > ul li { display: block; background: #bbb; width: auto; }

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

Допустим, я хочу выровнять подменю вправо, так что правая сторона должна совпадать с правой стороной родительского LI. Я могу сделать это, имея фиксированную ширину подменю, и использовать это (предполагая, что родительский LI имеет ширину 100 пикселей):

#menu-left li:hover > ul { width: 150px; margin-left: -50px; }

Но тогда вы больше не сможете использовать подменю гибкой ширины. Кроме того, вам нужно знать ширину родительского LI.

JS Fiddle лучше всего объясняет мой вопрос: https://jsfiddle.net/ybc0uxq8/1/

Кто-нибудь знает способ, чтобы правая сторона суб UL соединялась с правой стороной родительского LI без необходимости фиксированной ширины подменю и с учетом ширины подменю, большей, чем родительский LI?

html css
Поделиться Источник dirk     07 февраля 2016 в 21:28

2 ответа


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

    У меня есть верхнее меню с выпадающей навигацией (подменю) и выпадающим меню справа от главного меню. css: ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; } Как изменить положение влево для последнего меню, потому что если я наведу курсор на последнее…

  • CSS выпадающее меню с подменю абсолютное / относительное положение к другому элементу

    Я пытаюсь создать горизонтальное выпадающее меню, в котором каждое подменю будет отображаться в одном и том же положении (а не под каждым родительским подменю). Я хочу сделать это без javascript, и это пример того, что я сделал на данный момент (это просто выпадающее меню css):…



1

Хороший способ-поставить .menu li { position:relative;...} так, чтобы субэлемент был помещен относительно родителя, когда его атрибут position установлен в absolute . Затем удалите атрибут width из селектора #menu-left li:hover > ul и добавьте в него right:0 .

Обновление. Чтобы иметь субэнтрии больше, чем их родители (как указано в комментариях), установите свойства селектора .menu li ul следующим образом :

.menu li ul { display: none; min-width:150px; }

Увидеть fiddle здесь (обновляется).

Поделиться Amessihel     07 февраля 2016 в 21:39



1

Согласно comments/request, вот отредактированная версия исходного кода CSS , чтобы отразить желаемый результат:

/* apply to both */
. menu ul { padding-left: 0px; }
.menu li { list-style-type: none; display: inline-block; position: relative; padding-left: 0px; margin: 1px; background: #ddd; }
.menu li ul { display: none; }
.menu li:hover > ul { display: block; position: absolute; background: #000; right: 0; }
.menu li:hover > ul li { background: #bbb; white-space: nowrap; }

Поделиться Andrew Brown     07 февраля 2016 в 22:09


Похожие вопросы:


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

У меня есть следующий сайт http://jsfiddle.net/Me4fw/4/ , на котором я пытаюсь реализовать горизонтальное выпадающее меню css, имеющее подменю, которое также является горизонтальным. Я перепробовал…


CSS выпадающее меню стиля / правое подменю

Я пытаюсь сделать выпадающее меню с HTML/CSS. на самом деле, это меню dropright, которое является проблемой. При наведении курсора на элементы навигационной панели срабатывает выпадающее меню при. ..


Как выровнять выпадающее подменю?

Здесь я сделал JSFiddle демонстрацию небольшого выпадающего меню 1, но я только не могу понять, как высветить выпадающее окно подменю. <ul> <li> <a…


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

У меня есть верхнее меню с выпадающей навигацией (подменю) и выпадающим меню справа от главного меню. css: ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0;…


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

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


css выпадающее меню : подменю не выравнивается влево

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


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

отличные ответы я получил на вопрос, который опубликовал ранее( появляются при наведении курсора и остаются видимыми ). Было очень сложно редактировать css и html, потому что я просто скопировал и…


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

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


Выпадающее подменю в WordPress

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


выпадающее меню выравнивание текста, css работает, но bootstrap терпит неудачу?

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

сделать выпадающее меню на CSS и HTML.

Задача

Создать выпадающее меню инструментами CSS и HTML.

Решение

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

<!DOCTYPE html>
<html>
<head>
	<title>Выпадающее меню</title>
<style>
        ul.menu{
            padding: 3px;       /* убираем отступы */
            margin-top: 50px;   /* для красоты отодвигаю вниз */
            text-align: center; /* выравниваю элементы спаска по центру */
        }
        ul.menu > li{
            list-style: none;	    /* убираем маркеры списка */
            display: inline-block;	/* разещаем списки горизонтально */
            background-color: #D87171;
            padding: 5px 15px;
        }
        /* устанавливаем стиль ссылок в меню */
        ul. menu > li > a{
            color: #FFFFFF;
            text-decoration: none;
        }
        /* устанавливаем стиль ссылок при наведении курсора */
        ul.menu > li > a:hover{
            text-decoration: underline;
        }
</style>
</head>
<body>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Услуги</a></li>
</ul>

</body>
</html>

У нас получился список такого вида:

Рисунок 1. Подготовительные работы.

Обратите внимание: стиль ссылки меняется при наведении на неё курсора. Это реализовывается с помощью псевдокласса :hover. Этот псевдокласс задаёт стиль элемента при наведении на него курсора, при этом кнопка мыши не нажата. Если есть нажатие кнопки — это уже другой псевдокласс.

Теперь перейдём к решению нашей задачи. Сделаем выпадающее меню для пункта «Услуги», добавим выпадающие разделы: «Купить», «Продать», «Обменять». Эти пункты — это отдельный список, который вложен в тег <li>

Создадим этот список и добавим стили, описывающие его внешний вид.

<!DOCTYPE html>
<html>
<head>
	<title>Выпадающее меню</title>
<style>
    ul.menu{
        padding: 3px;       /* убираем отступы */
        margin-top: 50px;   /* для красоты отодвигаю вниз */
        text-align: center; /* выравниваю элементы спаска по центру */
    }
    ul.menu > li{
        list-style: none;	    /* убираем маркеры списка */
        display: inline-block;	/* разещаем списки горизонтально */
        background-color: #D87171;
        padding: 5px 15px;
    }
    /* устанавливаем стиль ссылок в меню */
        ul.menu > li > a{
        color: #FFFFFF;
        text-decoration: none;
    }
    /* устанавливаем стиль ссылок при наведении курсора */
    ul.menu > li > a:hover{
        text-decoration: underline;
    }
    /* устанавливаем стиль для внутреннего меню */
    . menuInner{
        list-style: none;
        padding: 4px;
        border: 1px solid #000000;
        border-radius: 5px;
        background-color: #FFFFFF;
        text-align: left;
    }
</style>
</head>
<body>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li>Купить</li>
			<li>Продать</li>
			<li>Обменять</li>
		</ul>
	</li>
</ul>

</body>
</html>

Теперь у нас получился такой список:

Рисунок 2. Подготовительные работы.

Безусловно, это не то, что нам нужно. По умолчанию этот список должен быть скрыт и становиться видимым только при наведении мыши. Скрыть элемент можно при помощи правила правила {display: none}. А при наведении курсора его нужно активировать сделав снова видимым правила {display: inline-block}.

<!DOCTYPE html>
<html>
<head>
	<title>Выпадающее меню</title>
<style>
    ul. menu{
        padding: 3px;
        margin-top: 50px;
        text-align: center;
    }
    ul.menu > li{
        list-style: none;
        display: inline-block;
        background-color: #D87171;
        padding: 5px 15px;
    }
    /* устанавливаем стиль ссылок в меню */
        ul.menu > li > a{
        color: #FFFFFF;
        text-decoration: none;
    }
    /* устанавливаем стиль ссылок при наведении курсора */
    ul.menu > li > a:hover{
        text-decoration: underline;
    }
    /* устанавливаем стиль для внутреннего меню */
    .menuInner{
        display: none; /* делаем невидимым */
        list-style: none;
        padding: 4px;
        border: 1px solid #000000;
        border-radius: 5px;
        background-color: #FFFFFF;
        text-align: left;
    }
    /* делаем видимым при наведении курсора на блок li */
    .menu > li:hover > .menuInner{
        display: block;
    }
</style>
</head>
<body>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li>Купить</li>
			<li>Продать</li>
			<li>Обменять</li>
		</ul>
	</li>
</ul>

</body>
</html>

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

Чтобы элемент отображался не влияя на отображение других элементов, его нужно спозиционировать со значением absolute.

<!DOCTYPE html>
<html>
<head>
	<title>Выпадающее меню</title>
<style>
    ul.menu{
        padding: 3px;
        margin-top: 50px;
        text-align: center;
    }
    ul.menu > li{
        position: relative;         /* добавляем позиционирование */
        list-style: none;
        display: inline-block;
        background-color: #D87171;
        padding: 5px 15px;
        height: 20px;               /* добавляем высоту */
    }
    /* устанавливаем стиль ссылок в меню */
        ul.menu > li > a{
        color: #FFFFFF;
        text-decoration: none;
    }
    /* устанавливаем стиль ссылок при наведении курсора */
    ul.menu > li > a:hover{
        text-decoration: underline;
    }
    /* устанавливаем стиль для внутреннего меню */
    .menuInner{
        display: none; /* делаем невидимым */
        list-style: none;
        padding: 4px;
        border: 1px solid #000000;
        border-radius: 5px;
        background-color: #FFFFFF;
        text-align: left;
    }
    . menu > li:hover > .menuInner{
        display: block;
        position: absolute;
        top: 30px;
        left: 0;
    }
</style>
</head>
<body>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li>Купить</li>
			<li>Продать</li>
			<li>Обменять</li>
		</ul>
	</li>
</ul>

</body>
</html>

Что мы тут сделали:

  1. Добавили в родительский элемент <li> правило позиционирования {position: relative;}. Это сделано для того, чтобы отчёт координат абсолютного позиционирования вложенного списка начался с верхнего левого угла этого блока, а не угла экрана.
  2. Добавили в родительский элемент <li> правило {height: 20px;}. Задали ему высоту, чтобы удобней было позиционировать выпадающий список.
  3. Установили абсолютное позиционирование {position: absolute;} выпадающему списку и установили координаты: top и left.

Теперь выпадающее меню работает корректно.

Рисунок 3. Окончательный вариант.

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

Учебная задача решена. Пока.

Как сделать плавное выпадающее меню на 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. Вертикальное выпадающее меню на css: как его сделать

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

План урока и разметка нашего меню

В общем-то, сначала определимся с тем, как будем создавать само меню. В html5 стандартным способом считается создавать его в контейнере nav с помощью маркированного списка. Давайте именно так и сделаем. Маркеры мы позже уберем с помощью css, в меню они нам совершенно не нужны.

Собственно, я сразу напишу в html разметку с вложенными списками. То есть наши список будет двухуровневым – в нем будут другие списки. А именно, на каждый пункт 1 список, который и будет формировать выпадающее меню.

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

Собственно, вот она, вся разметка:

Пункт1

Подпункт

Подпункт

Подпункт

Пункт2

Подпункт

Подпункт

Подпункт

Пункт3

Подпункт

Подпункт

Подпункт

Пункт4

Подпункт

Подпункт

Подпункт

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

Собственно, я задал всей навигации идентификатор nav, а всем вложенным спискам – стилевой класс second, чтобы понимать, что они являются вложенными.

Отлично, разметка у нас готова, можно посмотреть на результат:

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

Пишем css-стили

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

*{ margin: 0; padding: 0; }

margin : 0 ;

padding : 0 ;

#nav{ height: 70px; } #nav ul{ list-style: none; }

#nav{

height : 70px ;

#nav ul{

list — style : none ;

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

#nav > ul > li{ float: left; width: 180px; position: relative; }

#nav > ul > li{

float : left ;

width : 180px ;

position : relative ;

Заметьте, что с помощью знака > мы обращаемся к пунктам списка, который непосредственно вложены в ul, а тот непосредственно вложен в nav. Это очень важно, так как позволяет не применить стиль к пунктам вложенных списков. Дело в том, что по моей задумке в главном списке пункты будут располагаться горизонтально, а во вложенных – вертикально.

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

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

Для чего позиционирование? Оно необходимо для того, чтобы потом абсолютно позиционировать вложенные списки. Если вы изучали позиционирование в css, то наверняка знаете, что если задать блоку относительное позиционирование, то все элементы в нем можно будет позиционировать абсолютно внутри именно этого блока, а не всего окна браузера.

Тем временем, вот что у нас уже получилось:

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

#nav li a{ display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; } #nav li a:hover{ background: #2F718E; }

#nav li a{

display : block ;

background : #90DA93;

border : 1px solid #060A13;

color : #060A13;

padding : 8px ;

text — align : center ;

text — decoration : none ;

#nav li a:hover{

background : #2F718E;

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

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

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

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

#nav li .second{ display: none; position: absolute; top: 100%; }

#nav li . second{

display : none ;

position : absolute ;

top : 100 % ;

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

Теперь мы видим на веб-странице только основное меню, что нам и нужно.

Реализуем выпадение

Нам осталось сделать самое главное – реализовать само выпадение. В этом нет ничего сложного, смотрите на этот код:

#nav li:hover .second{ display: block; }

#nav li:hover .second{

display : block ;

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

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

#nav li li{ width: 180px; }

#nav li li{

width : 180px ;

Все, проблема решена:

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

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

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

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

Теперь остается изменить правила для селектора #nav li .second, то есть для вложенных списков, а именно, их нужно немного по-другому позиционировать. Вот так:

#nav li .second{ display: none; position: absolute; left: 100%; top: 0; }

#nav li .second{

display : none ;

position : absolute ;

left : 100 % ;

top : 0 ;

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

Поэтому изменяем top: 100% на left: 100%. Кроме этого, координата top нам тоже нужна. Задаем ей 0, чтобы вложенное меню находилось на одном уровне с пунктом, которому соответствуют.

Все, теперь все работает так, как надо. Можете протестировать. Как видите, я не врал, когда говорил, что придется переписать всего несколько строк кода.

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

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

Михаил сб, 09/20/2014 — 12:28

Что-то мой комментарий не виден — дублирую:

===========
Спасибо, но у меня (под Инт.Экспл-8) меню не выпадает. Т.е. не работает строка «ul.nav li:hover ul {display: block;}»
Подскажите, в чем дело?

Есть пожедания по изложению материала:

Хорошо бы в этой строке (ul.aaaaa li:hover ul {display: block;}) растолковать, какая ее часть отвечает за «выпадение меню», а какая — за скрывание пунктов более глубокого уровня вложенности

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

В частности, неясно, зачем нужна строка «

Создаем анимированное выпадающее меню при помощи 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

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

Настольный компьютер
Chrome Firefox IE Edge Safari
60 52 Нет 79
10 Мобильный планшет
Android Chrome Android Firefox Android iOS Safari
91 89 91 10.3

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

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

Подробнее о

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

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

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

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

Примеры:

    

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

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

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

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

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

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

Пример

    
  # 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:

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

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

  1. Использование HTML-формы
  2. Использование внутреннего CSS

Использование HTML-формы

Если мы хотим создать раскрывающееся меню в документе Html с помощью формы, мы должны выполнить шаги, указанные ниже.Используя эти шаги, мы можем легко создать раскрывающееся меню:

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

<Голова> <Название> Создайте выпадающее меню с помощью HTML-формы <Тело> Эта страница поможет вам понять, как создать раскрывающееся меню в HTML-документе.И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью формы Html.

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

в этой точке.

<Тело> Эта страница поможет вам понять, как создать раскрывающееся меню в документе Html. И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью формы Html.<форма>

Шаг 3: Теперь мы должны определить теги

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

<форма> <выбор>

Шаг 5: И, наконец, мы должны сохранить файл Html, а затем запустить файл.

<Голова> <Название> Создайте выпадающее меню с помощью HTML-формы <Тело> Эта страница поможет вам понять, как создать раскрывающееся меню в HTML-документе. И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью формы Html. <форма> <выбор>

Проверить это сейчас

Вывод вышеуказанного HTML-кода показан на следующем снимке экрана:

Использование внутреннего CSS

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

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

Шаг 2: Теперь мы должны поместить курсор сразу после закрытия тега title в теге заголовка документа Html, а затем определить стили внутри тега

Шаг 3: Затем мы должны использовать другой класс, который определяет раскрывающийся список.

.падать { дисплей: встроенный блок; позиция: относительная }

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

.dropdown-content { позиция: абсолютная; цвет фона: светло-серый; минимальная ширина: 200 пикселей; дисплей: нет; z-индекс: 1; }

Шаг 5: Теперь нам нужно добавить еще один класс для определения цвета и размера текста в раскрывающемся меню.

.dropdown-content a { черный цвет; отступ: 12 пикселей 16 пикселей; текстовое оформление: нет; дисплей: блок; }

Шаг 6: И, наконец, в теге стиля мы должны отредактировать поведение раскрывающегося меню при наведении курсора. Итак, мы можем легко использовать следующий код в нашем теге стиля для редактирования.

.dropdown-content a: hover { цвет фона: оранжевый; } .dropdown: hover .dropdown-content { дисплей: блок; } .dropdown: hover .dropbtn { цвет фона: серый; }

Шаг 7: Теперь нам нужно поместить курсор в тег тела, где мы хотим показать раскрывающееся меню. Затем мы должны вставить следующий код в тег body.

Шаг 8: И, наконец, мы должны сохранить файл Html, а затем запустить файл в браузере.

<Голова> <Название> Создайте раскрывающееся меню с помощью внутреннего CSS <стиль> .dropbtn { цвет фона: желтый; черный цвет; отступ: 10 пикселей; размер шрифта: 12 пикселей; } .падать { дисплей: встроенный блок; позиция: относительная } .dropdown-content { позиция: абсолютная; цвет фона: светло-серый; минимальная ширина: 200 пикселей; дисплей: нет; z-индекс: 1; } .dropdown-content a { черный цвет; отступ: 12 пикселей 16 пикселей; текстовое оформление: нет; дисплей: блок; } .dropdown-content a: hover { цвет фона: оранжевый; } .dropdown: hover .dropdown-content { дисплей: блок; } .dropdown: hover .dropbtn { цвет фона: серый; } <Тело> Эта страница поможет вам понять, как создать раскрывающееся меню в HTML-документе. И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью внутреннего CSS.

Проверить это сейчас

Вывод вышеуказанного Html-кода показан на следующем снимке экрана:


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

CSS: полное руководство

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

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

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

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

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

Найди свой матч на тренировочном лагере