Выпадающее подменю на CSS и jQuery

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

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

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

Начнем с 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>

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>

<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>

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

Комментарии

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

  2. $(«ul#topnav li»).hover(function() {

    заменить на

    $(«ul#topnav li»).click(function() {

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

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

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

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

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

  8. Уважаемые подскажите а как сделать чтоб из саб меню выпадало саб-саб меню???? Очень надо!!!

  9. Как убрать закругления в выпадающем меню, сделав обычные углы?

  10. А как сделать чтобы при выходе курсором мышки за пределы подменю, оно не сразу сворачивалось, а через ~1 секунду?

  11. А как сделать чтобы Меню1 — Меню 4 — было посередине (по центру)?

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

  13. Подскажите, как убрать последний разделитель в пункте меню?

  14. Спасибо автору! Тонкий и лаконичный способ вывода меню.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *