Выпадающего вертикально меню на jQuery
Для увеличения полезного пространства на сайте можно уменьшить размер меню за счет добавления вертикально выпадающих пунктов меню. Таким образом, изначально будут видны только основные разделы меню. При наведении курсора мышки на один из разделов (пунктов) меню, ниже плавно появится список с подразделами данного раздела.
Для демонстрации работы скрипта, создающего выпадающее вертикально меню, реализованного на jQuery, обратите внимание на небольшое меню состоящее из двух разделов, расположенное чуть ниже. Чтобы понять, как оно работает, наведите курсор мышки на один из пунктов:
Для реализации подобного вертикально выпадающего меню у себя на сайте Вам потребуется библиотека jQuery. Если данная библиотека на Вашем сайте еще не была подключена ранее, то Вам понадобиться подключить ее следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
Для того чтобы получить точно такое же меню, как в примере выше, в шапку своего сайта (между тегами <head> и </head>) добавьте стили:
<style type="text/css">
.spoiler_body {
display: none;
cursor: pointer;
float: left;
width: 220px;
background-color: #EEEEEE;
text-align: left;
position: absolute;
z-index: 99; }
.spoiler_body a { padding: 0 10px; }
.spoiler_links {
float: left;
margin: 0 0 0 35px;
width: 220px;
background-color: #00BB00;
line-height: 1.5;
text-align: center; }
</style>
Далее, в том месте Вашего сайта, где будет располагаться выпадающее вертикально меню, необходимо добавить Ваше меню со всеми его разделами и подразделами следующим образом:
<div class="spoiler_links"><a href="script.php"><b>Скрипты</b></a>
<div class="spoiler_body">
<a href="collapsing_menu.php">Вертикальное меню</a><br>
<a href="reflection_image.php">Добавление отражения</a><br>
<a href="serial_output_img.php">Последовательный вывод</a><br>
<a href="highlight_table_jquery.php">Подсветка строк в таблице</a>
</div>
</div>
<div class="spoiler_links"><a href="useful_site.php"><b>Сервисы</b></a>
<div class="spoiler_body">
<a href="goqr_me.php">Создание QR кодов</a><br>
<a href="csscompressor.php">Сжатие CSS кода</a><br>
<a href="javascriptcompressor.php">Сжатие JavaScript кода</a>
</div>
</div>
После того, как меню добавлено, необходимо добавить скрипт, который будет при наведении курсора мышки на разделы показывать его подразделы и скрывать их, когда курсор мышки покидает область меню. Для этого скопируйте на свою страничку следующий код:
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').mouseenter(function(){
$(this).children('div.spoiler_body').slideDown('normal');
});
$('.spoiler_links').mouseleave(function(){
$(this).children('div.spoiler_body').slideUp('normal');
});
});
</script>
Как видите, на самом деле в коде нет ничего сложного, но при этом данный скрипт может быть востребован для экономии полезного пространства странички, занимаемого большим количеством пунктов меню.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
$('.spoiler_links').click(function(){
$(this).children('div.spoiler_body').slideToggle('normal');
});
});