Офис НП AMWAY в Ярославле
Купить продукцию Амвей в Ярославле, офис Amway
→ На карте Купить AMWAY: офис в ЯрославлеКонсультации, презентации, мастер–классы, знакомство с продукцией, заказ и выдача купленного товара:
●Адрес: улица Валентины Терешковой, дом 1 (Вход со двора)
●Телефон: +7 (920) 112-00-91
●Email: matyxho@mail.ru
●Сайт: https://www.amway.ru/user/lebedem
●Визитка: http://yar.meweb.ru
Иерархия статей
Статьи » HTML, CSS, JS » JQuery: вертикальное выпадающее меню + cookie
Сниппет
В этой статье реализую вертикальное выпадающее меню с использованием cookie для того, чтобы запомнить позицию открытия/закрытия меню при перемещении по страницам сайта
JQuery: вертикальное выпадающее меню + cookie
Опубликовал Pisatel Pisatel Добавлено 15-04-2014 17:52 15 Апрель 2014 17:52:07 11435 Прочтений 11435 Прочтений
Обновлено: 25-04-2016 11:14 Обновлено: 25 апреля 2016 11:14:54  printer

JQuery: выпадающее меню с использованием cookie

Создать выпадающее меню с помощью JQuery- классика, статей на эту тему написано масса. Я же попробовал чуть усложнить задачу, добавив возможность оставаться разделам меню открытыми (или закрытыми, в зависимости от выбора пользователя) при перемещении по сайту.
Для решения этой задачи я решил воспользоваться плагином JQuery Cookie. Преимущество данного плагина в том, что операция совершается на стороне клиента, что, в свою очередь, уменьшает нагрузку на сервер. Минус- если у пользователя отключен JS, плагин не сработает. Но данный вариант я не рассматриваю, так как тогда пропадает вообще весь смысл выпадающего меню. Итак, начнем.
Для начала нам необходимо подключить сам фреймворк JQuery и плагин JQuery Cookie:
Код: HTML
<head>

    <script type='text/javascript' src='jquery.min.js'></script>

    <script type='text/javascript' src='jquery.cookie.js'></script>

</head>



Далее- разметка. Выглядеть она будет как простой список, ничего сверхъестественного. Единственное замечу, что в теге <h2> должен находится заголовок, при клике на который будет выпадать меню:
Код: HTML
        <div id='navigation'>

    <h2 class='navigation_head'>Первый заголовок</h2>

<div class='navigation_body'>

  <ul>

  <li><a href='#' title='Ссылка 1'>Первая ссылка</a></li>

  <li><a href='#' title='Ссылка 2'>Вторая ссылка</a></li>

  <li><a href='#' title='Ссылка 3'>Третья ссылка</a></li>

  </ul>

  </div>

    <h2 class='navigation_head'>Второй заголовок</h2>

    <div class='navigation_body'>

  <ul>

  <li><a href='#' title='Ссылка 1'>Первая ссылка</a></li>

  <li><a href='#' title='Ссылка 2'>Вторая ссылка</a></li>

  <li><a href='#' title='Ссылка 3'>Третья ссылка</a></li>

  </ul>

  </div>

    <h2 class='navigation_head'>Третий заголовок</h2>

    <div class='navigation_body'>

  <ul>

  <li><a href='#' title='Ссылка 1'>Первая ссылка</a></li>

  <li><a href='#' title='Ссылка 2'>Вторая ссылка</a></li>

  <li><a href='#' title='Ссылка 3'>Третья ссылка</a></li>

  </ul>

  </div>

    <h2 class='navigation_head'>Четвертый заголовок</h2>

    <div class='navigation_body'>

  <ul>

  <li><a href='#' title='Ссылка 1'>Первая ссылка</a></li>

  <li><a href='#' title='Ссылка 2'>Вторая ссылка</a></li>

  <li><a href='#' title='Ссылка 3'>Третья ссылка</a></li>

  </ul>

  </div>

        </div>



