Выпадающее меню на HTML / CSS без использования JavaScript

Очень часто необходимо сделать на сайте выпадающее при наведении меню. Большинство веб-девелоперов используют для этого JavaScript / Jquery. Это конечно хорошо, но такого роди задачи легко решаются с помощью HTML / CSS.

Вот простой пример HTML-кода меню:

<ul>
    <li><a href=#>Menu 1</a>
        <ul>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 2</a>
        <ul>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 3</a>
        <ul>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 4</a>
        <ul>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 5</a>
        <ul>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
        </ul>
    </li>
</ul>
 
 

Для построения меню был использован список с классом menu. Подменю сделаны списками с классом submenu.

Теперь давайте как-нибудь минимально оформим наше меню стилями:

body {
    font: 14px 'Verdana';
    margin: 0;
    padding: 0;
}
ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul:after {
    display: block;
    content: ' ';
    clear: both;
    float: none;
}
ul.menu > li {
    float: left;
    position: relative;
}
ul.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.menu > li > a:hover {
    background-color: black;
}
ul.submenu {
    display: none;
    position: absolute;
    width: 120px;
    top: 37px;
    left: 0;
    background-color: white;
    border: 1px solid red;
}
ul.submenu > li {
    display: block;
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.submenu > li > a:hover {
    text-decoration: underline;
}
 

Для класса submenu было установлено свойство ‘display: none’. Это позволило на спрятать наше выпадающее меню.

Теперь добавим в CSS такой код:

ul.menu > li:hover > ul.submenu {
    display: block;
}

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

Вот и все. Просто и легко без JavaScript.

www.mobila.name

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

От автора: реализация выпадающего меня с помощью 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

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

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

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

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

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

PSD to HTML

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

Смотреть

webformyself.com

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

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

Выпадающее меню со списком элементов на HTML

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

Конечно, подобную проблему можно решить многими способами, но я бы рекомендовал обходиться без дополнительного JS-кода (и jQuery).

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

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

<ul>
    <li><a href=#>Меню №1</a>
        <ul>
            <li><a href=#>Субменю №1 первого меню</a></li>
        </ul>
    </li>
    <li><a href=#>Меню №2</a>
        <ul>
            <li><a href=#>Субменю №2 второго меню</a></li>
            <li><a href=#>Субменю №2 второго меню</a></li>
        </ul>
    </li>
    <li><a href=#>Меню №3</a>
        <ul>
            <li><a href=#>Субменю №3 третьего меню</a></li>
            <li><a href=#>Субменю №3 третьего меню</a></li>
            <li><a href=#>Субменю №3 третьего меню</a></li>
        </ul>
    </li>
</ul>

Первый шаг к нашему выпадающему списку в меню сделан и вот что получилось. Результат:

Мда. Пока не очень, да? Обычный список какой-то (похож на этот), ведь классы menu и submenu я использовал, а стили не написал.

Добавлю немного CSS-магии. Пропишу прямо в html-файле — в <head><style></style></head>. CSS-код:

body {
    /* Убираю отступы. */
    margin:0px;
    /* Убираю еще отступы. */
    padding:0px;
    /* Задаю шрифт. */
    font: 14px ‘Verdana’;
}
ul {
    /* Убираю маркеры у списка*/
    list-style: none;
    /* Делаю элементы блочными. */
    display: block;
    /* Убираю отступы. */
    margin:0px;
    /* Убираю еще отступы! */
    padding:0px;
}
ul:after {
    /* Делаю элементы блочными. */
    display: block;
    /* Убираю выравнивание. */
    float: none;
    content: ‘ ‘;
    clear: both;
}
ul.mmenuu > li {
    /* Задаю выравнивание и позиционирование. */
    float: left;
    /* Считаем координаты относительно исходного места*/
    position: relative;
}
ul.mmenuu > li > a {
    /* Делаю элементы блочными: */
    display: block;
    /* Задаю белый цвет. */
    color: #fff;
    /* Задаю отступ 10px. */
    padding: 10px;
    /* Убираю форматирование*/
    text-decoration: none;
    /* Задаю цвет. */
    background-color: #da570f;
}
ul.mmenuu > li > a:hover {
    /* Задаю цвет при наведении. */
    background-color: #eb9316;
}
ul.ssubmenuu {
    position: absolute;
    width: 240px;
    top: 37px;
    left:0px;
    /* Делаю субменю скрытыми. */
    display: none;
    /* Цвет — белый. */
    background-color: white;
}
ul.ssubmenuu > li {
    /* Блочное расположение элементов*/
    display: block;
}
ul.ssubmenuu > li > a {
    /* Делаю элементы блочными. */
    display: block;
    /* Убираю форматирование*/
    text-decoration: none;
    /* Задаю отступ. */
    padding: 10px;
    /* Задаю цвет. */
    color: #ffffff;
    /* Еще цвет. */
    background-color: #da570f;
}
ul.ssubmenuu > li > a:hover {
    /* Цвет бэкграунда при наведении. */
    background-color: #eb9316;
    /* Задаю подчеркивание*/
    text-decoration: underline;
}
ul.mmenuu > li:hover > ul.ssubmenuu {
    /* Делаю элементы блочными. */
    display: block;
}

Результат:

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

Выпадающий при наведении список меню на HTML

И снова мы изобретаем меню на чистом CSS, без использования JS.

<ul>
<li><a href=»#»>Раздел меню №1</a></li>
<li><a href=»#»>Раздел меню №2</a>
    <ul>
        <li><a href=»#»>Подраздел №1 второго меню</a></li>
        <li><a href=»#»>Подраздел №2 второго меню</a></li>
    </ul>
</li>
<li><a href=»#»>Раздел меню №3</a>
    <ul>
        <li><a href=»#»>Подраздел №1 третьего меню</a></li>
        <li><a href=»#»>Подраздел №2 третьего меню</a></li>
        <li><a href=»#»>Подраздел №3 третьего меню</a></li>
    </ul>
</li>      
</ul>

Учитывая то, что вы видели в предыдущей части статьи, думаю выглядит многообещающе. А все благодаря чему? Потому что мы умеем присваивать нужным элементам стиль «display:none» и прописывать в CSS чтобы при наведении на него приоритетным было что-то типа «inline-block» взамен «none».

Давайте немного подробнее остановимся на вышеприведенном коде. В нем я присвоил «id=»menu»» основному списку, то есть всему выпадающему меню. Я сделал это для того чтобы обозначить сразу родительские элементы выпадающего списка и сделать их видимыми.

Дальше. В каждый из разделов я вложил дополнительные списки <ul>, которые содержат в себе выпадающие ссылки (см. также как вставить ссылку в HTML). Они будут появляться при наведении.

Перейдем к CSS. Код:

>
    /* Обнуляю отступы и убираю маркеры у списков. */
    ul, li {
        margin:0;
        padding:0;
        list-style-type:none;  
    }

    /* Задаю параметры для основного, родительского блока, меню выпадающего списка. */
    #menu {
        display:block;
        position:absolute;
        top:20px;
        left:20px;

    }

    /* Задаю стили для блоков выпадающего списка. */
    #menu > li {
        display:inline-block;
        height:20px;
    /* Считаем координаты относительно исходного места. */
        position:relative;
    }

    /* Задаю стили, чтобы скрыть дочерние блоки выпадающего списка. Ну и немного украшаю. */
    #menu > li > ul {
        position:absolute;
        top:20px;
        left: 10px;
        display:none;
        background-color: bisque;
        border-radius: 5px;
        width: 185px;
        font-size: 14px;
        padding: 10 0 10 10;
    }

    /* Так я делаю прежде скрытую часть видимой — при наведении курсора. */
    #menu > li:hover > ul {
        display:block;  
    }
</style>

Результат:

Что хочу отметить дополнительно.

«#menu > li» означает, что стили будут применены только к дочерним элементам по отношению к тегу «ul#menu», а не ко всем как могли подумать некоторые. Внимательнее!

«Position: relative;» — отсчитывает координаты от угла одного из разделов в главном списке, откуда выпадают дочерние элементы.

Последнее: выпадающий список по примеру выше на HTML (см. также особенности HTML) и CSS в оформлении меню сайта это удобная вещь. Для ПК и десктопов. На мобильных устройствах и планшетах нет мышки и курсоров, поэтому такой вариант не подойдет.

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

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

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

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

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

Код:

<ul>
    <li>
        <a href=»#» title=»Здесь ссылка на главную»>Главная</a>
    </li>
    <li>
        <a href=»#» title=»Здесь информация о компании»>О нас</a>
        <ul>
            <li><a href=»#»>Суперпродукты</a></li>
            <li><a href=»#»>Суперкоманда</a></li>
        </ul>
    </li>
    <li>
        <a href=»#» title=»Здесь будут ваши услуги»>Услуги</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=»#» title=»Здесь разместите ссылки на ваши продукты»>Продукты</a>
        <ul>
            <li><a href=»#»>Суперсылка №1</a></li>
            <li><a href=»#»>Суперсылка №2</a></li>
            <li><a href=»#»>Суперсылка №3</a></li>
            <li><a href=»#»>Суперсылка №4</a></li>
        </ul>
    </li>
    <li>
        <a href=»#» title=»Здесь напишите свои контакты»>Контакт</a>
        <ul>
            <li><a href=»#»>Время работы</a></li>
            <li><a href=»#»>Месторасположение</a></li>
            <li><a href=»#»>Выпадающий список 10/10!</a></li>
        </ul>
    </li>
