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

Меню

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

112

Вертикальное выпадающее меню CSS+JS OnClick

Jemand 111822 , , , ,
CSS, JavaScript

В данном вертикальном меню, подменю открывается не при наведении курсора на главный пункт меню, как в предыдущем примере, а при клике на него.
1. CSS

#menu_body li ul {
	display: none;
	}
#menu_body li:hover ul, #menu_body li.over ul {
	display: block;
	}
 #menu_body {
    background:#171717;
    width: 200px;
    }
#menu_body a {
	display: block;
	width: 185px;
	height: 24px;
	padding-left: 15px;
	} 

#menu_body ul li {
    list-style-type: none;
    border-bottom: 1px solid #fff;
    margin-left: -40px;
    padding-left: 0px;
    } 

#menu_body ul li a {
    color: #fff;
    text-decoration: none;
	font-size: 115%;
	font-family: Georgia;
    } 

#menu_body ul li a:hover {
    color: #fff;
    text-decoration: none;
	background:#424242;
    } 

#menu_body ul li ul li {
    border: 0;
    list-style-type: none;
    color: #fff;
    list-style-position: inside;
	background:#7F7F7F;
    } 

#menu_body ul li ul{
    border-top: 1px solid #fff;
    margin-left: -10px;
    padding-left: 50px;
    }

2. JavaScript
Данный код вставляем перед закрывающим тегом </head>

<script type="text/javascript">
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');
startList = 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";
	}
}
window.onload=startList;
</script>

2.1. Разбор JavaScript

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

В данной строке нужно указать столько sub_menu сколько у Вас будет раскрывающихся групп меню. Т.е. если у Вас девять пунктов меню, указываем все девять:

'sub_menu_1','sub_menu_2','sub_menu_3','sub_menu_4','sub_menu_5','sub_menu_6','sub_menu_7','sub_menu_8','sub_menu_9'

3. HTML

<div id="menu_body">
	<ul>
		<li><a href="#" onclick="openMenu('sub_menu_1');return(false)">Пункт №1</a>
			<ul id="sub_menu_1">
				<li><a href="#">Подпункт №1</a></li>
			</ul>
		</li>
		<li><a href="#" onclick="openMenu('sub_menu_2');return(false)">Пункт №2</a>
			<ul id="sub_menu_2">
				<li><a href="#">Подпункт №1</a></li>
				<li><a href="#">Подпункт №2</a></li>
			</ul>
		</li>
		<li><a href="#" onclick="openMenu('sub_menu_3');return(false)">Пункт №3</a>
			<ul id="sub_menu_3">
				<li><a href="#">Подпункт №1</a></li>
				<li><a href="#">Подпункт №2</a></li>
				<li><a href="#">Подпункт №3</a></li>
			</ul>
		</li>
	</ul>
</div>

Internet Explorer 6 не совсем корректно отображает данное меню, но это всего лишь проблема стилей, которые мне просто лень подгонять под IE6.

Демо

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

