27

Вертикальное раскрывающееся меню

Автор: Jemand

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

CSS-код:

#menu_body {
background:#81A192;
width:200px
}
#menu_body ul li {
list-style-type:none;
border-bottom:1px solid #fff;
margin-left:-40px;
padding-left:7px
}
#menu_body ul li a {
color:#fff;
font-family:verdana,arial,sans-serif;
text-decoration:none
}
#menu_body ul li ul li {
border:0;
list-style-type:square;
color:#fff;
list-style-position:inside
}
#menu_body ul li ul {
border-top:1px solid #fff;
margin-left:-7px;
padding-left:50px
}

JavaScript: (добавляем в head после CSS)

var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');
function allclose() {
	for (i=0; i < id_menu.length; i++){
		document.getElementById(id_menu[i]).style.display = "none";
	}
}
function openMenu(id){
	for (i=0; i < id_menu.length; i++){
		if (id != id_menu[i]){
			document.getElementById(id_menu[i]).style.display = "none";
		}
	}
	if (document.getElementById(id).style.display == "block"){
		document.getElementById(id).style.display = "none";
	}else{
		document.getElementById(id).style.display = "block"; 
	}
}

В строке 

var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');

нужно добавить значений “sub_menu” столько, сколько групп меню будет, т.е. если будет 10 групп раскрывающихся меню, то здесь должны быть прописаны все 10 значений: sub_menu_1′,’sub_menu_2′,’sub_menu_3′,’sub_menu_4′,’sub_menu_5′ и т.д. Соответственно и HTML код должен содержать 10 блоков, иначе будут проблемы а работе.

В <body> добавляем вызов функции:

HTML-код:

<body onload="allclose()">

И в конце само тело нашего меню.

HTML-код:

<div id="menu_body">
<ul>

  <li><a href="#" onclick="openMenu('sub_menu_1');return(false)">menu 1</a> 
      <ul id="sub_menu_1">
          <li><a href="#">sub menu 1</a></li>
          <li><a href="#">sub menu 2</a></li>
          <li><a href="#">sub menu 3</a></li>
          <li><a href="#">sub menu 4</a></li>

          <li><a href="#">sub menu 5</a></li>
          <li><a href="#">sub menu 6</a></li>
          <li><a href="#">sub menu 7</a></li>
      </ul>
  </li>
  <li><a href="#" onclick="openMenu('sub_menu_2');return(false)">menu 2</a>
      <ul id="sub_menu_2">

          <li><a href="#">sub menu 1</a></li>
          <li><a href="#">sub menu 2</a></li>
          <li><a href="#">sub menu 3</a></li>
          <li><a href="#">sub menu 4</a></li>
          <li><a href="#">sub menu 5</a></li>
          <li><a href="#">sub menu 6</a></li>

          <li><a href="#">sub menu 7</a></li>
     </ul>
  </li>
  <li><a href="#" onclick="openMenu('sub_menu_3');return(false)">menu 3</a>
     <ul id="sub_menu_3">
          <li><a href="#">sub menu 1</a></li>
          <li><a href="#">sub menu 2</a></li>

          <li><a href="#">sub menu 3</a></li>
          <li><a href="#">sub menu 4</a></li>
          <li><a href="#">sub menu 5</a></li>
          <li><a href="#">sub menu 6</a></li>
          <li><a href="#">sub menu 7</a></li>
    </ul>
  </li>
</ul>
</div>

Пример, того что получится, можно посмотреть здесь.

Работоспособность:
Internet Explorer 8 Проверено, работает!
Firefox 3.5.4 Проверено, работает!
Opera 9.64 Проверено, работает!

Twitter SEO Community Ваау! Korica Google Bookmarks Digg Закладки Yandex Myscoop Zakladok.net Reddit БобрДобр.ru Memori.ru МоёМесто.ru Mister Wong
Оставьте своё мнение, и о нём узнают миллионы!

Уважаемые пользователи! Для того, чтобы комментировать записи Вы должны ввести своё имя, e-mail и решить простое уравнение. Это сделано для того, чтобы обезопасить блог от спама и спам-ботов.
При оставлении комментария, пожалуйста, воздержитесь от написания ссылок на сторонние ресурсы. Все комментарии фильтруются как плагинами так и вручную. Не тратьте своё и моё время.
Спасибо за понимание!

Комментариев - 27
  1. Максим 11 Янв, 2010

    Очень хорошее меню, давно искал такое. Большое спасибо!

  2. Георгий 14 Янв, 2010

    Добрый день!
    Очень хочется эту менюшку, но у меня не работает…
    я не профессионально занимаюсь html и css, но вроде все сделал верно…
    не могли бы Вы мне помочь в этом?

  3. Jemand 15 Янв, 2010

    Георгий, я Вам с радостью помогу, но для начала мне нужно увидеть Ваше меню, чтобы понять в чем проблема.

  4. Анастасия 18 Янв, 2010

    Здравствуйте!
    я тоже очень хотела бы сделать такое меню,но пока не получается.меню делаю не основное,а для категорий раздела в каталоге статей.из вашей статьи смогла только последний пункт сделать,а остальные-мозгов не хватает че куда поставить……..сайт мой на ucoz.вот адрес:http://salon-exclusive.my1.ru/publ
    Очень надеюсь на вашу помощь,пожалуйста!

  5. Jemand 18 Янв, 2010

    Что, конкретно, вызывает затруднения?

  6. Анастасия 18 Янв, 2010

    Куда ставить эти фрагменты:
    JavaScript: (добавляем в head после CSS)—–(ГДЕ ЭТО?)

    var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');
