22.07.2009 - 11 коммент.

CSS-HTML-Ajax → Выпадающее подменю на CSS и jQuery

Метки: css, HTML, jquery, выпадающее меню

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

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

Для создания такого меню, Вам потребуется сделать HTML блок, добавить несколько записей в свою таблицу стилей (CSS), подключить библиотеку jQuery и дописать javascript. И так начинаем …

Начнем с HTML блока, который нужно добавить для отображения меню.

^?View Code HTML

<ul id="topnav">
    <li><a href="#">Меню 1</a></li>
    <li>
        <a href="#">Меню 2</a>
        <!--Здесь начинается подменю-->
        <span>
            <a href="#">Подменю 1</a> |
            <a href="#">Подменю 2</a> |
            <a href="#">Подменю 3</a>
        </span>
        <!--Заканчивается подменю-->
    </li>
    <li><a href="#">Меню 3</a></li>
</ul>

Теперь добавим стиль в Ваш файл таблицы стилей или в начало html файла внутри тегов <style> и </style>

^?View Code CSS

ul#topnav {
	margin: 0; padding: 0;
	float: left;
	width: 970px;
	list-style: none;
	position: relative;
	font-size: 1.2em;
	background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-right: 1px solid #555;
}
ul#topnav li a {
	padding: 10px 15px;
	display: block;
	color: #f0f0f0;
	text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }
 
ul#topnav li span {
	float: left;
	padding: 15px 0;
	position: absolute;
	left: 0; top:35px;
	display: none;
	width: 970px;
	background: #1376c9;
	color: #fff;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}

Подключаем библиотеку jQuery внутри тегов <head> и </head>

^?View Code HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

И после этой строчки вставляем javascript

^?View Code JAVASCRIPT

<script type="text/javascript">
$(document).ready(function() {
	$("ul#topnav li").hover(function() {
		$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'});
		$(this).find("span").show();
	} , function() { //on hover out...
		$(this).css({ 'background' : 'none'});
		$(this).find("span").hide();
	});
});
</script>

Вот, собственно, и все — всё просто и легко.

11 коммент.

Влад

18.06.2010→1:07

Привет! А как сделать, чтобы сабменю открывалось не по hover, а по клику?

Василий

21.06.2010→16:45

$("ul#topnav li").hover(function() {

заменить на

$("ul#topnav li").click(function() {

Сергей

22.07.2010→6:54

Вы мне объясните зачем здесь jQuery всё работает только за счёт CSS. Для проверки удалите скрипт и отключите библиотеку jQuery всё равно меню будет работать.

Кэп

30.07.2010→15:34

Javascript тут для Ie6 он заставляет работать меню в этом браузере :D Спасибо кэп

Дмитрий

02.09.2010→1:20

Все отлично работает!
Не подскажите, как сделать так, чтобы при входе в подменю, само подменю не уходило? Сайт делается без CMS. Заранее спасибо!

Сергей

23.11.2011→16:29

как переписать этот css стиль под другой html код ???

<a href="#" rel="nofollow">Меню 1</a>

<a href="#" rel="nofollow">Меню 2</a>

<a href="#" rel="nofollow">Подменю 1</a>
<a href="#" rel="nofollow">Подменю 2</a>
<a href="#" rel="nofollow">Подменю 3</a>


<a href="#" rel="nofollow">Меню 3</a>

Алексей

07.12.2011→22:01

Действительно, очень интересно как сделать, что бы подменю было открытым всегда?
как сделать, что бы если я клацну по ПОДМЕНЮ 2 меню то активным останется 2 меню и будут показаны его подменю?

pixmaster

20.12.2011→14:28

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

Андрей

07.02.2012→22:35