Вертикальное раздвижное меню на jQuery
В данной теме мы хотим предложить Вам очень красивый и полезный скрипт вертикального раздвижного меню, реализованного при помощи библиотеки jQuery.
Сразу хотим продемонстрировать Вам работу предлагаемого меню на примере. Для этого обратите внимание на меню, расположенное ниже:
Как Вы могли заметить, при клике по пунктам меню "Скрипты", "Онлайн-сервисы" или "Хитрости", меню разворачивается и показывается подменю. При клике по пунктам меню "Поддержка" или "Форум", сразу осуществляется переход к нужной страничке.
Из названия можно было догадаться, что для реализации подобного меню у себя на сайте Вам понадобится библиотека jQuery. Если данная библиотека на Вашем сайте не была подключена ранее, то следует это сделать следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
Дальше необходимо прописать CSS стиль для нашего меню. Чтобы оно выглядело точно так же, как и в примере, приведенном выше, используйте следующее оформление:
<style type="text/css">
ul#menu, ul#menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 250px;
}
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;
padding: 7px;
}
ul#menu li a:hover,ul#menu li span:hover { background: #000000; }
ul#menu li ul li a {
background: #CCCCCC;
color: #000000;
padding-left: 20px;
}
ul#menu li ul li a:hover {
background: #AAAAAA;
border-left: 5px #000000 solid;
padding-left: 15px;
}
</style>
Меню, которое будет раздвигаться и сдвигаться при клике по его пунктам, следует прописать следующим образом:
<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 код:
<script type="text/javascript">
$(document).ready(function() {
$("#menu ul").hide();
$("#menu li span").click(function() { $(this).next().slideToggle("normal"); });
});
</script>
Если же Вы хотите чтобы одновременно был открыт только один пункт меню, то замените выше приведенный 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 код был немного изменен и упрощен, так что пришлось удалить некоторые неактуальные на данный момент комментарии.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Давно ищу информацию о том, как сделать выдвижные рубрики. И наконец, нашла.
Не могли бы Вы подсказать, как сделать выдвижные рубрики без цветового отображения каждой рубрики. Чтобы фон сайта сохранялся.
Заранее благодарю!
P.S. Вот что получилось - http://usefulscript.ru/forum/showthread.php?tid=262
<a href="/katalog/sivic_sh_ob">Шиномонтажное оборудование</a></li>
раскрывается сразу все меню со всеми подпунктами и уже не закрывается, и в первом и во втором варианте скрипта!? Подскажите, в чем может быть дело?
Очень понравился скрипт, красивый.
А есть ли возможность подменю модифицировать так: при наведении мышью - разворачивается, убираешь мышь - сворачивается?
$(document).ready(function() {
$("#menu ul").hide();
$("#menu li").hover(function() { $(this).children("ul").slideToggle("normal"); });
});
Есть ли возможность, чтобы, к примеру, слово "скрипты" - было рисунком (квадратом, стрелкой и т.д.) при нажатии на который разворачивались как и сейчас подменю?
В скрипте, для того чтобы срабатывали клики по рисункам и по надписям, $("#menu li span").click(function() замените на $("#menu li span, #menu li img").click(function()
Подскажите, пожалуйста, как сделать так, чтобы при нажатии на пункты "Скрипты", "Онлайн-сервисы" открывались не только подпункты, но и соответствующий раздел "Скрипты", "Онлайн-сервисы". Если ставить прямую ссылку, то раздел открывается, а подпункты не открывается. Как быть, чтобы открывалось всё?
Чтобы скрипт запомнил какой из пунктов после перехода должен быть развернут, воспользуйтесь уже имеющимся кодом и рекомендациями сообщения №10 соответствующей темы <a href="http://usefulscript.ru/forum/showthread.php?tid=262&pid=1947#pid1947">нашего форума</a>.
Только ссылка пунктов "Скрипты" и т.д. должны быть внутри тегов <span> и удалите из скрипта return false;
Вложить еще подпункты и аналогично их разворачивать?
Спасибо, классный скрипт.
Я попробовал поставить для первого <ul class="opened"> и в jquery так: $("#menu ul opened").slideDown(); но открывается, и быстро закрывается обратно.
Как Вы уже могли заметить, пока страничка еще грузится, то меню полностью развернуто и видно все подпункты. Это не ошибка. Это специально сделано для того чтобы пользователи, которые отключили поддержку JavaScript, тоже могли пользоваться меню.
Тогда строчку: $("#menu ul").hide(); отвечающую за первоначальное сворачивание меню можно удалить.
А не подскажете, как сделать, чтобы при клике на пункт меню, предыдущее закрывалось? Спасибо!
Напишите, пожалуйста, как сделать, чтоб при заходе на сайт пункт меню "Скрипты" всегда был открыт. А при нажатии на пункт "Онлайн-сервисы" скрывался пункт "Скрипты"? ...и также для других пунктов.
После <span>Скрипты</span> вместо <ul> вставляете <ul class="opened">,
а в JS код после строчки $("#menu ul").hide(); добавьте $("#menu .opened").slideDown();
Подскажите, как сделать, чтобы при раздвижении, блоки двигали остальные элементы снизу, в частности футер? Сейчас раздвижной блок перекрывает футер.
ul#menu li span:after { content: " + "; }
Как сделать чтобы + менялся на - когда пункт меню открыт?
Через css не смог сделать, а js вообще не знаю. Спасибо.
.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");
});
});
HTML код перенес на форум.