Ну и так до бесконечности. Теперь- самое интересное. В коде добавлю немного комментариев, дабы было примерно понятно, чопачом
Код: JS
    $(document).ready(function(){

     if($.cookie('num_open_ul')){ // проверили, есть ли запись в печеньках

     if($.cookie('num_open_ul') != 0){ // и эта запись не равна 0

     var number_eq = parseInt($.cookie('num_open_ul')-1);

     $('.navigation_body').eq(number_eq).show().prevAll('#navigation h2.navigation_head:first').addClass('active_navigation');

}

};

     $('#navigation h2.navigation_head').click(function(){ // при клике сработает эта функция

     if(!$(this).next().is(':visible')){

     $('div.navigation_body').siblings('div.navigation_body').slideUp(500); // если другие открыты- закрыли все, кроме текущего

}

  $(this).next('div.navigation_body').slideToggle(500).siblings('div.navigation_body').slideUp(500);

    $(this).toggleClass('active_navigation').siblings('#navigation h2.navigation_head').removeClass('active_navigation'); // открытому добавили класс, чтобы сменить стиль

     setTimeout(fncookie, 600); //сама запись в печеньки с задержкой, дабы скрипт до записи успел завершить работу (500мс- скорость, задержка- 600мс)

});

     function fncookie(){ // сама функция записи

     var number_open_ul = 0;

     var i = 0;

     $('div.navigation_body').each(function(){

     i++;

     if($(this).is(':visible')){

     number_open_ul = i;

}

  $.cookie('num_open_ul', number_open_ul, {expires:3, path:'/'}); // хранить 3 дня для всего сайта.

});

}

});



То есть теперь, если пользователь открыл меню, ушел с сайта и зашел на него снова через пару дней, меню все так же для него будет оставаться открытым.
Ну и напоследок у нас остался небольшой штрих: собственно, css- стили. Вы уж делайте на свой вкус, в примере я взял готовый дизайн с одного из проектов
Код: CSS
#navigation {

margin: 80px auto;

width: 250px;

}

#navigation h2, #navigation h2.navigation_head {

 font-size: 18px;

 font-weight: bolder;

 background-color: #ffb6c1;

 background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ffe9e9),color-stop(100%,#ffb6c1));

    background-image: -webkit-linear-gradient(#ffe9e9,#ffb6c1);

    background-image: -moz-linear-gradient(#ffe9e9,#ffb6c1);

    background-image: -o-linear-gradient(#ffe9e9,#ffb6c1);

    background-image: linear-gradient(#ffe9e9,#ffb6c1);

 border-bottom: 1px solid #fff;

 padding: 5px 3px 6px 3px;

 margin: auto;

position: relative;

}

#navigation h2.navigation_head:after {

position: absolute;

right: 5px;

color: #550000;

content: 'cssb';

}

#navigation h2:hover, #navigation h2.navigation_head:hover {

 cursor: pointer;

}

.active_navigation {

background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ffb6c1),color-stop(100%,#ffe9e9)) !important;

    background-image: -webkit-linear-gradient(#ffb6c1,#ffe9e9) !important;

    background-image: -moz-linear-gradient(#ffb6c1,#ffe9e9) !important;

    background-image: -o-linear-gradient(#ffb6c1,#ffe9e9) !important;

    background-image: linear-gradient(#ffb6c1,#ffe9e9) !important;

}

.active_navigation:after {

position: absolute;

right: 5px;

content: 'cssd' !important;

}

.navigation_body {

 display:none;

}

#navigation ul {

 margin: 0;

 padding: 0;

 list-style-type: none;

}

* html #navigation ul li{

   height: 1%;

}

#navigation div.navigation_body ul li {

margin-left: 10px;

}

#navigation a {

font-family: 'Times New Roman';

 display: block;

 color: #918871;

 padding: 3px;

 background-color: #ffe3e0;

 border-bottom: 1px solid #fff;

 text-decoration: none;

}

#navigation a:hover {

 color: #585858;

 background-color: #ffb6cc;

}



Если кто обратил внимание, здесь я попробовал использовать свойство content: +/- при закрытом/ открытом меню, но вы можете добавить изображение или любую другую конструкцию. Посмотреть пример того, что у нас получилось, можно здесь

Как всегда, готов выслушать вопросы и попробовать ответить на них. Всего доброго, всех благ.
Понравилась статья?
Метки для данной статьи
Теги:  #jquery #меню #выпадающее меню #html #cookie #вертикальное меню #js #javascript 
Похожие статьи
Заголовок
Категория
Просмотров
7977
10336
35787
28561
7611
Поделиться:   
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL		 22389 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion		 68897 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion		 15400 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion		 17957 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL		 145444 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion		 14460 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion		 22616 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion		 26338 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion		 7679 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion		 37139 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень		 11842 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion		 31082 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion		 128990 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion		 8868 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion		 23228 13 Pisatel
03. апреля 2015