Главная » Уроки » Создание выпадающего меню с помощью CSS

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

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

Ну, а мы со своим пытливым умом и неуемной фантазией, пойдем немного дальше, раздербаним все и вся на составляющие, поколдуем над стилем, добавим новых свойств, и в итоге получим вот такое замечательное меню для сайта:
 
Выпадающее меню на CSS
 
Мне нравится решение, когда меню ведет себя как раскрывающиеся списки. Мастеровой люд часто использует javaScript, чтобы добиться этого эффекта, мы же будем «пользовать» только CSS с новыми свойствами CSS3.

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

 
Структура выпадающего меню CSS
 

HTML Раскладка

<ul id="nav">
    <li><span>Меню 1</span>
        <ul>
            <li><a href="#">Пункт меню 1</a></li>
            <li><a href="#">Пункт меню 2</a></li>
            <li><a href="#">Пункт меню 3</a></li>
       </ul> 
    </li>
    <li><span>Меню 2</span>
        <ul>
            <li><a href="#">Пункт меню 1</a></li>
            <li><a href="#">Пункт меню 2</a></li>
            <li><a href="#">Пункт меню 3</a></li>
       </ul>
    </li>            
    <li><span>Меню 3</span>
        <ul>
            <li><a href="#">Пункт меню 1</a></li>
            <li><a href="#">Пункт меню 2</a></li>
            <li><a href="#">Пункт меню 3</a></li>
       </ul>
    </li>
    <li><span>Меню 4</span>
        <ul>
            <li><a href="#">Пункт меню 1</a></li>
            <li><a href="#">Пункт меню 2</a></li>
            <li><a href="#">Пункт меню 3</a></li>
       </ul>
    </li>
</ul>

Отображение и скрытие подпункта меню осуществляется простым свойством элемента при наведении на него ul > li:hover ul. С помощью этого выбора можно определить поведение всех подменю.
Фоном основного меню в оригинале является небольшое изображение размером 1 x 35px, мы же попробуем обойтись и без него, в свойстве background: пропишем определённое значение цвета в HEX, получится background: #d0d0d0;. Вариантов тьма, все зависит от фантазии, можно например использовать возможности градиентов CSS, для фоновой заливки тела меню.
 

CSS

 
CSS параметры меню
 
Вот так непринуждённо, выстраивается очертание блока навигации. Для раскрывающихся при наведении списков и подпунктов, добавил свойство скругления углов border-radius. Наплевав на убогий IE6, использовал box-shadow, для создания легкой тени у выпадающих списков. Проблемы, как всегда только с тормознутым IEшкой, остальные современные браузеры все отображают великолепно.

/* Формируем меню с 
 * выпадающими подпунктами
*/
 
#nav {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width: 1124px;
	height: 34px;
	display: inline-block;
	list-style: none;
	position: relative;
	font-size: 0.8em;
	background: #d0d0d0;
	box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
}
#nav>li {
	list-style-type: none;
	float: left;
	display: block;
	margin: 0;
	position: relative;
	padding: 10px;
	width: 120px;
}
#nav>li:hover ul {
	display: block;
}
#nav>li:hover {
	background-color: #AAA4A4;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 2px 3px 3px #352929;
	-webkit-box-shadow: 2px 3px 3px #352929;
	-moz-box-shadow: 2px 3px 3px #352929;
}
#nav li ul {
	margin: 0;
	padding: 0;
	display: none;
}
#nav li ul li {
	list-style-type: none;
	margin: 10px 0 0 0;
}
#nav li ul li a {
	display: block;
	padding: 5px 10px;
	color: #83FA03;
	text-decoration: none;
}
#nav li ul li:hover a {
	background-color: #606060;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 1px 2px 2px #352929;
	-webkit-box-shadow: 1px 2px 2px #352929;
	-moz-box-shadow: 1px 2px 2px #352929;
}
#nav li span {
	cursor: pointer;
	margin: 0px 10px;
	font-weight: bold;
	color: #263348;
}

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

источник: Janko

дополнения и адаптация: driver

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru