Офис НП 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 Добавлено  15-04-2014 17:52 15 Апрель 2014 17:52:07 8062  Прочтений 8062 Прочтений  6 Комментариев 6 Комментариев
Обновлено: 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
Иван, простите, а смысл? Не понимаю суть вопроса.
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
#5 | Роман 22 ноября 2018 16:31:52
No Avatar
Гость
Подскажите. А как сделать: "При переходе на страницу сайта по URL, меню автоматически раскрывалось в том разделе где находится сответсвенная ссылка (url) страницы "
#6 | Pisatel 24 ноября 2018 18:03:41
Avatar
Отсутствует
Супер Администратор
Активный
С 03. февраля 2013
Роман, к сожалению не смогу подсказать, так как от кодинга ушел...
Я не европеец. И не азиат. Я русский. Я россиянин. Я за истинные семейные христианские ценности. И это - моя национальная идея.
Добавить комментарий
Имя:

Проверочный код:
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
13257 33 promask
27. апреля 2019
folder Вопрос по переделке bb-кода
PHP, MySQL
3331 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
13801 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
7707 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
7056 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
52716 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
4027 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
8160 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
9200 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
3042 0 Pisatel
15. июня 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
5705 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
7728 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
41279 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
3721 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
13635 13 Pisatel
03. апреля 2015