Сейчас: 10:22:16   29-го марта 2024 г.
UsefulScript.ruСкриптыСложные менюВыпадающее меню на jQuery
37
90

Выпадающего вертикально меню на jQuery

Для увеличения полезного пространства на сайте можно уменьшить размер меню за счет добавления вертикально выпадающих пунктов меню. Таким образом, изначально будут видны только основные разделы меню. При наведении курсора мышки на один из разделов (пунктов) меню, ниже плавно появится список с подразделами данного раздела.


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




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

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

Для того чтобы получить точно такое же меню, как в примере выше, в шапку своего сайта (между тегами <head> и </head>) добавьте стили:

HTML код:
<style type="text/css">
.
spoiler_body {
     
displaynone;
     
cursorpointer;
     
floatleft;
     
width220px;
     
background-color#EEEEEE;
     
text-alignleft;
     
positionabsolute;
     
z-index99; }
.
spoiler_body a padding0 10px; }
.
spoiler_links {
    
floatleft;
    
margin0 0 0 35px;
    
width220px;
    
background-color#00BB00;
    
line-height1.5;
    
text-aligncenter; }
</
style>

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

HTML код:
<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>

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

JavaScript код:
<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>

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

Дата создания: 21:19:30 13.07.2013 г.
Посещений: 14304 раз(а).

Комментарии посетителей (4 шт.):
Ришат
2
# 1066
(15:08:30  27.08.2013 г.)

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

Максим
0
# 1801
(15:55:48  13.08.2014 г.)

В CSS пропишите top:0; left:-100px; меняя параметр -100 добиваетесь нужного результата.
Ответить

Вячеслав
0
# 3146
(09:50:37  01.04.2016 г.)

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

Administrator
0
# 3150
(19:57:45  01.04.2016 г.)

$(document).ready(function(){
$('.spoiler_links').click(function(){
$(this).children('div.spoiler_body').slideToggle('normal');
});
});
Ответить

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

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

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

Какой браузер Вы используете?