Скрипт раздвижного меню

[Admin]

Путь тут не причем. Тут либо стили не применяются, либо JS не срабатывает. Причин может быть много.

[vladdddq]

(14.02.2015 15:04:07)Admin писал(а):  Путь тут не причем. Тут либо стили не применяются, либо JS не срабатывает. Причин может быть много.

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

[deQa]

Приветствую.

Остановился на таком:

Код:

$(document).ready(function() {
if ($.cookie('menu_id')>0) { $('#navmenu-v ul[id!='+$.cookie('menu_id')+']').hide(); }
else $('#navmenu-v ul').hide();

$('#navmenu-v li span').click(
function() {
    var checkElement=$(this).next();
    $.cookie('menu_id',$(this).next().attr("id"));
   if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            checkElement.slideUp('normal');
            return false;
            }
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#navmenu-v ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
    }
}
);
});

Стили закинул.
Поставил - jquery.cookie.js
Но при переходе по пункту из открывшего списка, список сворачивается.

Что может быть не так?

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

Код:

<ul id="navmenu-v">
            <li>
              <span><a href="catalog/{widget.cat.sub.KEY}">{widget.cat.sub.NAME}</a></span>
              <ul id="two-s">
                <li><span><a href="catalog/{widget.cat.sub.sub2.KEY}">{widget.cat.sub.sub2.NAME}</a></span></li>
              </ul>
            </li>
          </ul>

[Admin]

Так если у Вас id скрытых списков каждый раз генерируются разные, то и работать не будет, т.к. мы сохраняем в cookie именно id открытого списка. При переходе данный id считывается из cookie и при помощи JS разворачивается список с данным id.

[deQa]

(04.09.2016 19:50:13)Admin писал(а):  Так если у Вас id скрытых списков каждый раз генерируются разные, то и работать не будет, т.к. мы сохраняем в cookie именно id открытого списка. При переходе данный id считывается из cookie и при помощи JS разворачивается список с данным id.

ИД не генерируется, его вообще нет. Сам список генерируется, если в админке конечно меню создавать категорией и дочерними кат.
В кмс нет возможности задавать идентификатор.

Может можно как то сделать чтобы им (дочерним ul конкретного меню - ну в общем на примере моего кода) присваивался класс (например id="cats-x1", id="cats-x2"), а потом уже идентифицировал?

[deQa]

Добрый день. Неужели нет никаких вариантов в моем случае?

[Admin]

Я, по крайней мере, не вижу. Могу предложить только не генерировать меню, а создать его вручную, и то при условии, что пунктов меню не очень много.

[deQa]

(08.09.2016 20:07:18)Admin писал(а):  Я, по крайней мере, не вижу. Могу предложить только не генерировать меню, а создать его вручную, и то при условии, что пунктов меню не очень много.

Эх, в том и дело достаточно много чтобы это делать.

[Admin]

Сообщение перенесено из комментариев к теме Вертикальное раздвижное меню на jQuery

(11.06.2017 05:36:28)Геннадий писал(а):Нужна помощь. Сделал по данному варианту свое меню, но хотел бы, чтоб пункт "Каталог" при кликании по нему, ссылка никуда не вела, а открывала подменю, и такая же система работы с подменю, чтобы был указатель мыши "РУКА" при наведении и кликании, а не вертикальная черточка.

Код:

<ul id="menu">

<li><p class="left"><a href="http://site.ru/">Главная</a></li>
<li><span>Каталог</span>
<ul>
<li><span>Водяные полотенцесушители</span>
<ul>
        <li><p class="left"><a href="http://site.ru/katalog/lesenki-s-universalnym-podklyucheniem/">Лесенки Универсальное Подключение</a></li>
        <li><p class="left"><a href="http://site.ru/katalog/lesenki-s-bokovym-podklyucheniem/">Лесенки Боковое Подключение</a></li>
        <li><p class="left"><a href="http://site.ru/katalog/lesenki-s-universalnym-podklyucheniem-s-verhney-polkoy/">Лесенки Универсальные с Полкой</a></li>
        <li><p class="left"><a href="http://site.ru/katalog/lesenki-s-bokovym-podklyucheniem-s-verhney-polkoy/">Лесенки Боковые с Полкой</a></li>
</ul>
</li>
<li><span>Электрические полотенцесушители</span>
<ul>
        <li><p class="left"><a href="http://site.ru/katalog/lesenki-elektricheskie/">Лесенки Электро</a></li>
        <li><p class="left"><a href="http://site.ru/katalog/lesenki-elektricheskie-s-verhney-polkoy/">Лесенки Электро с Полкой</a></li>
</ul>
</li>
</ul>
       </li>
<li><p class="left"><a href="http://site.ru/fitingi/">Фитинги</a></li>
<li><p class="left"><a href="http://site.ru/chasto-zadavaemye-voprosy/">Часто задаваемые вопросы</a></li>
<li><p class="left"><a href="http://site.ru/kontakty/">Контакты</a></li>
</ul>
</li>
</ul>

Доменное имя в ссылках поменял на site.ru.

[Admin]

Если я все правильно понимаю, тут можно обойтись минимальными правками CSS кода.

Вместо:

Код:

ul#menu li a:hover,ul#menu li span:hover { background: #000000; }

используйте:

Код:

ul#menu li a:hover,ul#menu li span:hover { background: #000000; cursor:pointer; }

И вместо:

Код:

ul#menu li ul li a:hover {
  background: #AAAAAA;
  border-left: 5px #000000 solid;
  padding-left: 15px;
}

используйте:

Код:

ul#menu li ul li a:hover { background: #AAAAAA; cursor:pointer; }

И вместо того, чтобы добавлять дополнительные теги <p class="left"> я бы добавлял class="left" к уже имеющимся элементам:

Код:

<ul id="menu">

<li><a class="left" href="http://site.ru/">Главная</a></li>
<li><span class="left">Каталог</span>
<ul>
<li><span class="left">Водяные полотенцесушители</span>
<ul>
        <li><a class="left" href="http://site.ru/katalog/lesenki-s-universalnym-podklyucheniem/">Лесенки Универсальное Подключение</a></li>
        <li><a class="left" href="http://site.ru/katalog/lesenki-s-bokovym-podklyucheniem/">Лесенки Боковое Подключение</a></li>
        <li><a class="left" href="http://site.ru/katalog/lesenki-s-universalnym-podklyucheniem-s-verhney-polkoy/">Лесенки Универсальные с Полкой</a></li>
        <li><a class="left" href="http://site.ru/katalog/lesenki-s-bokovym-podklyucheniem-s-verhney-polkoy/">Лесенки Боковые с Полкой</a></li>
</ul>
</li>
<li><span class="left">Электрические полотенцесушители</span>
<ul>
        <li><a class="left" href="http://site.ru/katalog/lesenki-elektricheskie/">Лесенки Электро</a></li>
        <li><a class="left" href="http://site.ru/katalog/lesenki-elektricheskie-s-verhney-polkoy/">Лесенки Электро с Полкой</a></li>
</ul>
</li>
</ul>
       </li>
<li><a class="left" href="http://site.ru/fitingi/">Фитинги</a></li>
<li><a class="left" href="http://site.ru/chasto-zadavaemye-voprosy/">Часто задаваемые вопросы</a></li>
<li><a class="left" href="http://site.ru/kontakty/">Контакты</a></li>
</ul>
</li>
</ul>