Офис НП 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 Добавлено  15-04-2014 17:52 15 Апрель 2014 17:52:07 7210  Прочтений 7210 Прочтений  4 Комментариев 4 Комментариев
Обновлено: 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: +/- при закрытом/ открытом меню, но вы можете добавить изображение или любую другую конструкцию. Посмотреть пример того, что у нас получилось, можно здесь

Как всегда, готов выслушать вопросы и попробовать ответить на них. Всего доброго, всех благ.
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:   
Комментарии
#1 | Vladimir 18 апреля 2017 17:42:50
No Avatar
Гость
Как добавить 3 й уровень?
#2 | Pisatel 25 апреля 2017 12:31:09
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
Vladimir, переписывать код))
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
#3 | Иван 14 мая 2017 14:09:09
No Avatar
Гость
Как сделать что бы все меню были открыты , а не одно ?
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
Иван, простите, а смысл? Не понимаю суть вопроса.
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
Добавить комментарий
Имя:

Проверочный код:
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL
2136 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
9506 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
6821 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
5436 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
45409 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
3319 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
6673 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
7323 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
2469 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
10320 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
4513 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
6276 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
32945 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
3135 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
12170 13 Pisatel
03. апреля 2015