Создание выпадающего (drop-down) меню при помощи только CSS

CSS / 2 комментария

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

Только CSS и HTML, невероятно, но этого вполне достаточно для создания весьма неплохих менюшек.

HTML

Обычно менюшки создаются при помощи <ul>-списков. Кстати говоря, если на WordPress меню будет сгенерировано функцией wp_list_categories или функцией wp_nav_menu(), то тоже всё будет отлично работать. Главное не напутать с классами и айдишниками элементов списка. Это предельно важно.

Пока что я покажу вам только как сделать менюшку с одним уровнем вложенности, в данном случае главное — уловить саму суть.

<ul id="my-drop-down-menu">
	<li class="list"><a href="#" class="link">WordPress</a>
		<ul class="child">
		<li><a href="#">плагины</a></li>
		<li><a href="#">темы</a></li>
		<li><a href="#">хаки</li>
		</ul>
	</li>
	<li class="list"><a href="#" class="link">Joomla</a>
		<ul class="child">
		<li><a href="#">компоненты</a></li>
		<li><a href="#">модули</a></li>
		</ul>
	</li>
	<li class="list"><a href="#" class="link">Drupal</a></li>
</ul>

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

CSS

Здесь тоже всё довольно просто, к тому же часть кода ниже я использовал чисто для оформления, свой цвет фона, цвет ссылок и прочее (важное отмечено /* (!) */).

#my-drop-down-menu ul, ul#my-drop-down-menu{
	list-style:none;
}
 
#my-drop-down-menu{ 
	position:relative; /* (!) */
	z-index:3;
	width:300px;
	height:20px;
	margin:0 auto;
}
 
#my-drop-down-menu li.list{
	float:left; /* (!) */
	display:block; /* (!) */
	margin:0 5px;
}
 
#my-drop-down-menu a{
	color: #61ADB0;
	text-decoration:none;
}
 
#my-drop-down-menu ul.child{ 
	background: #463935;
	padding:5px;
	position:absolute; /* (!) */
	top:29px; /* (!) */
	left:-9999px; /* (!) */
	z-index:3;
	border-top: 1px solid #3A2E2B;
	-moz-box-shadow: 0px 3px 7px #251d1b;
	-webkit-box-shadow: 0px 3px 7px #251d1b;
	box-shadow: 0px 3px 7px #251d1b;
}
 
#my-drop-down-menu li:hover ul.child{
	left:auto; /* (!) */
}
 
#my-drop-down-menu li a.link{
	display:block;
	padding:5px;
}
 
#my-drop-down-menu li:hover a.link{
	background: #463935;
}

Аналогично можно добавлять ещё больше уровней вложенности, вставляя <ul> в <li>

Повторяюсь, зеленым цветом я отметил стили, которые необходимы для того, чтобы меню нормально работало (выпадало).

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

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

Комментарии — 2

Natasha 3 Май 2012
Я воспользовалась этим кодом, создала 2 файла HTML-кий И CSS/ У меня все получилось! Так что рекомендую!
handsome 28 Фев 2013
надо чтобы в ие7 работало хорошо вот это добавить
* {
margin: 0;
padding: 0;
}
(короче обнулить отступы у всего)

Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.