</ul>

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

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

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

CSS-код, помещенный в <head> страницы:

#nnavv{
    /* По левому краю выравниваю! */
    float:left;
    /* Отступ. */
    margin-bottom: 10;
    /* Задаю ширину. */
    width:500px;
    /* Убираю маркеры*/
    list-style: none;
    /* Шрифт — жирным*/
    font-weight: bold;
}
#nnavv li{
    /* Выравнивание! */
    float: left;
    /* Делаю элементы блочными. */
    display: block;
    /* Отступ. */
    margin-right: 10;
    /* Позиционирование относительно исходного места! */
    position: relative;
}
#nnavv li a{
    /* Цвет бэкграунда. */
    background: #333;
    /* Делаю элементы блочными. */
    display: block;
    /* Отступы. */
    padding: 5;
    /* Цвет ссылки. */
    color: #fff;
    /* Форматирование текста*/
    text-decoration:none;
    /* Задаю скругленные углы на 2 пиксела*/
    -moz-border-radius: 2;
    -webkit-border-radius: 2;
    border-radius: 2;
    /* Тень для визуальной приподнятости текста*/
    text-shadow:1px 1px 1px rgba(0,0,0,0.74);
}
#nnavv li a:hover{
    /* Подчеркну ссылку при наведении*/
    text-decoration: underline;
    /* Задам фон. */
    background: #6b0c33;
    /* Цвет ссылки остается прежним*/
    color: #fff;
    background: rgba(108,13,53,0.74); /* Заставляю выглядеть полупрозрачным! */
}
/* НАСТРАИВАЕМ ВЫПАДАЮЩИЕ ЭЛЕМЕНТЫ!!! */
#nnavv ul{
    /* Убираю маркеры у выпадающего списка*/
    list-style:none;
    left:-9999px; /* Убираю ненужно за пределы экрана (говорят, это на 95% лучше чем «display:none;», т.к. дисплей нон некоторые программы игнорируют). */
    opacity:0; /* При помощи прозрачности, скрываем <ul>. */
    /* Делаем так, чтобы Webkit плавно показывал нам всплывающие элементы выпадающего списка при наведении мышки. */
    -webkit-transition: 0.24s linear opacity;
    position:absolute;
}
#nnavv ul li{
    /* Здесь я задаю отступ между элементами &lt;li&gt;. Это необходимо для разделения пунктов меню, его не было в предыдущей части статьи (просто забыл)*/
    padding-top: 1px;
    float:none;
}
#nnavv ul a{
    /* Делаю элементы блочными. */
    display:block;
    /* Запрещаю перенос строк текста на новую строку, чтобы создавался многострочный выпадающий элемент списка. */
    white-space: nowrap;
}
#nnavv li:hover ul{ /* Создаю выпадающий пункт, который появится при наведении. */
    left:0; /* Возвращаю его обратно на экран пользователя, — когда нужно. */
    opacity:1; /* Убираю прозрачность*/
}
#nnavv li:hover a{ /* В этом стиле я устанавливаю свойства для элементов верхнего уровня, — в то время, когда показывается выпадающий список. */
    /* Подчеркну*/
    text-decoration:underline;
    /* Сделаю полупрозрачным. */
    background:rgba(109,15,53,0.74);
    background:#6b0c36;
}
#nnavv li:hover ul a{ /* Поменял некоторые стили первого уровня при появлении выпадающего элемента. */
    /* Уберу форматирование*/
    text-decoration:none;
    -webkit-transition:-webkit-transform 0.077s linear;
}
#nnavv li:hover ul li a:hover{ /* Здесь я задаю стили для конкретных выпадающих пунктов, при наведении на них курсора — чтобы они отличались от тех элементов, куда курсор не попадает*/
    -moz-transform:scale(1.07);
    -webkit-transform:scale(1.07);
    /* Задам цвет фона выпадающего элемента*/
    background:#334;
    background:rgba(50,50,50,0.74); /* Сделаю полупрозрачным. */
    text-decoration:underline;
}

