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

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

Создаем выпадающее меню на чистом CSS Исходный код Просмотр

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

<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;}

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

Создаем выпадающее меню на чистом CSS
Чтобы добавить выпадающий список к какому-либо из элементов 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»):

Создаем выпадающее меню на чистом CSS
Чтобы добавить выпадающие списки, состоящие из нескольких уровней, этот процесс необходимо повторить. Определяем пункт меню, из которого необходимо сделать выпадающий список, и добавляем новый <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%;}

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

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

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

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

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

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

Создаем выпадающее меню на чистом CSS
Значит, вы все сделали правильно.

В завершение

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

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

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

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