CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 267   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

20

Мега меню на CSS + jQuery

Jemand 26132 ,
CSS, JavaScript

1. CSS

ul.ldd_menu {
	margin: 0px;
	padding: 0;
	display: block;
	height: 50px;
	background-color: #0051A1;
	list-style: none;
	font-family: "Trebuchet MS", sans-serif;
	border-top: 1px solid #3474C6;
	border-bottom: 1px solid #3474C6;
	border-left: 10px solid #0051A1;
	-moz-box-shadow: 0px 3px 4px #007BC2;
	-webkit-box-shadow: 0px 3px 4px #007BC2;
	-box-shadow: 0px 3px 4px #007BC2;
	}
ul.ldd_menu a {
	text-decoration: none;
	}
ul.ldd_menu > li {
	float:left;
	position:relative;
	}
ul.ldd_menu > li > span {
	float: left;
	color: #fff;
	background-color: #0051A1;
	height: 50px;
	line-height: 50px;
	cursor: default;
	padding: 0px 20px;
	text-shadow: 0px 0px 1px #fff;
	border-right: 1px solid #3474C6;
	border-left: 1px solid #0049A1;
	}
ul.ldd_menu .ldd_submenu {
	position: absolute;
	top: 50px;
	width: 480px;
	display: none;
	opacity: 0.9;
	left: 0px;
	font-size: 10px;
	background: #0051A1;
	border-top: 1px solid #3474C6;
	-moz-box-shadow: 0px 3px 4px #0051A1 inset;
	-webkit-box-shadow: 0px 3px 4px #0051A1 inset;
	-box-shadow: 0px 3px 4px #0051A1 inset;
	}
a.ldd_subfoot{
	background-color: #f0f0f0;
	color: #444;
	display: block;
	clear: both;
	padding: 15px 20px;
	text-transform: uppercase;
	font-family: Arial, serif;
	font-size: 12px;
	text-shadow: 0px 0px 1px #fff;
	-moz-box-shadow: 0px 0px 2px #777 inset;
	-webkit-box-shadow: 0px 0px 2px #777 inset;
	-box-shadow: 0px 0px 2px #777 inset;
	}
ul.ldd_menu ul {
	list-style: none;
	float: left;
	border-left: 1px solid #2A6DC3;
	margin: 20px 0px 10px 30px;
	padding: 10px;
	}
li.ldd_heading {
	font-family: Georgia, serif;
	font-size: 13px;
	font-style: italic;
	color: #69C3FF;
	text-shadow: 0px 0px 1px #B03E23;
	padding: 0px 0px 10px 0px;
	}
ul.ldd_menu ul li a {
	font-family: Arial, serif;
	font-size: 10px;
	line-height: 20px;
	color: #fff;
	padding: 1px 3px;
	}
ul.ldd_menu ul li a:hover {
	-moz-box-shadow: 0px 0px 2px #2A6DC3;
	-webkit-box-shadow: 0px 0px 2px #2A6DC3;
	box-shadow: 0px 0px 2px #2A6DC3;
	background: #007BC2;
	}

2. Подключение jQuery

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

3. JavaScript

<script type="text/javascript">
	$(function() {
		var $menu = $('#ldd_menu');
		$menu.children('li').each(function(){
			var $this = $(this);
			var $span = $this.children('span');
			$span.data('width',$span.width());
			$this.bind('mouseenter',function(){
				$menu.find('.ldd_submenu').stop(true,true).hide();
				$span.stop().animate({'width':'440px'},300,function(){
					$this.find('.ldd_submenu').slideDown(300);
				});
			}).bind('mouseleave',function(){
				$this.find('.ldd_submenu').stop(true,true).hide();
				$span.stop().animate({'width':$span.data('width')+'px'},300);
			});
		});
	});
</script>

4. HTML

<ul id="ldd_menu" class="ldd_menu">
	<li>
		<span>Меню №1</span>
		<div class="ldd_submenu">
			<ul>
				<li class="ldd_heading">Заголовок №1</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<ul>
				<li class="ldd_heading">Заголовок №2</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
				<ul>
				<li class="ldd_heading">Заголовок №3</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<a class="ldd_subfoot" href="#"> + Еще ссылка</a>
		</div>
	</li>
	<li>
		<span>Меню №2</span>
		<div class="ldd_submenu">
			<ul>
				<li class="ldd_heading">Заголовок №1</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<ul>
				<li class="ldd_heading">Заголовок №2</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<ul>
				<li class="ldd_heading">Заголовок №3</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<a class="ldd_subfoot" href="#"> + Еще ссылка</a>
		</div>
	</li>
	<li>
		<span>Меню №3</span>
		<div class="ldd_submenu">
			<ul>
				<li class="ldd_heading">Заголовок №1</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<ul>
				<li class="ldd_heading">Заголовок №2</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<ul>
				<li class="ldd_heading">Заголовок №3</li>
				<li><a href="#">Ссылка №1</a></li>
				<li><a href="#">Ссылка №2</a></li>
				<li><a href="#">Ссылка №3</a></li>
				<li><a href="#">Ссылка №4</a></li>
				<li><a href="#">Ссылка №5</a></li>
			</ul>
			<a class="ldd_subfoot" href="#"> + Еще ссылка</a>
		</div>
	</li>
</ul>

Рекламная пауза

» 20 комментариев

  1. Привет все хорошо но при добавлении второго меню http://s017.radikal.ru/i424/1111/69/479ed3ad28c5.jpg вот такая бяка.

  2. это не в ксс было. исправил.такой вопрос на моем сайт при открытие меню они перекрывается названием сайта вот здесь acmilan-club.ru-третье меню. подскажите пожалуйста как сделать чтобы меню была выше.спс.

  3. благодарю все работает, в который раз убеждаюсь у вас лучший сайт по вебстроению)

  4. Подскажите какие функции отвечают за автоматическое закрытие меню. У меня есть меню на моем сайте le-ol.ru но оно почему то не закрывается автоматом как в вашем примере, а только если выберешь другой пункт меню или или щелкнешь на открытом, А если просто мышку сдвинуть, то висит и не закрывается. И можно ли сделать чтобы меню закрывалось с небольшой задержкой, скажем 1 сек ???

    • Вы откуда это меню взяли?

      • Это меню из шаблона ja-ores для joomla 1.5/

        Кстати на другом компьютере под windows 7 меню закрывается с задержкой в 2 секунды. Под XP закрываться никак не хочет.
        В шаблоне куча натроек и много кода. Где искать нужный код не пойму. Если надо могу исходники выслать может разберетесь ? Только скажите какие файлы присылать.

        • С Joomla не работаю…

          • 30 января 2012 02:32

            Thumb up 0  Thumb down0 0

            Жаль. Проблему решили простым переходом на Css меню вместо мега меню. В Css меню все параметры работают корретно.
            А на какой CMS вы делаете сайты ?

          • 30 января 2012 06:03

            Thumb up 0  Thumb down0 0

            Так Вы установите именно это меню, с ним проблем быть не должно.
            Мой сайт работает на WordPress.

            p.s. так проблемы не решают…

  5. Вставил весь код. Меню появилось, но при наведении курсора ничего не происходит. Пробовал даже скопировал код со страницы примера и его вставил в свой шаблон все ровно ничего не происходит при наведении курсора. в чем может быть причина?

  6. Подскажите пожалуйста, есть ли решения как заставить это мега-меню корректно отображаться в IE6?

  7. Еще не везде) к сожалению…


Оставить комментарий