Готово! Финальный результат:

БОНУС — суперкрутой выпадающий список на ХТМЛ и ЦСС

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

Тоже делаем список со ссылками, отображающимися при наведении. Никаких анимаций, модных выездов, мигания — только чистый кроссбраузерный код, простой и эффективный. Вместо «display:none;» использую «left: -9999px;». Ну там сами увидите.

HTML код:

<ul>
    <li>
    <a href=»/»>Красноярский край</a>
        <ul>
            <li><a href=»/»>Минусинск</a></li>
            <li><a href=»/»>Ачинск</a></li>
            <li><a href=»/»>Красноярск</a></li>
            <li><a href=»/»>Железногорск</a></li>
            <li><a href=»/»>Канск</a></li>
            <li><a href=»/»>Норильск</a></li>
        </ul>
    </li>

    <li>
    <a href=»/»>Свердловская область</a>
        <ul>
            <li><a href=»/»>Екатеринбург</a></li>
            <li><a href=»/»>Верхняя Пышма</a></li>
            <li><a href=»/»>Нижний Тагил</a></li>
            <li><a href=»/»>Первоуральск</a></li>
            <li><a href=»/»>Асбест</a></li>
            <li><a href=»/»>Каменск-Уральский</a></li>
        </ul>
    </li>
</ul>

Скриншот результата:

CSS-код, который я поместил в <head>:

ul.ddropdownn li {/* Считаем координаты относительно исходного места. */ position: relative; }
ul.ddropdownn, ul.ddropdownn-inside {
    /* Отступы на нуле. */
    padding: 0;
    /* Маркеры уберем. */
    list-style-type: none;
    }
ul.ddropdownn-inside {
    /* Спрячем дочерние элементы выпадающего списка. */
    left: -9999px;
    position: absolute;
    }
ul.ddropdownn li.ddropdownn-top {
    /* Небольшой отступ. */
    margin: 0 1px 0 0;
    /* Выравнивание по левой стороне. */
    float: left;
    display: inline;
    }
ul.ddropdownn li.ddropdownn-top a {
    /* Делаю элементы блочными. */
    display: block;
    /* Снова отступы. */
    padding: 3px 10px 4px;
    }
