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

Jemand 26132 jQuery, Меню
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>

« Портфолио на jQuery

Выдвигающаяся при прокрутке страницы панель »

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

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

ba11istique Авторизуйтесь чтобы оставить ответ

18 ноября 2011 07:40
1 +1 0

Привет все хорошо но при добавлении второго меню http://s017.radikal.ru/i424/1111/69/479ed3ad28c5.jpg вот такая бяка.
- Jemand Авторизуйтесь чтобы оставить ответ
  
  18 ноября 2011 08:18
  0 0 0
  
  CSS смотрите.
ba11istique Авторизуйтесь чтобы оставить ответ

18 ноября 2011 08:38
1 +1 0

это не в ксс было. исправил.такой вопрос на моем сайт при открытие меню они перекрывается названием сайта вот здесь acmilan-club.ru-третье меню. подскажите пожалуйста как сделать чтобы меню была выше.спс.
- Jemand Авторизуйтесь чтобы оставить ответ
  
  18 ноября 2011 10:41
  0 0 0
  
  Используйте z-index.
  - ba11istique Авторизуйтесь чтобы оставить ответ
    
    18 ноября 2011 13:15
    0 0 0
    
    куда его пихать, извините я новичок.
    - Jemand Авторизуйтесь чтобы оставить ответ
      
      18 ноября 2011 13:19
      1 +1 0
      
      Найдите в CSS соде ul.ldd_menu .ldd_submenu и добавьте между { и } z-index: 100;
ba11istique Авторизуйтесь чтобы оставить ответ

18 ноября 2011 13:22
1 +1 0

благодарю все работает, в который раз убеждаюсь у вас лучший сайт по вебстроению)
- Jemand Авторизуйтесь чтобы оставить ответ
  
  18 ноября 2011 13:26
  0 0 0
  
  Благодарю за тёплые слова.
Антон Авторизуйтесь чтобы оставить ответ

14 января 2012 09:14
0 0 0

Подскажите какие функции отвечают за автоматическое закрытие меню. У меня есть меню на моем сайте le-ol.ru но оно почему то не закрывается автоматом как в вашем примере, а только если выберешь другой пункт меню или или щелкнешь на открытом, А если просто мышку сдвинуть, то висит и не закрывается. И можно ли сделать чтобы меню закрывалось с небольшой задержкой, скажем 1 сек ???
- Jemand Авторизуйтесь чтобы оставить ответ
  
  17 января 2012 08:10
  0 0 0
  
  Вы откуда это меню взяли?
  - Anton Авторизуйтесь чтобы оставить ответ
    
    19 января 2012 03:58
    0 0 0
    
    Это меню из шаблона ja-ores для joomla 1.5/
    
    Кстати на другом компьютере под windows 7 меню закрывается с задержкой в 2 секунды. Под XP закрываться никак не хочет.
    В шаблоне куча натроек и много кода. Где искать нужный код не пойму. Если надо могу исходники выслать может разберетесь ? Только скажите какие файлы присылать.
    - Jemand Авторизуйтесь чтобы оставить ответ
      
      20 января 2012 09:23
      0 0 0
      
      С Joomla не работаю…
      - Anton
        
        30 января 2012 02:32
        0 0 0
        
        Жаль. Проблему решили простым переходом на Css меню вместо мега меню. В Css меню все параметры работают корретно.
        А на какой CMS вы делаете сайты ?
      - Jemand
        
        30 января 2012 06:03
        0 0 0
        
        Так Вы установите именно это меню, с ним проблем быть не должно.
        Мой сайт работает на WordPress.
        
        p.s. так проблемы не решают…
Дмитрий Авторизуйтесь чтобы оставить ответ

7 марта 2012 21:04
0 0 0

Вставил весь код. Меню появилось, но при наведении курсора ничего не происходит. Пробовал даже скопировал код со страницы примера и его вставил в свой шаблон все ровно ничего не происходит при наведении курсора. в чем может быть причина?
- Jemand Авторизуйтесь чтобы оставить ответ
  
  8 марта 2012 14:32
  1 +1 0
  
  Дайте ссылку на страницу с меню.
Pavil Авторизуйтесь чтобы оставить ответ

21 марта 2012 16:00
0 0 0

Подскажите пожалуйста, есть ли решения как заставить это мега-меню корректно отображаться в IE6?
- Jemand Авторизуйтесь чтобы оставить ответ
  
  22 марта 2012 11:11
  3 +3 0
  
  Не подскажу. IE6 умер.
Pavil Авторизуйтесь чтобы оставить ответ

22 марта 2012 20:35
1 +1 0

Еще не везде) к сожалению…
- Jemand Авторизуйтесь чтобы оставить ответ
  
  24 марта 2012 21:57
  4 +4 0
  
  IE6 будет жить пока под него верстают…

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

Вы должны войти чтобы оставить комментарий.