19

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

Автор: 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 и решить простое уравнение. Это сделано для того, чтобы обезопасить блог от спама и спам-ботов.
При оставлении комментария, пожалуйста, воздержитесь от написания ссылок на сторонние ресурсы. Все комментарии фильтруются как плагинами так и вручную. Не тратьте своё и моё время.
Спасибо за понимание!

Комментариев - 19
  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

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