ul.ddropdownn a.ddropdownn-top {/* Цвет фона. */ background: #efefef; }
ul.ddropdownn a.ddropdownn-top:hover {/* Отступы. */ padding: 3px 10px 4px; }
ul.ddropdownn li.ddropdownn-top:hover .ddropdownn-inside {
    left: 0;
    /* Делаю элементы блочными. */
    display: block;
    }
ul.ddropdownn .ddropdownn-inside {/* Цвет фона. */ background: #ffffff; }
ul.ddropdownn .ddropdownn-inside a:hover {/* Цвет фона изменится при наведении. */ background: #efefef; }

Результат (без наведения курсора):

Результат (при наведении курсора):

Итоги: скачать готовый html+css код выпадающего списка меню

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

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

Я подготовил для вас архив, который вы можете скачать. Там все 4 выпадающих списка — html код и css стили прямо в файле. Там думаю разберетесь.

Превью содержимого файла:

Скачать:

blogwork-menu-list-archive.zip (2,97КБ)

P.S. Ну а если вы вдруг неправильно написали поисковый запрос и зашли не туда (не нашли то чего нужно), не расстраивайтесь — у меня есть пара видео, где при помощи <select> и <option> в HTML страницу вставляются выпадающие списки. Видео 1:

Видео 2:

blogwork.ru

Как сделать в css выпадающее меню? Пошаговая инструкция

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

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

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

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

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

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

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

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

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

<nav id = «nav»> <ul> <li><a href = «#»>Пункт 1</a> <ul class = «second»> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li> <li><a href = «#»>Пункт 2</a> <ul class = «second»> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li> <li><a href = «#»>Пункт 3</a> <ul class = «second»> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li> <li><a href = «#»>Пункт 4</a> <ul class = «second»> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li> </ul> </nav>

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

<nav id = «nav»> <ul> <li><a href = «#»>Пункт 1</a> <ul class = «second»> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li> <li><a href = «#»>Пункт 2</a> <ul class = «second»> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li> <li><a href = «#»>Пункт 3</a> <ul class = «second»> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li> <li><a href = «#»>Пункт 4</a> <ul class = «second»> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li> </ul> </nav>

Я понимаю, что она огромна. В этом-то и проблема вложенных списков, что требуется писать много кода. Но учитывайте тот факт, что мы делаем 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%; }

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

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

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

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

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

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

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

<li><a href = «#»>Пункт 4</a> <ul class = «second»> <li><a href = «#»>Подпункт</a> <ul class = «third»> <li><a href = «#»>Подпункт подпункта</a></li> <li><a href = «#»>Подпункт подпункта</a></li> </ul> </li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li>

<li><a href = «#»>Пункт 4</a> <ul class = «second»> <li><a href = «#»>Подпункт</a> <ul class = «third»> <li><a href = «#»>Подпункт подпункта</a></li> <li><a href = «#»>Подпункт подпункта</a></li> </ul> </li> <li><a href = «#»>Подпункт</a></li> <li><a href = «#»>Подпункт</a></li> </ul> </li>

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

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

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

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

Внимание! Чтобы абсолютное позиционирование работало для списка third, у списков second должно быть задано относительное позиционирование. Но как, если мы же задавали для него абсолютное позиционирование?

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

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

В общем, итог таков:

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

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

Итог

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

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

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

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

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com

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

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

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

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

<ul>
  <li><a href="#">пункт 1</a>
    <ul>
      <li><a href="#">пункт 1.1</a></li>
      <li><a href="#">пункт 1.2</a></li>
    </ul>
  </li>
  <li><a href="#">пункт 2</a>
    <ul>
      <li><a href="#">пункт 2.1 многа букаф</a></li>
      <li><a href="#">пункт 2.2</a>
        <ul>
          <li><a href="#">пункт 2.2.1</a></li>
          <li><a href="#">пункт 2.2.2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">пункт 3</a></li>
  <li><a href="#">пункт 4</a></li>
  <li><a href="#">пункт 5</a></li>
</ul>

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

ul.nav li ul {display: none;}

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

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

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

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

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

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

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

/* Вертикальное выпадающее меню*/
body{
  background: #DCDCDC;
}
/*блок меню*/
ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border: 1px solid #FFFFFF;
  list-style: none;
  width: 150px;         /*ширина блока меню*/
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}

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

ul.nav li:hover {
  /* позиционирование вложенных элементов
   * будет расчитыватьться относительно
   * родительского элемента
   */
  position: relative;
  background: yellow;
}
ul.nav li:hover > ul {
  display: block;
}
ul.nav li:hover ul{
  position: absolute;
  top: 0;       /*Задаём координаты для вложенных пунктов*/
  left: 150px; /*меню раскрывается вправо*/
}

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

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

/*Горизонтальное выпадающее меню с одним уровнем вложенности*/

body{
  background: #DCDCDC;
}

/* Блок меню*/

ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border-right: 1px solid #FFFFFF;
  float: left; /*делаем меню горизонтальным*/
  height: 30px;
  list-style: none;
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}
ul.nav li:hover {
  background: yellow;
}
/*Выпадающее меню*/
ul.nav {
  position: relative;
  background: #B3B3FF;
  height: 30px;
  width: 600px;
}
ul.nav li:hover > ul {
  background: #D0E0FF;
  border-top: 1px solid white;
  display: block;
  width: 600px;
  position: absolute;
  top: 30px;
  left: 0;
}

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

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

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

body{
  background: #DCDCDC;
}

/* Блок меню*/
ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border-right: 1px solid #FFFFFF;
  float: left; /*делаем меню горизонтальным*/
  height: 30px;
  list-style: none;
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}
ul.nav { /*задаём высоту и ширину меню*/
  background: #B3B3FF;
  height: 30px;
  width: 600px;
}

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

ul.nav li:hover {
  background: yellow;
  position: relative;
}
ul.nav li:hover > ul {
  border-top: 1px solid white;
  display: block;
  position: absolute;
  top: 30px; /*первый уровень меню раскрывается вниз*/
  left: 0;
}
/*Второй и последующие уровни вложенности*/
ul.nav li ul li{
  border-bottom: 1px solid white;
  height: auto;
  width: 150px;
}
ul.nav li:hover ul li ul{
  position: absolute;
  top: 0;
  left: 150px; /*второй и последующие уровни расскрываются вправо*/
}

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

webonlife.ru

Как создать выпадающее меню с помощью HTML и CSS

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

1. Создание раздела навигации. Как правило, мы используем для главной панели навигации сайта тег <nav>, <header> — для более узких разделов или <div>, если нет других вариантов. Поместите этот код в элемент <div>, чтобы можно было задать стили для всего меню:

