Офис НП 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 Апрель 2014 17:52:07
11420 Прочтений
Обновлено: 25 апреля 2016 11:14:54
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: +/- при закрытом/ открытом меню, но вы можете добавить изображение или любую другую конструкцию. Посмотреть пример того, что у нас получилось, можно здесь
Как всегда, готов выслушать вопросы и попробовать ответить на них. Всего доброго, всех благ.
Понравилась статья?
Метки для данной статьи
Похожие статьи
Заголовок
Категория
Просмотров
Поделиться:
Последние активные темы форума
| Темы | Просмотров | Ответов | Последние сообщения | |
 |
Вопрос по переделке bb-кода PHP, MySQL |
22344 | 5 | Pisatel 26. мая 2017 |
|
Вопросы по Ajax форме обратной связи CMS PHP Fusion |
68644 | 48 | Ditrin 19. февраля 2017 |
|
BBCode YouTube Video Colorbox mod CMS PHP Fusion |
15363 | 2 | Pisatel 10. декабря 2016 |
|
Как лучше создать собственную страницу? CMS PHP Fusion |
17912 | 17 | Pisatel 11. мая 2016 |
|
Небольшие вопросы по скриптам магазина и катало... PHP, MySQL |
144945 | 80 | Pisatel 11. января 2016 |
|
BBCode Code mod CMS PHP Fusion |
14429 | 0 | Pisatel 31. августа 2015 |
|
Ajax Like Dislike Article Panel CMS PHP Fusion |
22568 | 16 | Pisatel 07. июля 2015 |
|
Хлебные крошки / BreadCrumbs SEO Panel CMS PHP Fusion |
26271 | 17 | Pisatel 04. июля 2015 |
|
Abbr Description BBCode CMS PHP Fusion |
7669 | 0 | Pisatel 15. июня 2015 |
|
Плагин Email рассылки Mail To All by Pisatel CMS PHP Fusion |
37031 | 32 | Pisatel 26. апреля 2015 |
|
Подозрительный трафик и прочие страшилки Всякая хрень |
11804 | 2 | Ditrin 23. апреля 2015 |
|
Мод Newsletter - рассылка писем пользователям с... CMS PHP Fusion |
31052 | 13 | Pisatel 10. апреля 2015 |
|
Мод отправки писем PHPMailer для PHP-Fusion CMS PHP Fusion |
128512 | 113 | Ditrin 06. апреля 2015 |
|
Появление неизвестного файла subscriptions.php CMS PHP Fusion |
8848 | 2 | Pisatel 06. апреля 2015 |
|
Autoban on IP CMS PHP Fusion |
23196 | 13 | Pisatel 03. апреля 2015 |