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

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

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

Как вы наверняка догадываетесь первым делом нам нужно создать html стараницу со стандартной разметкой и подключить к ней файл стилей. Не буду подробно останавливаться на данном шаге, так как все-таки надеюсь, что вы не настолько начинающие, чтобы подробно разсказывать вам, что такое body и head и как подключаются стили. Скажу лишь, что помимо стилей для нашего меню в файл css я напишу самый простой reset, чтобы обнулить стили и добиться одинакового отображения отступов во всех браузерах. Вот собственно так выглядит мой простейший ресет:

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

Итак что в нас есть на данном этапе? У нас есть html страница со стандартной разметкой:

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

И у нас есть подключенный к данной странице файл стилей (у меня это style.css), со следующем содержимым:

Следующим этапом будет создания html разметки для нашего меню.

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

И раз мы уже заговорили о поддержке новых тегов html 5, чтобы у нас не возникало проблем с этим в старых браузерах, в наш документ нужно подключить специальную библиотеку — html5shiv. Делается это вставкой в
раздел head вашей страницы следующего кода:

Все после этого тег (и другие теги оносящиеся к HTML5) будут нормально восприниматься старыми браузерами.

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

• Главная
• О нас
• Портфолио
• Блог
• Контакты

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

И так первым делом при верстке меню нам нужно убрать маркеры списка, они нам явно не нужны, делается это так:

Ul{ list-style:none; }

После этого наше меню станет таким:

Мне не очень нравится, что наше меню прилеплено к краям браузера, давайте исправим это:

Данным кодом мы задали ширину нашему меню, дали ему отступы сверху и низу по 50px и расположили по центру. Кто не знает если в блочного элемента есть ширина то для того чтобы расположить данный элемент строго по центру нам нужно всего лишь задать ему внешний отступ (margin) справа и слева со значением auto.

Следующим этапом нам нужно уже наконец-то сделать наше меню горизонтальным, делается это заданием элементам

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

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

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

• Главная
• Статьи
  • HTML
  • CSS
  • PHP
  • MySQL
• Книги
  • Раскрутка и продвижение
  • Е-Бизнес
  • Web-Дизайн
  • Платежные системы
• О нас

Довольно простой и не сложный получился html-код. Выглядеть этот список будет так .

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

#nav ul { margin: 0px; padding: 0px; list-style:none; width:200px; }

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

#nav ul li { position: relative; border-bottom:1px solid #ccc; }

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

#nav li ul { position: absolute; left: 200px; top: 0; display: none; }

Используя атрибуты left и top мы задаем абсолютное позиционирование нашего подменю относительно родительского пункта меню. Также я присвоил атрибуту "display" значение "none" , так как мы не хотим видеть подменю при открытии страницы.

Итак, теперь наше меню выглядит так.

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

#nav ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; }

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

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

Осталось придать ему более привлекательный вид.

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

#nav li:hover a { color:#FFFFFF; background: url(img/fone-tr.png); }

Здесь я в качестве фона использую вот эту картинку , но Вы можете использовать и заливку любым другим цветом (например: background-color:#0000ff; ).

#nav li:hover ul a:hover { background-color:#cccccc; background-image:none; color:#FFFFFF; }

Ну вот и все! Наше выпадающее меню на html и CSS готово. Можете посмотреть, что у нас получилось .

На этом казалось бы можно было закончить, но нет. К сожалению ранние версии Internet Explorer понимают псевдокласс :hover лишь для тега - так что li:hover , на который у нас завязано появление подменю и изменение цвета фона, ему ни о чём не говорит.