<div>
 <nav>
     </nav>
</div>

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

<div>
<nav>
</nav>
</div>

3. Добавьте список пунктов меню. Неупорядоченный список (<ul>) содержит пункты главного меню (<li>), на которые пользователи будут наводить курсор мыши, чтобы вывести выпадающее меню. Добавьте класс «clearfix» для элементов списка. Мы вернемся к этому позже в разделе CSS:

<div>
   <nav>
<ul>
   <li>Home</li>
              <li>Contributors</li>
         <li>Contact Us</li>
 </ul>
   </nav>
</div>

4. Добавление ссылок. Теперь нужно добавить ссылки на страницы соответствующих разделов. Даже если они не содержат ссылок на что-то, добавьте ссылки на несуществующий анкор (например, «#!»), чтобы курсор пользователя менял внешний вид при наведении на них. В этом примере пункт Contact Us никуда не ведет, но остальные два пункта раскрывающегося списка HTML CSS содержат ссылки на конкретные разделы:

<div>
   <nav>
      <ul>
       <li><a href="/">Home</a></li>
         <li><a href="/Contributors">Contributors</a>
         </li>
         <li><a href="#!">Contact Us</a>
         </li>
      </ul>
   </nav>
 </div>

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

<div>
   <nav>
      <ul>
         <li><a href="/">Home</a></li>
         <li><a href="/Contributors">Contributors</a>
         <ul>
            <li><a href="/jordan">Michael Jordan</a></li>
            <li><a href="/hawking">Stephen Hawking</a></li>
         </ul>
         </li>
         <li><a href="#!">Contact Us</a>
         <ul>
            <li><a href="mailto:[email protected]">Report a Bug</a></li>
            <li><a href="/support">Customer Support</a></li>
         </ul>
         </li>
      </ul>
   </nav>
</div>

1. Откройте CSS. Разместите ссылку на CSS стили в разделе <head> HTML-документа, если вы еще этого не сделали. В этой статье мы не будем касаться основных свойств CSS, таких как настройка шрифта и цвет фона:

2. Добавьте код clearfix. Помните класс «clearfix«, который мы добавили к списку меню? Как правило, элементы HTML раскрывающегося списка имеют прозрачный фон и могут раздвигать другие элементы. Несложная настройка CSS поможет исправить эту проблему. Вот простое и красивое решение, хотя оно не поддерживается в Internet Explorer 7 и более ранних версиях:

.clearfix:after {
content: "";
display: table;
}

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

.nav-wrapper {
   width:100%;
   background: #999;
}

.nav-menu {
   position:relative;
   display:inline-block;
}

.nav-menu li {
   display: inline;
   list-style-type: none;
}

.sub-menu {
   position:absolute;
   display:none;
   background: #ccc;
}

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

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

Если пункты древовидного раскрывающегося списка HTML меню ведут к дополнительным подчиненным выпадающим меню, то любые свойства, добавляемые здесь, будут влиять на них. Если вы хотите задать стиль только для выпадающих меню первого уровня, используйте вместо этого «.nav-menu > ul«:

5. Маркирование выпадающих меню стрелками. Веб-дизайнеры, как правило, показывают, что элемент содержит вложенное выпадающее меню, с помощью стрелки вниз. Следующий код добавляет стрелку к каждому элементу меню:

.nav-menu > ul > li:after {
   content: "25BC"; /*escaped unicode for the down arrow*/
   font-size: .5em;
   display: inline;
   position: relative;
   }

Изменить положение стрелки можно с помощью свойств up, bottom, right или left.

Если не все пункты раскрывающегося списка HTML содержат вложенные выпадающие меню, не задавайте стиль для всего класса nav-menu. Вместо этого добавьте еще один класс (например, dropdown) для каждого элемента li, к которому нужно добавить стрелку. Укажите этот класс, а не приведенный в коде выше:

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

• Если вы хотите добавить выпадающее меню в форму, HTML 5 позволяет легко сделать это с помощью элемента ;
• Ссылка <a href=»#»> прокручивает страницу вверх, в то время как ссылка на несуществующий анкор, такая как <a href=»#!»>, не будет прокручивать страницу. Если это кажется вам не слишком аккуратным, то можно изменить внешний вид курсора с помощью CSS.

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

www.internet-technologies.ru

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

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

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

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

Навигация по странице:

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

У всех браузеров, которые запущенные с ПК или ноутбука, в CSS доступно свойство :hover (тут я малость неправ, это псевдокласс  🙂 ) на базе которого можно построить практически любое вертикальное выпадающее меню.

А что же делать с мобильными браузерами? — или на планшетах спросите вы.

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

Пара слов о преимуществе выпадающих меню:

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

 

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

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

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

Html для вертикального меню

Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:

<nav>
    <ul>
        <li><a href="#m1">Первая услуга</a></li>
        <li><a href="#m2">Вторая услуга</a>
            <ul>
                <li><a href="#m2_1">Выпадашка 1</a></li>
                <li><a href="#m2_2">Выпадашка 2</a></li>
            </ul>
        </li>
        <li><a href="#m3">Третья</a>
            <ul>
                <li><a href="#m3_1">Выпадашка с третьей услуги 1</a></li>
                <li><a href="#m3_2">Выпадашка с третьей услуги 2</a></li>
                <li><a href="#m3_3">Краткая выпадашка</a></li>
            </ul>
        </li>
        <li><a href="#m4">4 услуга</a></li>
        <li><a href="#m5">5 услуга</a>
            <ul>
                <li><a href="#m5_1">111111</a></li>
                <li><a href="#m5_2">2222 2222</a></li>
            </ul>
        </li>
        <li><a href="#m6">6 услуга</a></li>
        <li><a href="#m7">7 услуга</a></li>
        <li><a href="#m8">8 услуга</a></li>
    </ul>
</nav><!--menuVertical-->

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

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

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

#menuVertical{width:100%;height:auto;}
    #menuVertical ul{
        display:block;
        width:100%;
        height:auto;
        margin:0px;
        padding:0px;
        list-style:none;
        position:relative;
    }
        #menuVertical ul li{display:block; width:100%; height:auto; position:relative;}
            #menuVertical ul li a{
                position:relative;
                display:block;
                width:100%;
                height:auto;
                box-sizing:border-box;
                font-size:13px;
                text-transform:uppercase;
                font-weight:bold;
                color:#FBF7F7;
                line-height:1.2em;
                padding:10px 15px;
                background:#3A9CD3;
                border-top:1px solid #236A92;
                text-decoration:none;
            }
            #menuVertical ul  li:first-child a{border:0px;}
            #menuVertical ul li a:hover, #menuVertical ul li:hover a{
                background:#0A3CC1;
            }
            #menuVertical ul li ul{
                position:absolute;
                top:0px;
                left:100%;
                display:none;
                width:auto;
            }
            /*******показываем выпадашку при наведении ********/
            #menuVertical ul li:hover ul{display:block;}
                #menuVertical ul li ul li a{
                    white-space:nowrap;
                    text-transform:none;
                    padding:5px 20px;
                }
                    #menuVertical ul li ul li a:hover{
                        background:#75C1D4;
                        color:#0A3CC1;
                    }

 

