Динамическое 2-х уровневое меню

11 августа 2008, Написано в CSS, Javascript

В этом уроке я хочу показать вам как сделать приятное динамическое меню с помощью CSS и немного Javascript. Оригинальный урок опубликован в статье Pastel color menu with dynamic submenu using CSS. Я немного изменил HTML и CSS код, для того чтобы конечный результат стал более семантически корректным.

В итоге получим такое меню:

Динамическое меню

HTML код очень прост:

<div id="navigation">
 <ul id="menu">
  <li><a href="#" title="" onmouseover="javascript:showsubmenu(1)">Главная</a>
   <ul id="s1">
    <li><a href="#" title="">О нас</a></li>
    <li><a href="#" title="">Информация</a></li>
    <li><a href="#" title="">Новости</a></li>
   </ul>
  </li>
  <li><a href="#" title="" onmouseover="javascript:showsubmenu(2)">Фильмы</a>
   <ul id="s2">
    <li><a href="#" title="">Драма</a></li>
    <li><a href="#" title="">Триллер</a></li>
    <li><a href="#" title="">Экшен</a></li>
    <li><a href="#" title="">Ужасы</a></li>
   </ul>
  </li>
  <li><a href="#" title="" onmouseover="javascript:showsubmenu(3)">Музыка</a>
   <ul id="s3">
    <li><a href="#" title="">Рок</a></li>
    <li><a href="#" title="">Пон</a></li>
    <li><a href="#" title="">Классика</a></li>
   </ul>
  </li>
  <li><a href="contact.html" title="">Связь</a></li>
 </ul>
</div>

Как вы уже успели заметить каждая ссылка в основном меню вызывает функцию showsubmenu().

CSS

ul, li {
 border:0;
 padding:0;
 margin:0;
 list-style:none
}
#navigation {
 background:url(img/nav-bg.gif) repeat-x;
 height:64px;
 position:relative
}
#navigation ul li {
 line-height:32px;
 display:inline
}
#navigation ul li a, #navigation ul li a:visited {
 background:url(img/line-a.gif) right no-repeat;
 padding:0 20px;
 text-decoration:none;
 color:#4261df;
 font-weight:bold
}
#navigation ul li ul {
 position:absolute;
 left:0;
 top:32px;
 height:30px;
 width:100%;
 background:#888 url(img/sublink.gif);
 font-size:11px
}
#navigation ul li li {
 height:30px;
 line-height:30px
}
#navigation ul li li a, #navigation ul li li a:visited {
 padding:0 20px;
 display:block;
 float:left;
 color:#fff
}
#navigation ul li li a:hover {
 text-decoration:underline
}
#s2, #s3 {
 display:none
}

После загрузки страницы по умолчанию отображается подменю первого раздела, поэтому для подменю с id s2 и s3 свойство display равно none.

Теперь просто добавьте этот фрагмент Javascript кода в секцию <head> вашей страницы:

<script type="text/javascript">
 function showsubmenu(id)
 {
  submenu = document.getElementById('s'+id);
  for(i=1;i<=3;i++)
  {
   if(i==id)
  {
   submenu.style.display="block";
  }
  else
  {
   document.getElementById('s'+i).style.display="none";
  }
 }
}
</script>

Функция showsubmenu() принимает параметр, исходя из которого формируется id нужного подменю.

Динамическое меню

Если необходимо добавить новую ссылку и подменю, нужно изменить условие цикла:

for(i=1;i<=4;i++)...

… а в HTML не забыть добавить:

<li><a href="#" title="" onmouseover="javascript:showsubmenu(4)">Новая ссылка</a>
   <ul id="s4">
      <li><a href="#" title="">Ссылка 1</a></li>
      <li><a href="#" title="">Ссылка 2</a></li>
      <li><a href="#" title="">Ссылка 3</a></li>
   </ul>
</li>

20 комментариев к статье «Динамическое 2-х уровневое меню»:

  1. ctapbiu:
    11 Авг 2008 в 20:31

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

    хтмл:

    <div id="navigation">
    <ul id="menu">
        <li><a href="#" title="" onmouseover="javascript:showsubmenu(1)" rel="nofollow">Главная</a>
            <ul id="s1">
                <li><a href="#" title="" rel="nofollow">О нас</a></li>
                <li><a href="#" title="" rel="nofollow">Информация</a></li>
                <li><a href="#" title="" rel="nofollow">Новости</a></li>
            </ul>
        </li>
        <li><a href="#" title="" onmouseover="javascript:showsubmenu(2)" rel="nofollow">Фильмы</a>
            <ul id="s2">
                <li><a href="#" title="" rel="nofollow">Драма</a></li>
                <li><a href="#" title="" rel="nofollow">Триллер</a></li>
                <li><a href="#" title="" rel="nofollow">Экшен</a></li>
                <li><a href="#" title="" rel="nofollow">Ужасы</a></li>
            </ul>
        </li>
        <li><a href="#" title="" onmouseover="javascript:showsubmenu(3)" rel="nofollow">Музыка</a>
            <ul id="s3">
                <li><a href="#" title="" rel="nofollow">Рок</a></li>
                <li><a href="#" title="" rel="nofollow">Пон</a></li>
                <li><a href="#" title="" rel="nofollow">Классика</a></li>
            </ul>
        </li>
        <li><a href="contact.html" title="" rel="nofollow">Связь</a></li>
    </ul>
