• Выделение пункта меню при наведении


    Как выделить активный пункт меню? — Хабр Q&A

    <div> <ul> <li> <a href="/phylosophy" {% if request.path == '/phylosophy' %}class="active"{% endif %}> philosophy </a> </li> <li><a href="/product-cream"><u>{% trans 'product' %}</u></a></li> <li><a href="/contacts"><u>{% trans 'contact' %}</u></a></li> <li><a href="/news"><u>{% trans 'news' %}</u></a></li> <!-- <li><a href="#"><u> {% trans '(store)' %}</u></a></li> --> </ul> </div>

    Есть навигационное меню, когда я нахожусь в указанном разделе, к ссылке должен добавляться класс active, но не добавляется.
    И ещё я не могу разобраться как мне убирать тег u, когда ссылка активна, в данном случае он не нужен.

    Как сделать подсветку активного пункта меню? — Хабр Q&A

    Как сделать подсветку активного пункта меню, тоесть что бы либо при клике на пункт, либо при скроле на нужну страницу, в главном меню, активный пункт менялся?
    <ul> <li> <a href="#"><span>Главная</span></a> </li> <li> <a href="#team"><span>Пункт1</span></a> </li> <li> <a href="#"><span>Пункт2</span></a> </li> <li> <a href="#"><span>Пункт3</span></a> </li> <li> <a href="#"><span>Пункт4</span></a> </li> </ul>
    .navbar { min-height: 200px; font-size: 16px; text-transform: uppercase; } .nav-item .nav-link { color: #fff !important; } .navbar-nav .nav-link span:hover { border-bottom: 1px solid #fff; } .navbar-nav .active > .nav-link span { font-size: 18px; line-height: 22px; font-weight: bold; border-bottom: 2px solid #fff; color: #fff !important; }

    Создание меню с помощью CSS и HTML

    Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.

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

    Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором "navbar". Каждый элемент <li> нашего списка будет содержать по одной ссылке:

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

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

    
 #navbar {
 margin: 0;
 padding: 0;
 list-style-type: none;
 width: 100px;
 }
 

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

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

    
 #navbar a {
 background-color: #949494;
 color: #fff;
 padding: 5px;
 text-decoration: none;
 font-weight: bold;
 border-left: 5px solid #33ADFF;
 display: block;
 }
 #navbar li {
 border-left: 10px solid #666;
 border-bottom: 1px solid #666;
 }
 

    Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

    <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Название документа</title>
 <style>
 #navbar {
 margin: 0;
 padding: 0;
 list-style-type: none;
 width: 100px;
 }
 #navbar li {
 border-left: 10px solid #666;
 border-bottom: 1px solid #666;
 }
 #navbar a {
 background-color: #949494;
 color: #fff;
 padding: 5px;
 text-decoration: none;
 font-weight: bold;
 border-left: 5px solid #33ADFF;
 display: block;
 }
 </style>
 </head>
 
 <body>
 
 <ul>
 <li><a href="#">Главная</a></li>
 <li><a href="#">Новости</a></li>
 <li><a href="#">Контакты</a></li>
 <li><a href="#">О нас</a></li>
 </ul>
 
 </body>
 </html>
    Попробовать »

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

    Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:

    
 #navbar a:hover {
 background-color: #666;
 border-left: 5px solid #3333FF;
 }
 
    Попробовать »

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

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

    Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов <li> нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.

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

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

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

    
 #navbar {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }
 #navbar li { display: inline; }
 
    Попробовать »

    Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

    
 #navbar {
 margin: 0;
 padding: 0;
 list-style-type: none;
 border: 2px solid #0066FF;
 border-radius: 20px 5px;
 width: 550px;
 text-align: center;
 background-color: #33ADFF;
 }
 #navbar a {
 color: #fff;
 padding: 5px 10px;
 text-decoration: none;
 font-weight: bold;
 display: inline-block;
 width: 100px;
 }
 #navbar a:hover {
 border-radius: 20px 5px;
 background-color: #0066FF;
 }
 
    Попробовать »

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

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

    Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

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

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

    
 <ul>
 <li><a href="#">Главная</a></li>
 <li><a href="#">Новости</a></li>
 <li><a href="#">Контакты</a>
 <ul>
 <li><a href="#">Адрес</a></li>
 <li><a href="#">Телефон</a></li>
 <li><a href="#">Email</a></li>
 </ul>
 </li>
 <li><a href="#">О нас</a></li>
 </ul>
 
    Попробовать »

    Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент <li> список снова был преобразован в блочный элемент:

    
 #navbar ul { display: none; }
 #navbar li:hover ul { display: block; }
 

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

    
 #navbar, #navbar ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }
 #navbar li { float: left; }
 #navbar ul li { float: none; }
 

    Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

    #navbar ul {
 display: none;
 position: absolute;
 top: 100%;
 }
 #navbar li {
 float: left;
 position: relative;
 }
 #navbar { height: 30px; }
 
    Попробовать »

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

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

    
 #navbar ul {
 display: none;
 background-color: #f90;
 position: absolute;
 top: 100%;
 }
 #navbar li:hover ul { display: block; }
 #navbar, #navbar ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }
 #navbar {
 height: 30px;
 background-color: #666;
 padding-left: 25px;
 min-width: 470px;
 }
 #navbar li {
 float: left;
 position: relative;
 height: 100%;
 }
 #navbar li a {
 display: block;
 padding: 6px;
 width: 100px;
 color: #fff;
 text-decoration: none;
 text-align: center;
 }
 #navbar ul li { float: none; }
 #navbar li:hover { background-color: #f90; }
 #navbar ul li:hover { background-color: #666; }
 
    Попробовать »

    грамотная навигация сайта с помощью стилей

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

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

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

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

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Узнать подробнее

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

    <nav role="navigation"> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </nav>

    <nav role="navigation">

      <ul>

        <li><a href="#">One</a></li>

        <li><a href="#">Two</a></li>

        <li><a href="#">Three</a></li>

      </ul>

    </nav>

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

    <nav role="navigation"> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a> <ul> <li><a href="#">Sub-1</a></li> <li><a href="#">Sub-2</a></li> <li><a href="#">Sub-3</a></li> </ul> </li> <li><a href="#">Three</a></li> </ul> </nav>

    <nav role="navigation">

      <ul>

        <li><a href="#">One</a></li>

        <li><a href="#">Two</a>

          <ul>

            <li><a href="#">Sub-1</a></li>

            <li><a href="#">Sub-2</a></li>

            <li><a href="#">Sub-3</a></li>

          </ul>

        </li>

        <li><a href="#">Three</a></li>

      </ul>

    </nav>

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

    li { display: block; transition-duration: 0.5s; } li:hover { cursor: pointer; } ul li ul { visibility: hidden; opacity: 0; position: absolute; transition: all 0.5s ease; margin-top: 1rem; left: 0; display: none; } ul li:hover > ul, ul li ul:hover { visibility: visible; opacity: 1; display: block; } ul li ul li { clear: both; width: 100%; }

    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

    li {

    display: block;

    transition-duration: 0.5s;

    }

     

    li:hover {

      cursor: pointer;

    }

     

    ul li ul {

      visibility: hidden;

      opacity: 0;

      position: absolute;

      transition: all 0.5s ease;

      margin-top: 1rem;

      left: 0;

      display: none;

    }

     

    ul li:hover > ul,

    ul li ul:hover {

      visibility: visible;

      opacity: 1;

      display: block;

    }

     

    ul li ul li {

      clear: both;

      width: 100%;

    }

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

    Проблема

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

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

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

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

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

    Решение: «:focus-inside»

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

    ul li:hover > ul, ul li:focus-within > ul, ul li ul:hover { visibility: visible; opacity: 1; display: block; }

    ul li:hover > ul,

    ul li:focus-within > ul,

    ul li ul:hover {

      visibility: visible;

      opacity: 1;

      display: block;

    }

    Замечательно! Это работает!

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

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Узнать подробнее

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

    a:hover, a:focus { ... }

    a:hover,

    a:focus {

      ...

    }

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

    li:hover, li:focus-within { ... }

    li:hover,

    li:focus-within {

      ...

    }

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

    li:focus-within a { outline: none; }

    li:focus-within a {

      outline: none;

    }

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

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

    Что насчет ARIA?

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

    <nav role="navigation"> <ul> <li><a href="#">One</a></li> <li><a href="#" aria-haspopup="true">Two</a> <ul aria-label="submenu"> <li><a href="#">Sub-1</a></li> <li><a href="#">Sub-2</a></li> <li><a href="#">Sub-3</a></li> </ul> </li> <li><a href="#">Three</a></li> </ul> </nav>

    <nav role="navigation">

      <ul>

        <li><a href="#">One</a></li>

        <li><a href="#" aria-haspopup="true">Two</a>

          <ul aria-label="submenu">

            <li><a href="#">Sub-1</a></li>

            <li><a href="#">Sub-2</a></li>

            <li><a href="#">Sub-3</a></li>

          </ul>

        </li>

        <li><a href="#">Three</a></li>

      </ul>

    </nav>

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

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

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

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

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

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

    Автор: Una Kravets

    Источник: //css-tricks.com/

    Редакция: Команда webformyself.

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Узнать подробнее

    PSD to HTML

    Практика верстки сайта на CSS Grid с нуля

    Смотреть

    Создаем выпадающее меню на чистом CSS

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


    Исходный код
    Демо

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

    <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">WordPress</a></li> <li><a href="#">Graphic Design</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav>

    Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:

    /* задаем цвет фона для контейнера nav. */ nav { margin: 100px 0; background-color: #E64A19; } /* убираем отступы и поля, а также list-style для "ul", * и добавляем "position:relative" */ nav ul { padding:0; margin:0; list-style: none; position: relative; } /* применяем inline-block позиционирование к элементам навигации */ nav ul li { margin: 0px -7px 0 0; display:inline-block; background-color: #E64A19; } /* стилизуем ссылки */ nav a { display:block; padding:0 10px; color:#FFF; font-size:20px; line-height: 60px; text-decoration:none; } /* изменяем цвет фона при наведении курсора */ nav a:hover { background-color: #000000; }

    После применения стилей у нас должно получиться нечто вроде этого:


    Чтобы добавить выпадающий список к какому-либо из элементов HTML меню, нам нужно добавить <ul> внутрь элемента <li> для пункта, в котором нужно скрыть выпадающий список:
    <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">WordPress</a> <!-- первый уровень выпадающего списка --> <ul> <li><a href="#">Themes</a></li> <li><a href="#">Plugins</a></li> <li><a href="#">Tutorials</a></li> </ul> </li> <li><a href="#">Graphic Design</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav>

    Мы добавили новый неупорядоченный список с тремя пунктами списка внутрь второго элемента <li>, который отвечает за пункт меню WordPress. Обратите внимание на то, что мы добавили <ul> после анкорного тега (<a>).

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

    /* скрываем выпадающие списки по умолчанию * и задаем абсолютное позиционирование */ nav ul ul { display: none; position: absolute; top: 100%; } /* отображаем выпадающий список при наведении */ nav ul li:hover > ul { display:inherit; } /* первый уровень выпадающего списка */ nav ul ul li { min-width:170px; float:none; display:list-item; position: relative; }

    Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню «WordPress» должны увидеть выпадающий список с тремя другими пунктами («Themes», «Plugins», «Tutorials»):


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

    Взгляните на приведенный ниже HTML-код, в котором мы добавляем второй уровень выпадающего списка к пункту меню «Tutorial», который находится внутри пункта «WordPress»:

    <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">WordPress</a> <!-- первый уровень выпадающего списка --> <ul> <li><a href="#">Themes</a></li> <li><a href="#">Plugins</a></li> <li><a href="#">Tutorials</a> <!-- второй уровень выпадающего списка --> <ul> <li><a href="#">Stuff</a></li> <li><a href="#">Things</a></li> <li><a href="#">Other Stuff</a></li> </ul> <!—конец второго уровня выпадающего списка --> </li> </ul> <!—конец первого уровня выпадающего списка --> </li> <li><a href="#">Graphic Design</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav>

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

    /* второй, третий и последующие уровни * смещаем 2 и 3 уровни влево * на значение длины первого уровня. */ nav ul ul ul { position: absolute; top:0; left:100%; }

    Если все сделано правильно, у вас должно получиться нечто вроде этого:


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

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

    Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+»):

    /* измените ' +' на любой другой символ, если нужно */ li > a:after { content: ' +'; } li > a:only-child:after { content: ''; }

    Для этого мы используем псевдоэлемент CSS3 (:only-child). В данном случае он проверяет, имеются ли в тегах <li> родительского элемента другие элементы. Если нет, то знак плюса просто убирается, так как по умолчанию он присутствует рядом со всеми пунктами. Видите + возле пунктов WordPress и Tutorials?


    Значит, вы все сделали правильно.

    В завершение

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

    А как вы сделали меню на HTML? Пожалуйста, расскажите об этом в комментариях.

    Данная публикация представляет собой перевод статьи «How to Create a Pure CSS Dropdown Menu» , подготовленной дружной командой проекта Интернет-технологии.ру

    css - изменить пункты меню выделения при наведении на подчеркивание при наведении на wordpress

    Переполнение стека
    1. Около
    2. Продукты
    3. Для команд
    1. Переполнение стека Общественные вопросы и ответы
    2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
    3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
    4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
    5. Реклама Обратитесь к разработчикам и технологам со всего мира
    6. О компании

    Загрузка…

      .

      javascript - Как выделить элемент при наведении?

      Переполнение стека
      1. Около
      2. Продукты
      3. Для команд
      1. Переполнение стека Общественные вопросы и ответы
      2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
      3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
      4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
      .

      css - HTML - Показать меню при наведении курсора

      Переполнение стека
      1. Около
      2. Продукты
      3. Для команд
      1. Переполнение стека Общественные вопросы и ответы
      2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
      .

      html - Подменю отображения CSS при наведении на пункт меню

      Переполнение стека
      1. Около
      2. Продукты
      3. Для команд
      1. Переполнение стека Общественные вопросы и ответы
      2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
      3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
      4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
      5. Реклама Обратитесь к разработчикам и технологам со всего мира
      6. О компании

      Загрузка…

      .

      гиперссылка - выделить активный пункт меню с помощью jquery

      Переполнение стека
      1. Около
      2. Продукты
      3. Для команд
      1. Переполнение стека Общественные вопросы и ответы
      2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
      3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
      4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
      5. Реклама Обратитесь к разработчикам и технологам со всего мира
      6. О компании

      Загрузка…

      .

      css - Как создать меню, которое появляется при наведении курсора?

      Переполнение стека
      1. Около
      2. Продукты
      3. Для команд
      1. Переполнение стека Общественные вопросы и ответы
      2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
      .

      Смотрите также