Сейчас: 05:21:05   19-го марта 2024 г.
UsefulScript.ruСкриптыСложные менюРаздвижное меню на jQuery
74
279

Вертикальное раздвижное меню на jQuery

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


Сразу хотим продемонстрировать Вам работу предлагаемого меню на примере. Для этого обратите внимание на меню, расположенное ниже:



Как Вы могли заметить, при клике по пунктам меню "Скрипты", "Онлайн-сервисы" или "Хитрости", меню разворачивается и показывается подменю. При клике по пунктам меню "Поддержка" или "Форум", сразу осуществляется переход к нужной страничке.


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

JavaScript код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>

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

HTML код:
<style type="text/css">
ul#menu, ul#menu ul {
  
list-style-type:none;
  
margin0;
  
padding0;
  
width250px;
}

ul#menu a,ul#menu span { display: block; text-decoration: none; }

ul#menu li { margin-top: 1px; }

ul#menu li a,ul#menu li span {
  
background#333333;
  
color#FFFFFF;
  
padding7px;
}

ul#menu li a:hover,ul#menu li span:hover { background: #000000; }

ul#menu li ul li a {
  
background#CCCCCC;
  
color#000000;
  
padding-left20px;
}

ul#menu li ul li a:hover {
  
background#AAAAAA;
  
border-left5px #000000 solid;
  
padding-left15px;
}
</
style>

Меню, которое будет раздвигаться и сдвигаться при клике по его пунктам, следует прописать следующим образом:

HTML код:
<ul id="menu">
 <
li><span>Скрипты</span>
    <
ul>
     <
li><a href="log_info.php">Скрипт записи логов</a></li>
     <
li><a href="current_time.php">Текущая дата и время</a></li>
     <
li><a href="slide_show_jquery.php">Слайд-шоу на jQuery</a></li>
     <
li><a href="scroll_to_top.php">Кнопка вверх</a></li>
    </
ul>
 </
li>
 <
li><span>Онлайн-сервисы</span>
    <
ul>
        <
li><a href="csscompressor.php">Сжатие CSS кода онлайн</a></li>
        <
li><a href="opennet.php">Калькулятор диапазонов IP</a></li>
        <
li><a href="qrcoder.php">Онлайн генератор QR кодов</a></li>
        <
li><a href="gtmetrix.php">Анализ скорости сайта</a></li>
    </
ul>
 </
li>
 <
li><a href="http://usefulscript.ru/support.php">Поддержка</a></li>
 <
li><a href="http://usefulscript.ru/forum/index.php">Форум</a></li>
 <
li><span>Хитрости</span>
    <
ul>
        <
li><a href="csssprites.php">Использование CSS спрайтов</a></li>
        <
li><a href="rgb_cod_color.php">HEX и RGB коды цветов</a></li>
        <
li><a href="no_www.php">Убрать www из адреса сайта</a></li>
    </
ul>
 </
li>
</
ul>

Теперь остается лишь где-нибудь в конце странички добавить наш JavaScript код, который будет отвечать за плавное сворачивание и разворачивание меню (его подпунктов). Для этого скопируйте себе данный JavaScript код:

JavaScript код:
<script type="text/javascript">
$(
document).ready(function() {
 $(
"#menu ul").hide();
 $(
"#menu li span").click(function() { $(this).next().slideToggle("normal"); });
});
</script>

Если же Вы хотите чтобы одновременно был открыт только один пункт меню, то замените выше приведенный JavaScript код на такой:

JavaScript код:
<script type="text/javascript">
$(
document).ready(function() {
$(
"#menu ul").hide();
$(
"#menu li span").click(function() {
    $(
"#menu ul:visible").slideUp("normal");
    if (($(
this).next().is("ul")) && (!$(this).next().is(":visible"))) {
        $(
this).next().slideDown("normal");
    }
});
});
</script>

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


P.S. Спустя чуть больше года, JavaScript код был немного изменен и упрощен, так что пришлось удалить некоторые неактуальные на данный момент комментарии.

Дата создания: 14:54:20 30.06.2013 г.
Дата обновления: 14:19:08 10.10.2014 г.
Посещений: 36787 раз(а).

Комментарии посетителей (55 шт.):
Илья
-1
# 1021
(17:52:28  04.08.2013 г.)

А можете, пожалуйста, расписать, где какой цвет Вы применили, а то хочу такое меню, а цвет поменять не могу.
Ответить

Елена
2
# 1156
(16:43:20  26.09.2013 г.)

Здравствуйте!
Давно ищу информацию о том, как сделать выдвижные рубрики. И наконец, нашла.
Не могли бы Вы подсказать, как сделать выдвижные рубрики без цветового отображения каждой рубрики. Чтобы фон сайта сохранялся.
Заранее благодарю!
Ответить