Вот эта строчка CSS

#menuVertical ul li:hover ul{display:block;}

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

Посмотреть что у нас получилось в этом примере можно на скине:

Как работает вертикальное выпадающее меню css вы можете увидеть в режиме демо ниже, или скачав пример:

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

Это еще не конец, идем дальше.

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

 

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

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

Стили CSS будут немножко отличаться, хотя не кардинально. В моем простом примере достаточно исправить одно значение. В комментариях, я помечу его.

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

#menuVertical{width:100%;height:auto;}
    #menuVertical ul{
        display:block;
        width:100%;
        height:auto;
        margin:0px;
        padding:0px;
        list-style:none;
        position:relative;
    }
        #menuVertical ul li{display:block; width:100%; height:auto; position:relative;}
            #menuVertical ul li a{
                position:relative;
                display:block;
                width:100%;
                height:auto;
                box-sizing:border-box;
                font-size:13px;
                text-transform:uppercase;
                font-weight:bold;
                color:#FBF7F7;
                line-height:1.2em;
                padding:10px 15px;
                background:#3A9CD3;
                border-top:1px solid #236A92;
                text-decoration:none;
            }
            #menuVertical ul  li:first-child a{border:0px;}
            #menuVertical ul li a:hover, #menuVertical ul li:hover a{
                background:#0A3CC1;
            }
            #menuVertical ul li ul{
                position:absolute;
                top:0px;
                right:100%;/*поменяли здесь*/
                display:none;
                width:auto;
            }
            /*******показываем выпадашку при наведении ********/
            #menuVertical ul li:hover ul{display:block;}
                #menuVertical ul li ul li a{
                    white-space:nowrap;
                    text-transform:none;
                    padding:5px 20px;
                }
                    #menuVertical ul li ul li a:hover{
                        background:#75C1D4;
                        color:#0A3CC1;
                    }