</div>

    javascript:

    >$(function() {
  $('.menu').mouseover(function() {
    var el = $(this).children('ul');
    if (0!=el.length) {
      $('.menu ul').hide();
      $(el).show();
    }
  });
 
//показываем первое сабменю, остальные прячем
  $('.menu ul').hide();
  $($('.menu ul')[0]).show();
});

    из css можно удалить

    #s2, #s3 {
    display:none
}
    Ответить
  2. Alex:
    11 Авг 2008 в 21:05

    ctapbiu, вроде восстановил коммент, спасибо за информацию. Давно хочу освоить jQuery.

    P.S. Не могу найти нормальный плагин для размещения кода в wordpress. Может кто посоветует, а …. ;)

    Ответить
  3. MarkupDeveloper:
    12 Авг 2008 в 10:13

    А помоему все можно сделать еще проще… даже не подключая библиотеку jQuery.
    Ведь все ‘нормальные’ браузеры потдерживают псевдокласс :hover, а значит такое меню можно написать использую только css.
    А для IE подключить маленький скрипт, а в css для IE прописать вместо :hover – .hover

    Скрипт для IE:

    function ieHover()
{
	var nav = document.getElementById("navigation");
	if (nav)
	{
		var _li = nav.getElementsByTagName("li");
		for (var i=0; i&lt;_li.length; i++)
		{
			_li[i].onmouseover = function() 
			{
				this.className += " hover";
			}
			_li[i].onmouseout = function()
			{
				this.className = this.className.replace(" hover", "");
			}
		}
	}
}
    Ответить
  4. uggallery:
    12 Авг 2008 в 16:12

    А можно узнать, каким шрифтом на первой картинке набран текст «При наведении на ссылку появляется…»?

    Ответить
  5. Alex:
    12 Авг 2008 в 16:27

    Шрифт Segoe Print

    Ответить
  6. uggallery:
    13 Авг 2008 в 12:50

    Спасибо!

    Ответить
  7. Иваныч:
    16 Авг 2008 в 03:25

    Меню на джаве не сео френдли :)

    Ответить
  8. магнат:
    4 Сен 2008 в 23:23

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

    Ответить
  9. Alex:
    7 Сен 2008 в 11:43

    ИВАНЫЧ, основное меню функционирует и без скриптов, а соответствующее подменю можно разместить на странице раздела.

    Ответить
  10. Рейтинг самых лучших тем:
    12 Сен 2008 в 16:31

    первое место в рейтинге…

    http://www.alexilin.ru/dynamic-menu/...

    Ответить
  11. Константин:
    14 Сен 2008 в 23:41

    Возможно, кому-то пригодится мой вариант на мутулзе.
    http://clproject.info/archives/284

    Ответить
  12. Артём Курапов:
    15 Сен 2008 в 17:30

    С первого взгляда подумал что статья о том как неправильно делать выпадающие менюшки. На самой первой картинке сразу бросается в глаза что второй уровень меню находится не по центру так что «Поп» под «Музыкой», а смещён влево. Эти мелочи как например и правостороннее меню (как в винде) нете часто делается абы-как. Надо ведь и с поддержкой клавиатуры и с учётом движения мышки не под прямым градусом, а по прямой траектории треугольника (отсюда часто пользователь не может попасть до нужного уровня меню)

    Ответить
  13. Интересное для веб-мастеров (22.08.2008) » Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров от школы создания с:
    21 Сен 2008 в 23:14

    [...] Динамическое 2-х уровневое меню В этом уроке я хочу показать вам как сделать приятное динамическое меню с помощью CSS и немного Javascript. Оригинальный урок опубликован в статье Pastel color menu with dynamic submenu using CSS. Я немного изменил HTML и CSS код, для того чтобы конечный результат стал более семантически корректным… [...]

    Ответить
  14. Обзор №8, Июль — Август, 2008 - Design For Masters:
    27 Сен 2008 в 19:03

    [...] Динамическое 2-х уровневое меню [...]

    Ответить
  15. Maxim:
    8 Дек 2008 в 20:40

    Спасибо. Аккуратно, красиво, грамотно.

    Ответить
  16. Обзор №8, Июль — Август, 2008 | Интересные новости:
    1 Янв 2009 в 17:59

    [...] Динамическое 2-х уровневое меню [...]

    Ответить
  17. Обзор №8, Июль — Август, 2008 | Интересные новости:
    1 Янв 2009 в 17:59

    [...] Динамическое 2-х уровневое меню [...]

    Ответить
  18. 99 техник создания меню для сайта CSS и jQuery | SHEBEKO.COM:
    25 Мар 2010 в 12:57

    [...] Динамическое 2-х уровневое меню | Демо версия [...]

    Ответить
  19. AKA:
    30 Апр 2010 в 15:30

    У меня маленький вопрос.
    Постоянно нахожу уроки, в которых вот такие меню делаются с помощью списков. Зачем? Можно же делать все те же корректировки расположения изменяя свойства тега ссылки. Зачем ссылку обрамлять ещё и тегами списка? Можно я не знаю каких-то прелестей такой вёрстки?

    Ответить
    • Alex:
      1 мая 2010 в 10:41

      Потому что меню есть ни что иное как перечень ссылок. Поэтому логично использовать элемент ul для этого.

      Ответить

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