» 112 комментария

  1. Классное меню. Вот если бы еще была возможность открывать сразу все подпункты и закрывать сразу все.
    Респект автору!

  2. Это ни есть одно и тоже.
    Просто к существующим возможностям добавится новая функциональность.

  3. У меня меню ушло влево, за экран (примерно на четверть), т.е. обрезалось слева, что делать? (Я просто новичок в этих делах)

  4. Уточню. Меню обрезалось наполовину (ушло за экран влево). Может быть мешают другие существующие настройки в файле styles.css (куда я закинул css этого примера)

  5. Думаю куда выложить…

    А пока придумал вам еще вариацию этого меню.
    ЧТОБЫ ТЕКУЩИЕ ПОДПУНКТЫ НЕ ЗАКРЫВАЛИСЬ АВТОМАТИЧЕСКИ ПРИ КЛИКЕ НА НОВЫЙ ПУНКТ (ОТКРЫТИИ НОВОЙ ГРУППЫ ПОДПУНКТОВ), А ТОЛЬКО ПО КЛИКУ ПО ПУНКТУ.
    Классно будет! Чеслово!

    • Это просто:
      В коде

      function openMenu(id){
      	for (i=0; i < id_menu.length; i++){
      		if (id != id_menu[i]){
      			document.getElementById(id_menu[i]).style.display = "none";
      		}
      	}

      Находим строку for (i=0; i < id_menu.length; i++){
      и меняем в ней < на == меню.

  6. Спасибо!

  7. Точно. Оставил в styles.css только код из примера – все заработало!
    Можно ли использовать и как два файла: styles.css и styles2.css. И как на них организовать ссылки в основном коде? Или еще что предпринять, чтобы отделить стили? Спасибо.

  8. Все. Отделил стили по разным файлам. Подключил нужным образом через в нужных местах в html страницах… Все заработало.
    Можно не отвечать на мой вопрос.

  9. А можно вместо перечисления sub_menu по номерам написать var id_menu = new Array (‘sub_menu’+i);?

  10. Буду пробовать. За скрипт спасибо. У Вас всегда что-нибудь полезное можно найти

  11. Как сделать так, чтобы все подпункты были не каждый в отдельную строку, а чтобы все в одну строку?

  12. Пока у меня все получается. Спасибо.
    Но потом очень хочу поробовать сделать так чтобы по двойному клику (по “шапке”) абсолютно все подпункты раскрывались и еще раз по двойному клику – все подпункты закрылись. Если кто знает как – поделитесь плиз… А может доп. кнопки какие для полного раскрытия (закрытия) сделать… Пока не соображу, опыта мало…
    Повторюсь, меню класс. Спасибо. Сколько не смотрел это больше всего понравилось.

  13. Странно, у меня меню через раз работает. То открывается, то нет. Пробовала в нескольких браузерах открывать. Все равно. С чем это может быть связано?

  14. Работает!!!!!!!!!!!!!!!!!! Спасибо за скрипт))

  15. У кого нибудь получилось стилизовать его под ie6? Если да, то скиньте пожалуста кусочек!:(

  16. а как сделать это меню многоуровневым?

  17. Спасибо за труд.
    Воспользовался, но для всех требований не хватает малого:
    возможно ли малым внесением в код реализовать следующее: при переходе по ссылкам Пункт №1(2 и т.д) либо Подпункт №1(2,3..), на вновь открывшейся странице меню не сворачивалось, а оставалось развернутым на Пункте №1? т.е. не сворачивал всё меню, а запоминал что было открыто.

  18. Оставалось развернутым на Пункте №1? т.е. не сворачивал всё меню, а запоминал что было открыто. Очень интересно было бы посмотреть на реализацию. Будем ждать ;)

  19. Подскажите пожалуйста, а как вписать в кнопку меню длинную фразу и что бы кнопка при этом увеличивалась в высоту. У меня не получается.

  20. Спасибо огромное за скрипт – как раз то что искал!

  21. Отличное меню!!! Огромное спасибо автору!!!!

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

    • Вам нужно чтоб при переходе по страницам меню “запоминало” в каком положении (свернуто\развернуто) оно находится?
      Если да, то нужно использовать jQuery Cookie.

  22. А как сделать чтобы просто оно не сворачивалось при переходе на другую страницу?

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

    • У этого меню два состояния при загрузке страницы, либо свёрнуто, либо развёрнуто.
      Вам нужно раскрытое меню при каждой загрузке страницы? Тогда в скрипте поменяйте block на none, а none на block, и замените <  на == в коде

      function openMenu(id){
      	for (i=0; i < id_menu.length; i++){
      		if (id != id_menu[i]){
      			document.getElementById(id_menu[i]).style.display = "none";
      		}
      	}
  24. А как для IE корректно сделать работу этого меню??

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

  26. Доброе время суток Подскажите как можно данное меню сделать так чтобы оно открывалось и закрывалось плавно Спасибо!

  27. Можно сделать с помощью jQuery, возможно сегодня ближе к ночи выложу пример.

  28. А как его сделать горизонтальным?

  29. Огромное спасибо! Я искал, и вот нашел то меню, которое требуется заказчику. Сам начинающий программист, и со списками у меня как-то пока не очень.

  30. Скажите пожалуйста а как приписать стиль тому пункту который открыт, тоесть нажали на первый пункт и он стал другого цвета фон например, тоесть как придавать стили тем пунктам которые открываются(то есть на которые кликнул)
    Поясню подробнее:
    Нажимаем на Пункт №2 и из него выпадают Подпункт №1 и Подпункт №2 и в этот момент чтобы Пункт №2 был с другими стилями

    Как такое осуществить скажите пожалуйста! Буду очень благодарен!

  31. Здесь уже спрашивали,
    “как бы сделать так, чтобы на той странице, где уже находишься подпункты были развернуты”

    Только по идее того, чтобы меню “запоминало” немного маловато. Как сделать, чтобы подразделы меню были раскрыты, если человек попал на страницу, скажем, из поисковика, а не по меню?..

    • Вы определитесь. Нужно чтоб пункты были свёрнуты или развёрнуты когда пользователь попадает на страницу?

      • Развернуты

        • Тогда можно сделать просто развёрнутое меню. Или так тоже не подходит?

          • 27 сентября 2011 12:34

            Thumb up 0  Thumb down0 0

            Да можно, конечно. Но если развернуть все подпункты, оно уж очень габаритное у меня получается. А так, если развернуть только один нужный подпункт, самое оно:)

        • Т.е. нужно чтоб активный пункт меню был раскрыть?
          Примерно так:

          Меню:
          Фрукты
          Ягоды
          Овощи

          Пользователь заходит на главную страницу раздела ягоды, и меню раскрывается так:

          Меню:
          - Фрукты
          - Ягоды
          – Брусника
          – Малина
          - Овощи

          Так???

          • 27 сентября 2011 13:53

            Thumb up 0  Thumb down0 0

            Да! Главное, чтобы меню было раскрыто независимо от того, как попал пользователь на “Ягоды” – через навигацию сайта или через поисковик.
            Подумал, наверное это нужно как-то привязывать к CMS. Должен быть какой-то индекс (у каждого раздела свой), благодаря чему нужный подраздел меню раскрывается там, где надо. Может как-то так.. я не программист)

  32. Здраствуйте, Jemand!
    Меню очень понравилось. Подскажите, пожалуйста, а можно ли на его основе реализовать еще подпункты?
    т.е.:
    пункт1
    -подпункт1
    -подпункт2
    –подподпункт1
    –подподпункт2
    -подпункт3
    пункт2

    что-то наподобии этого? Ну и соответственно, что бы это все разворачивалось-сворачивалось при нажатии?

  33. decart, я попробую посмотреть что можно сделать, но не обещаю.

    Александр, посмотрите здесь на сайте, были меню с подпунктами.

  34. Сделал так:
    Name

    Это работает. Правильно ли делать таким образом?
    javascript начал изучать недавно.

  35. Сделал так:
    href = “#” onclick=”document.location.href = ‘http://site_name’ ; openSubmenu(‘submenu_1′); return false; “>

    Это работает. Правильно ли делать таким образом?
    javascript начал изучать недавно.

  36. Как сделать чтоб подпункты выскакивали с права от меню а не вниз? спасибо!

  37. Здравствуйте.У меня проблема.При вставки меню подменю уползает влево.Перепробовал все настройки не помогает(((.Подскажите что может быть?

  38. Премного благодарен!!!!))) Я такое меню уже неделю как исчу), но нашел похожее только на JQuery – а там файл кода около 150Кb (Ваше js+css=1,55Kb). Вопщим класное маню! Автору БАЛЬШОЙ РЕСПЕКТ!!!

  39. Да, если интересно могу дать ссилку на меню с JQ.

  40. Скажите пожалуйста, а как сделать чтобы шрифт в подпунктах был меньшим чем в пунктах ато чет я розобраться не могу(

  41. Спасибо, помогло)

  42. Здравствуйте. После установки всё заработало. Появилась проблема при изменении: когда добавляю несколько новых меню (добавлением пунктов в js как вы и описывали) , а также добавления соответствующих элементов в body страницы я получаю следующее:

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

  43. Добрый вечер. Очень понравилось меню. Но один момент при переходе по ссылке можно сделать так чтобы один из пунктов не сворачивался? Плиз дайте ответ :)

  44. Ват изит куки )

  45. Спасибо за ответ уже изучаю :)

  46. Меню зачетное! нО!!!
    у меня на сайте есть менб который только видит Администратор.
    я делаю так

    
    		<a href="#" rel="nofollow">Новости</a>
    
    				<a href="#" rel="nofollow">Подпункт №1</a>
                    <a href="#" rel="nofollow">Подпункт №2</a>
                    <a href="#" rel="nofollow">Подпункт №3</a>
    
    	<a href="#" rel="nofollow">Учебные материалы</a>
    
    				<a href="#" rel="nofollow">Exploration</a>
    				<a href="materials.php" rel="nofollow">Discovery</a>
                    <a href="#" rel="nofollow">Soft</a>http://vimeo.com/26569110 A Timelapse Journey with Nature
    			

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

    как сделать что бы при простом юзере менб норм работало! надеюсь понятно…))

  47. Подскажите пожалуйста как сделать, чтобы при переходе на другую страницу сайта часть меню(с подменю) оставалить открытыми????

  48. Добрый день!
    Подскажите пожалуйста, как сделать так, чтобы при открытии одного из подпунктов меню, оно оставалось открытым при переходе на другую страницу???
    Заранее благодарен!

  49. Подскажите рожалуйста как сделать запоминающий подпункт при переходе на другую страницу????
    заранее благодарен)

  50. здравствуйте. У меня такой вопрос,как сделать так,чтобы у свернутого пункта стоял “+”, а у развернутого “-” ?

  51. Здравствуйте. Очень нужна ваша помощь, пожалуйста.
    Не могли бы Вы выложить код .css и .html самого меню как вот здесь:

    http://jemand.ru/examples/unsorted/vertikalnoe-vypadayushhee-menyu-cssjs-onclick-dlya-yuriya.html

    Я просто уже второй день пробую, не могу его скрепить полностью. Мне нужно именно само меню, чисто меню.
    Буду очень благодарен.
    Статья супер. Меню класс))

    • Пожалуйста.

      <html>
      <style>
      #menu_body li ul {
      	display: none;
      	}
      #menu_body li:hover ul, #menu_body li.over ul {
      	display: block;
      	}
       #menu_body {
          background:#171717;
          width: 200px;
      	text-align: center;
          }
      #menu_body a {
      	display: block;
      	width: 200px;
      	height: 24px;
      	} 
      
      #menu_body ul li {
          list-style-type: none;
          border-bottom: 1px solid #fff;
          margin-left: -40px;
          padding-left: 0px;
          } 
      
      #menu_body ul li a {
          color: #fff;
          text-decoration: none;
      	font-size: 115%;
      	font-family: Georgia;
          } 
      
      #menu_body ul li a:hover {
          color: #fff;
          text-decoration: none;
      	background:#424242;
          } 
      
      #menu_body ul li ul li {
          border: 0;
          list-style-type: none;
          color: #fff;
          list-style-position: inside;
      	background:#7F7F7F;
          } 
      
      #menu_body ul li ul{
          border-top: 1px solid #fff;
          padding-left: 40px;
          }
      </style>
      <script type="text/javascript">
      var id_menu = new Array('sub_menu_1');
      startList = 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";
      	}
      }
      window.onload=startList;
      </script>
      </head>
      <body>
      <div id="menu_body">
      	<ul>
      		<li><a href="#" onclick="openMenu('sub_menu_1');return(false)">Меню</a>
      			<ul id="sub_menu_1" style="display: none; ">
      				<li> </li>
      				<li>Пункт №1</li>
      				<li> </li>
      				<li><a href="#">Подпункт №2</a></li>
      				<li><a href="#">Подпункт №1</a></li>
      				<li><a href="#">Подпункт №3</a></li>
      				<li> </li>
      				<li>Пункт №2</li>
      				<li> </li>
      				<li><a href="#">Подпункт №2</a></li>
      				<li><a href="#">Подпункт №1</a></li>
      				<li><a href="#">Подпункт №3</a></li>
      				<li> </li>
      				<li>Пункт №3</li>
      				<li> </li>
      				<li><a href="#">Подпункт №2</a></li>
      				<li><a href="#">Подпункт №1</a></li>
      				<li><a href="#">Подпункт №3</a></li>
      				<li> </li>
      			</ul>
      		</li>
      	</ul>
      </div>
      </body>
      </html>
      
  52. Доброе утро) Звучит глуповато, но все ж хотела задать след.вопрос: Как сделать,чтоб меню оставалась слева,а инфу можн было читать рядом в диве . Дело в том,что у меня 2-х колоночный сайт. И инфа в основном диве пишется не рядом с меню,а внизу меню,но у ся в … объяснила как смогла(((

  53. А как сделать его горизонтальным?

  54. Это не совсем то, что мне нужно.
    Вот пример – http://www.master-web.info/samples/menu/dropdownmenu-jquery/Ваш скрипт, практически одно и то же, только мне нужно, что бы меню было именно, как на примере выше (горизонтальное) но с вашей функцией OnClick. Т.е. при клике на родительскую ссылку в меню открывалось подменю, а не при наведении на него. Спасибо.

  55. СпасиБо огромное! Очень долго искала что-то подобное!

  56. как раз то, что мне было нужно! спасибо!


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