Вот и все. У нас получилось вот такое меню. Слева кликабельный скин, справа демо и ссылка на скачивание примера:

 

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

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

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

Начнем. Для начала хтмл код. У нас добавится несколько списков ul li для следующих уровней сайта. Мой пример будет на 3 выпадающих подменю, по этому html код будет такой:

<nav>
    <ul>
        <li><a href="#m1">Первая услуга</a></li>
        <li><a href="#m2">Вторая услуга</a>
            <ul>
                <li><a href="#m2_1">Выпадашка 1</a></li>
                <li><a href="#m2_2">Выпадашка 2</a></li>
            </ul>
        </li>
        <li><a href="#m3">Есть выпадашки далее</a>
            <ul>
                <li><a href="#m3_2">Выпадашка с третьей услуги 1</a></li>
                <li><a href="#m3_1">Есть выпадашки далее</a>
                    <ul>
                        <li><a href="#m3_1_1">Есть выпадашка далее</a>
                            <ul>
                                <li><a href="#m3_1_1_1">Пункт 1</a></li>
                                <li><a href="#m3_1_1_2">Выпадашка конец</a></li>
                                <li><a href="#m3_1_1_3">Выпадашка конец</a></li>
                            </ul>
                        </li>
                        <li><a href="#m3_1_2">Нет выпадашки далее</a></li>
                    </ul>
                </li>
                <li><a href="#m3_3">Краткая выпадашка</a></li>
                <li><a href="#m3_4">Краткая выпадашка</a></li>
                <li><a href="#m3_5">Краткая выпадашка</a></li>
            </ul>
        </li>
        <li><a href="#m4">4 услуга</a></li>
        <li><a href="#m5">5 услуга</a>
            <ul>
                <li><a href="#m5_1">111111</a></li>
                <li><a href="#m5_2">2222 2222</a></li>
            </ul>
        </li>
        <li><a href="#m6">6 услуга</a></li>
    </ul>
</nav><!--menuVertical-->

 

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

 

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

#menuVertical{width:100%;height:auto;}
    #menuVertical ul{
        display:block;
        width:100%;
        height:auto;
        margin:0px;
        padding:0px;
        list-style:none;
        position:relative;
    }
        #menuVertical ul li{display:block; width:100%; height:auto; position:relative;}
            #menuVertical ul li a{
                position:relative;
                display:block;
                width:100%;
                height:auto;
                box-sizing:border-box;
                font-size:13px;
                text-transform:uppercase;
                font-weight:bold;
                color:#FBF7F7;
                line-height:1.2em;
                padding:10px 15px;
                background:#3A9CD3;
                border-top:1px solid #236A92;
                text-decoration:none;
            }
            #menuVertical ul > li:first-child > a{border:0px;}
            #menuVertical ul li a:hover, #menuVertical ul li:hover a{
                background:#0A3CC1;
            }
            #menuVertical ul li ul{
                position:absolute;
                top:0px;
                left:100%;
                display:none;
                width:150px;
            }
            /*******показываем выпадашку при наведении ********/
            #menuVertical ul li:hover > ul{display:block;}
                #menuVertical ul li ul li a{
                    text-transform:none;
                    padding:5px 20px;
                }
                    #menuVertical ul li ul li a:hover, #menuVertical ul li ul li:hover > a{
                        background:#75C1D4;
                        color:#0A3CC1;
                    }

Это стили для создания вертикального многоуровневого выпадающего меню вправо при наведении. Вариант с выпадашкой влево будет чуть далее. Смотрим ниже что у нас получилось на рисунке (скин кликабельный):

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

 

Как создать такое же меню с выпадашкой влево?

Сейчас я приведу стиль, который нужно поменять, для создания выпадашки вправо:

На рисунке я показал где он находится:

На втором рисунке можно посмотреть как работает вертикальное многоуровневое меню влево при наведении.

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

На этом у меня все, до новых встреч.

Советую посетить родительскую страницу https://help-wp.ru/vypadayushhee-menu/ с разными вариантами меню, или же просмотреть запись горизонтальное выпадающее меню.

Поделитесь ссылкой со своими друзьями в социальных сетях:

Комментарии к записи «Вертикальное выпадающее меню на CSS при наведении и многоуровневые меню»:

help-wp.ru