Administrator
2
# 1157
(20:27:44  26.09.2013 г.)

Попробуйте для стиля "ul#menu li ul li a" указать "background: none;".
Ответить

Алексей
-1
# 1360
(10:41:07  22.12.2013 г.)

Как сделать админку для добавления статей в эти пункты меню?
Ответить

Administrator
0
# 1361
(12:35:11  22.12.2013 г.)

Для этого понадобится все, что находится внутри <ul id="menu"></ul> формировать при помощи PHP и MySQL. Таким образом, добавив или удалив какой-то пункт из MySQL через админку, меню тоже изменится.
Ответить

Алексей
1
# 1401
(22:47:34  15.01.2014 г.)

А как сделать, чтоб после перехода по пункту меню, на следующей странице меню не сворачивалось, а оставалось развернутым? Или в данном скрипте нельзя такое реализовать? Заранее спасибо.
Ответить

Administrator
1
# 1402
(23:02:01  15.01.2014 г.)

Как вариант, можно при помощи jQuery отловить клик по пункту меню, отправить id данного пункта POST запросом на сервер, где сохранить его в переменную сессии. После этого произойдет переход на следующую страницу, где берем id из сессии и разворачиваем пункт с данным id.
Ответить

Алексей
1
# 1403
(23:09:04  15.01.2014 г.)

Ого. Спасибо конечно, но наверно я не особо понимаю как это. А можно как-то скоординировать, типа "находим с в скрипте строку такую-то и меняем на такую-то". Извиняюсь если глупость сморозил, просто не понимаю техники исполнения данного совета.
Ответить

Administrator
2
# 1404
(23:12:51  15.01.2014 г.)

Через пару дней постараюсь сделать и выложить на форум.
P.S. Вот что получилось - http://usefulscript.ru/forum/showthread.php?tid=262
Ответить

Максим
0
# 2984
(02:27:21  18.01.2016 г.)

Как реализовать такое меню в 1с битрикс?
Ответить

Альберт
0
# 1787
(16:49:14  05.08.2014 г.)

Я всё сделал на своем сайте Wordpress, но когда я нажимаю на Скрипты, то меню разворачивается, а вот когда я опять нажимаю на Скрипты, то обратно не сворачивается.
Ответить

Administrator
1
# 1788
(20:35:30  05.08.2014 г.)

Причина может быть в конфликте с уже имеющимися скриптами. Проверяйте на пустой страничке, а уже потом встраивайте на сайт.
Ответить

Альберт
2
# 1789
(20:02:21  06.08.2014 г.)

Проверил на пустой и вроде всё работает. А что же тогда делать с сайтом? Как определить с чем он конфликтует?
Ответить

Administrator
1
# 1790
(22:21:28  06.08.2014 г.)

Попробуйте поочередно отключать скрипты, тогда круг сузится или переименуйте id="menu", например в id="collapsing_menu", и все остальные упоминания "#menu" в "#collapsing_menu", т.к. возможно какой-то скрипт перехватывает именно этот распространенный id.
Ответить

Ник
0
# 1829
(15:06:12  26.08.2014 г.)

Добрый день, работает прекрасно, но когда я в тег вставляю адрес
<a href="/katalog/sivic_sh_ob">Шиномонтажное оборудование</a></li>
раскрывается сразу все меню со всеми подпунктами и уже не закрывается, и в первом и во втором варианте скрипта!? Подскажите, в чем может быть дело?
Ответить

Administrator
0
# 1832
(20:45:21  26.08.2014 г.)

Из Вашего описания не понятно, в какой тег Вы вставляете приведенную строчку кода.
Ответить

Роман
1
# 2098
(00:02:52  08.12.2014 г.)

Здравствуйте! Подскажите, можно ли этот скрипт использовать для разворота только одного пункта, но та всю высоту экрана? То есть мне нужна возможность разворачивать и сворачивать карту. Получается как бы один пункт но с разворотом на весь экран. За ранее спасибо за ответ!
Ответить

Administrator
0
# 2101
(20:19:05  08.12.2014 г.)

В Вашем случае, наверное, целесообразнее использовать скрипт спойлера.
Ответить

Дмитрий
0
# 2272
(11:42:31  22.02.2015 г.)

Здравствуйте.
Очень понравился скрипт, красивый.
А есть ли возможность подменю модифицировать так: при наведении мышью - разворачивается, убираешь мышь - сворачивается?
Ответить

Administrator
1
# 2273
(16:11:36  22.02.2015 г.)

Замените JavaScript код на такой:
$(document).ready(function() {
$("#menu ul").hide();
$("#menu li").hover(function() { $(this).children("ul").slideToggle("normal"); });
});
Ответить

Родион
0
# 2311
(22:09:08  10.03.2015 г.)