function allclose() {
	for (i=0; i &lt; id_menu.length; i++){
		document.getElementById(id_menu[i]).style.display = &quot;none&quot;;
	}
}
function openMenu(id){
	for (i=0; i &lt; id_menu.length; i++){
		if (id != id_menu[i]){
			document.getElementById(id_menu[i]).style.display = &quot;none&quot;;
		}
	}
	if (document.getElementById(id).style.display == &quot;block&quot;){
		document.getElementById(id).style.display = &quot;none&quot;;
	}else{
		document.getElementById(id).style.display = &quot;block&quot;; 
	}
}

    и этот:
    HTML-код:

    ???????????????

  7. Jemand 18 Янв, 2010

    Нужно найти в коде закрывающий тэг 

    </head>

    и добавить перед ним код 

    <script>
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');
function allclose() {
	for (i=0; i < id_menu.length; i++){
		document.getElementById(id_menu[i]).style.display = "none";
	}
}
function openMenu(id){
	for (i=0; i < id_menu.length; i++){
		if (id != id_menu[i]){
			document.getElementById(id_menu[i]).style.display = "none";
		}
	}
	if (document.getElementById(id).style.display == "block"){
		document.getElementById(id).style.display = "none";
	}else{
		document.getElementById(id).style.display = "block"; 
	}
}
</script>

    HTML-код нужно добавить между тэгами 

    <body> и </body>

    в нужное Вам место.

  8. Анастасия 18 Янв, 2010

    ВОТ ТАКАЯ СТРАНИЦА БЫЛА:

    А ВТОРОЙ КОД ТОГДА КУДА СТАВИТЬ????(ИЗВИНИТЕ,ПОЖАЛУЙСТА,ЧТО Я ТАКАЯ ТУПАЯ!)

  9. Jemand 18 Янв, 2010

    Нужно пользоваться HTML редактором, а не визуальным.

  10. Анастасия 18 Янв, 2010

    так я в визуальный и не заходила((((((((((((((

  11. Анастасия 18 Янв, 2010

    Вы не могли бы зайти на мой сайт и глянуть,что я не так делаю?я вроде сейчас поставила эти 2 кода-но меню не изменилось(((((

  12. Jemand 18 Янв, 2010

    1. Тэг body должен быть один на странице, у вас их два. Второй добавлять не нужно, нужно отредактировать первый.
    2. Я не нашел у Вас в коде JavaScript который нужен для работы меню.
    3. Я не нашел у Вас CSS код для меню.

    Нужно ставить все коды которые здесь написаны, а не только два.

  13. Jemand 18 Янв, 2010

    Я установил это меню для теста у себя, _http://jemand.ucoz.net, работает, если всё сделать правильно.

  14. Анастасия 18 Янв, 2010

    КУДА ЗДЕСЬ СТАВИТЬ JavaScript??????

  15. Jemand 18 Янв, 2010

    Скажите как вы редактируете страницу? Перечислите все пункты куда заходите для редактирования.
    Я Вам написал куда вставлять JS.

  16. Анастасия 18 Янв, 2010

    ОЙ!!!!!!!ВСЕ ПОЛУЧИЛОСЬ!!!СПАСИБО,ЧТО ТАК ДОЛГО ТЕРПЕЛИ МОЙ БРЕД! СТОИЛО МНЕ ДОБАВИТЬ КОД В CSS И ВСЕ ПОЛУЧИЛОСЬ!!СПАСИБО ВАМ ОГРОМНОЕ!А СКАЖИТЕ ЕЩЕ ,ПОЖАЛУЙСТА, КАК СДЕЛАТЬ ФОН НЕ ЗЕЛЕНЫМ,А ПРОЗРАЧНЫМ????

  17. Jemand 18 Янв, 2010

    Фон настраивается в CSS.

  18. Георгий 27 Янв, 2010

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

    http://affliction-russia.ru/mensstees.php

  19. Георгий 1 Фев, 2010

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

  20. Николь 28 Фев, 2010

    Спасибо за шаблон меню. Наконец нашла то, что нужно. Только у меня уточняющий вопрос. Как убрать точки и кружки перед названием меню и субменю, а также их подчеркивания?

    В CSS параметр text-decoration: none, выбранный мной для этой цели вообще не действует. Что не так? Или где нужно изменить чтобы это все убрать?

  21. Николь 4 Март, 2010

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

  22. Николь 4 Март, 2010

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

  23. Нина 14 Март, 2010

    Огромное спасибо!!! Добавила себе в коллекцию))) Все быстро и просто, и работает даже в IE6!

  24. Евгений 25 Март, 2010

    Спасибо за скрипт. Но у меня вопрос. Вобщем это меню инклудится ко всем страницам сайта отдельным файлом пхп. Допустим три главных пункта и в каждом n подпунктов. Вот я раскрыл один главный пункт, нажал на ссылку подпункта, перешёл куда надо. А меню снова свернулось. А мне нужно чтобы этот пункт, который я развернул отсавался в том же состоянии. Как это можно сделать?

  25. Artfish 15 Апр, 2010

    Как сделать данное меню многоуровневым или хотя бы трёхуровневым?

  26. lis13X 27 Май, 2010

    Спасибо отличная менюшка!

  27. monaxxx 19 Июнь, 2010

    Слишком сложно, код необходимо оптимизировать.