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

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

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

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

Создаем html файл и подключаем css стили!

Как всегда начинаем нашу верстку из создания html документа с простой   структурой  и подключения   к нему таблицы стилей. Для этого открываем любой текстовый редактор  (я пользуюсь Siblime Text) и прописываем в нем следующий код:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <link rel="stylesheet" href="style.css">
    <title>Горизонтальное выпадающее меню</title>
</head>
<body>

</body>
</html>

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

Далее создаем файл стилей с самым простым reset для обнуления отступов (об этом подробно я писал здесь) и подключаем его (файл стилей) к нашему недавно созданному  файлу с  html структурой используя  тег link :


<link rel="stylesheet" href="style.css">

Так как мой файл стилей находится в той же папке что и index.html и назвал я его style.css в атрибутне href у меня следующий путь к файлу:   href=»style.css» .

В итоге вы должны получить:

1. Два файла, один с расширением html, а второй с расширением css, у меня они называются  index.html и style.css.

Ярлыки html фала и css стилей

2. В файле index.html должна быть прописана структура с подключением таблицы стилей:

Структура html файла

3  В файле style.css должен быть прописан простой ресет код для обнуления стилей:

reПростой reset сброс стилей

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

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

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

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


    <ul class="navigation">
        <li><a href="#">Пункт меню 1</a></li>
        <li><a href="#">Пункт меню 2</a></li>
        <li><a href="#">Пункт меню 3</a> </li>
        <li><a href="#">Пункт меню 4</a></li>
        <li><a href="#">Пункт меню 5</a></li>
    </ul>

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

Пока что в браузере это выглядит таким образом.

Список ссылок для меню

Никаких стилей, да еще и отступов совсем нет, так как мы их обнулили для всех элементов используя reset.

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


    <ul class="navigation">
        <li><a href="#">Пункт меню 1</a></li>
        <li><a href="#">Пункт меню 2</a></li>
        <li>
            <a href="#">Пункт меню 3</a>
            <ul class="sub-menu">
                <li><a href="#">подпункт меню 1</a></li>
                <li><a href="#">подпункт меню 2</a></li>
                <li><a href="#">подпункт меню 3</a></li>
                <li><a href="#">подпункт меню 4</a></li>
                <li><a href="#">подпункт меню 5</a></li>
            </ul>
        </li>
        <li><a href="#">Пункт меню 4</a></li>
        <li><a href="#">Пункт меню 5</a></li>
    </ul>

Здесь, как вы наверняка заметили, для вложенного ul элемента я добавил класс .sub-menu. Забегая на перед скажу, что от него можно было бы отказаться, но я обычно добавляю такого рода класс, чтобы в будущем  легче  было читать css стили.

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

Вложенный список без отступов

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

Вложенный список для меню

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

Пишем стили для выпадающего меню.

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

Шаг 1. Убираем маркеры в списка.


ul{
    list-style:none;
}

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

Шаг 2. Стилизуем .navigation.


ul.navigation{
    width:960px;
    margin:30px auto;
    background:#5389a5;
}

Здесь мы задаем для нашего списка ширину, цвет и располагаем его по центру страницы.

Шаг 3. Выравниваем пункты списка по левому краю.


.navigation li{
    float:left;
}

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

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

Плавающие элементы

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

Шаг 4. Добавляем класс .clearfix для очистки потока.

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


.clearfix:after{
    content:'';
    display:block;
    clear:both;
}

В нашем случаи класс .clearfix нужно добавить к блоку с классом .navigation, вот такая у нас получится итоговая структура:


<ul class="navigation clearfix">
        <li><a href="#">Пункт меню 1</a></li>
        <li><a href="#">Пункт меню 2</a></li>
        <li>
            <a href="#">Пункт меню 3</a>
            <ul class="sub-menu">
                <li><a href="#">подпункт меню 1</a></li>
                <li><a href="#">подпункт меню 2</a></li>
                <li><a href="#">подпункт меню 3</a></li>
                <li><a href="#">подпункт меню 4</a></li>
                <li><a href="#">подпункт меню 5</a></li>
            </ul>
        </li>
        <li><a href="#">Пункт меню 4</a></li>
        <li><a href="#">Пункт меню 5</a></li>
    </ul>

Шаг 5. Стилизуем  ссылки.


.navigation li a{
    display:block;
    font:16px/1.2em Tahoma, sans-serif;
    color:#fff;
    padding:10px 15px;
    text-decoration:none;
}

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

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

Пока все выглядит так себе, ну мы же не закончили 🙂 .

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


.navigation li .sub-menu{
    display:none;
}

В итоге получаем:

gorizont_menu

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


.navigation li .sub-menu{
    display:none;
    width:220px;
    background:#5389a5;
}

.navigation li .sub-menu li{
    float:none;
}


Сейчас наш выпадающий список до сих пор скрыт, пришло время сделать так чтобы он открывался при наведении курсора на родительский элемент li (на элемент самого верхнего уровня, который в себе содержит .sub-menu список).

Шаг 8. Заставляем показываться вложенный список при наведении. Вод собственно код.


.navigation li:hover .sub-menu{
    display:block;
}

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

verstka_menu

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

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

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

Шаг 8. Позиционируем выпадающий список относительно своего родителя.


.navigation li .sub-menu{
    display:none;
    width:220px;
    position:absolute;
    top:100%;
    left:0;
}

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


.navigation li{
    float:left;
    position:relative;
}

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


.navigation li:hover a{
    background:#6fa5c0;
}


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


ul{
    list-style:none;
}

.clearfix:after{
    content:'';
    display:block;
    clear:both;
}

ul.navigation{
    width:960px;
    margin:30px auto;
    background:#5389a5;
}
.navigation li{
    float:left;
    position:relative;
}

.navigation li a{
    display:block;
    font:16px/1.2em Tahoma, sans-serif;
    color:#fff;
    padding:10px 15px;
    text-decoration:none;
}

.navigation li:hover a{
    background:#6fa5c0;
}

.navigation li .sub-menu{
    display:none;
    background:#5389a5;
}

.navigation li .sub-menu{
    display:none;
    width:220px;
    position:absolute;
    top:100%;
    left:0;
}

.navigation li .sub-menu li{
    float:none;
}

.navigation li:hover .sub-menu{
    display:block;
}

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

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

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

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