Здравствуйте.
Есть ли возможность, чтобы, к примеру, слово "скрипты" - было рисунком (квадратом, стрелкой и т.д.) при нажатии на который разворачивались как и сейчас подменю?
Ответить

Administrator
1
# 2312
(22:25:52  10.03.2015 г.)

Конечно есть. Для этого в меню <li><span>Скрипты</span> замените на <li><img src="image.png">.
В скрипте, для того чтобы срабатывали клики по рисункам и по надписям, $("#menu li span").click(function() замените на $("#menu li span, #menu li img").click(function()
Ответить

Ирина
0
# 2356
(13:24:04  27.03.2015 г.)

Добрый день!
Подскажите, пожалуйста, как сделать так, чтобы при нажатии на пункты "Скрипты", "Онлайн-сервисы" открывались не только подпункты, но и соответствующий раздел "Скрипты", "Онлайн-сервисы". Если ставить прямую ссылку, то раздел открывается, а подпункты не открывается. Как быть, чтобы открывалось всё?
Ответить

Administrator
1
# 2357
(19:33:08  27.03.2015 г.)

Т.к. происходит переход по ссылке ("Скрипты", "Онлайн-сервисы" и т.д.), то внешний вид меню сбрасывается в исходное состояние.
Чтобы скрипт запомнил какой из пунктов после перехода должен быть развернут, воспользуйтесь уже имеющимся кодом и рекомендациями сообщения №10 соответствующей темы <a href="http://usefulscript.ru/forum/showthread.php?tid=262&pid=1947#pid1947">нашего форума</a>.
Только ссылка пунктов "Скрипты" и т.д. должны быть внутри тегов <span> и удалите из скрипта return false;
Ответить

Нина
0
# 2634
(01:02:45  17.08.2015 г.)

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

Нина
0
# 2642
(20:36:04  18.08.2015 г.)

Спасибо, разобралась. Кто будет искать, тот же скрипт, только присвоить класс вложенным спискам.
Ответить

Costea
0
# 2648
(20:40:48  19.08.2015 г.)

А как сделать чтобы, допустим первый <ul> по умолчанию был открытым?
Я попробовал поставить для первого <ul class="opened"> и в jquery так: $("#menu ul opened").slideDown(); но открывается, и быстро закрывается обратно.
Ответить

Administrator
0
# 2649
(22:50:32  19.08.2015 г.)

Лучше используйте: $("#menu .opened").slideDown();
Ответить

Влад
0
# 2921
(08:04:11  21.12.2015 г.)

Как избавится от данного эффекта?
Как Вы уже могли заметить, пока страничка еще грузится, то меню полностью развернуто и видно все подпункты. Это не ошибка. Это специально сделано для того чтобы пользователи, которые отключили поддержку JavaScript, тоже могли пользоваться меню.
Ответить

Administrator
0
# 2922
(20:23:41  21.12.2015 г.)

Добавьте новый стиль: #menu ul { display:none; }
Тогда строчку: $("#menu ul").hide(); отвечающую за первоначальное сворачивание меню можно удалить.
Ответить

Андрей
0
# 3078
(12:28:46  12.03.2016 г.)

Добрый день, подскажите как пометить, например, вот таким символом "+" все элементы списка у которых есть дочерние списки? Спасибо, премного благодарен!
Ответить

Administrator
0
# 3079
(17:59:13  12.03.2016 г.)

Добавьте в CSS следующий стиль: ul#menu li span:before{content:"+ ";}
Ответить

Dmitry
0
# 3110
(11:16:25  23.03.2016 г.)

У меня это меню уже в развернутом виде. Каждый пункт.
Ответить

JustMe
0
# 3139
(17:45:08  31.03.2016 г.)

Доброго времени суток!
А не подскажете, как сделать, чтобы при клике на пункт меню, предыдущее закрывалось? Спасибо!
Ответить

Administrator
0
# 3142
(22:09:49  31.03.2016 г.)

Просто вместо предпоследнего JavaScript кода из данной темы используйте последний код, но не оба сразу!
Ответить

Ирина
0
# 3149
(19:36:13  01.04.2016 г.)

Здравствуйте! Как сделать, чтобы при нажатии на ссылку из подменю, когда данная страница остается открытой, то в списке подменю ссылка на эту страницу была бы как-нибудь затемнена или обведена, т.е. чтобы пользователь смог знать, на какой ссылке остановился? А то очень неудобно получается. Спасибо.
Ответить

Сергей
0
# 3328
(13:17:28  14.07.2016 г.)

Добрый день! После установки столкнулся с такой проблемой: страница увеличилась автоматически на всю длину всех раскрывающихся подпунктов. Есть ли способ скрывать пустые места?
Ответить

Administrator
0
# 3329
(21:37:20  14.07.2016 г.)

Попробуйте добавить стиль: ul#menu ul {display:none;}
Ответить

Сергей
0
# 3332
(17:33:30  15.07.2016 г.)

Спасибо, помогли решить вопрос. Правда теперь открывающийся большой раздел насквозь прошивает футер, но это не страшно. Просто увеличу область основного контента.
Ответить

Валентин
0
# 3334
(14:43:46  18.07.2016 г.)

Здравствуйте!
Напишите, пожалуйста, как сделать, чтоб при заходе на сайт пункт меню "Скрипты" всегда был открыт. А при нажатии на пункт "Онлайн-сервисы" скрывался пункт "Скрипты"? ...и также для других пунктов.
Ответить

Administrator
0
# 3336
(20:51:33  18.07.2016 г.)

В сообщении # 2648 уже приводили пример, как это делается. Опишу подробнее...
После <span>Скрипты</span> вместо <ul> вставляете <ul class="opened">,
а в JS код после строчки $("#menu ul").hide(); добавьте $("#menu .opened").slideDown();
Ответить

Валентин
0
# 3337
(23:51:02  18.07.2016 г.)

Спасибо большое за ответ. Никак не разберусь, куда прописывать <ul class="opened"> в joomle 3.5?
Ответить

Сергей
0
# 3442
(10:29:55  24.09.2016 г.)

Доброе утро!
Подскажите, как сделать, чтобы при раздвижении, блоки двигали остальные элементы снизу, в частности футер? Сейчас раздвижной блок перекрывает футер.
Ответить

Administrator
0
# 3449
(14:47:30  25.09.2016 г.)

Все зависит от конкретного сайта и его верстки. Например, на данном сайте, как Вы можете убедиться сами, при разворачивании меню, все содержимое сайта само сдвигается вниз.
Ответить

Александр
0
# 3481
(12:31:20  30.09.2016 г.)

Спасибо за меню, внедрил к себе на сайт.
Ответить

Александр
0
# 3485
(14:49:40  03.10.2016 г.)

Добрый день. Такой вопрос. Когда меню имеет подпункты добавил класс в css:
ul#menu li span:after { content: " + "; }
Как сделать чтобы + менялся на - когда пункт меню открыт?
Через css не смог сделать, а js вообще не знаю. Спасибо.
Ответить

Administrator
0
# 3488
(23:52:03  03.10.2016 г.)

Пока придумал только такой вариант... Добавьте два новых класса:
.after:after { content: " + "; }
.after2:after { content: " - "; }
А JavaScript код замените на такой:
$(document).ready(function() {
$("#menu ul").hide();
$("ul#menu li span").addClass("after");
$("#menu li span").click(function() {
if (!$(this).hasClass("after")) { $(this).removeClass("after2").addClass("after"); }
else $(this).removeClass("after").addClass("after2");
$(this).next().slideToggle("normal");
});
});
Ответить

Вадим
1
# 3530
(14:36:00  31.10.2016 г.)

Добрый день. Скажите, пожалуйста, а какой сценарий js должен быть при двухуровневом списке (список в списке)? А то у меня новый список все хорошо, а если старый взять, то он элементы раскрывает, а назад не сворачивает.
Ответить

Димка
0
# 3542
(00:12:30  08.11.2016 г.)

Здравствуйте. А подскажите, как сохранить состояние меню? Т.е. чтобы после перезагрузки страницы сохранялись все развернутые пункты меню в localstorage.
Ответить

Administrator
0
# 3544
(12:17:06  08.11.2016 г.)

На нашем форуме в теме скрипт раздвижного меню уже рассматривались подобные вопросы.
Ответить

Сергей
0
# 3645
(17:14:23  31.12.2016 г.)

А как сделать такое меню, чтобы после клика на подпункт меню не закрывалось?
Ответить

Administrator
0
# 3646
(17:36:29  31.12.2016 г.)

Чуть выше, в сообщении # 3544 имеется ссылка на наш форум, где подобный вопрос уже рассматривался.
Ответить

Геннадий
0
# 3941
(05:36:28  11.06.2017 г.)

Нужна помощь. Сделал по данному варианту свое меню, но хотел бы, чтоб пункт "Каталог" при кликании по нему, ссылка никуда не вела, а открывала подменю, и такая же система работы с подменю, чтобы был указатель мыши "РУКА" при наведении и кликании, а не вертикальная черточка.
HTML код перенес на форум.
Ответить

Валерий
0
# 4552
(10:35:36  19.11.2019 г.)

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

Administrator
0
# 4555
(19:37:15  19.11.2019 г.)

Разворачивание меню при наведении курсора мышки уже рассматривали в комментарии # 2273.
Ответить

Закрыть
Ваше имя:
726 + 19 =
Добавить комментарий:
Ваше имя:
726 + 19 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Посетителей онлайн: 5

Как Вы узнали о нашем сайте?