Waslidemenu для сайта

[sinoptikd 0]

Добрый день. Пытался подключить Waslidemenu, использую плагины:

 

В файле includes/header.php ( папку waslidemenu загрузил)

 

вставил

 

<link href="/jscript/jquery/plugins/waslidemenu/waslidemenu.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="/jscript/jquery/plugins/waslidemenu/waslidemenu.js"></script>

<script type="text/javascript">

$(document).ready(function(){

   $("#slidemenu").waSlideMenu({

autoHeightMenu: true,

backOnTop: false,

loadOnlyLatest : true,

loadContainer : "body",

scrollToTopSpeed: 200,

slideSpeed: 500,

backLinkContent: "'.__('Back').'",

   });

});

</script>

 

 

в box_categories

 

<nav id="slidemenu">

<div id="slidemenu1">

    <ul>

        <li class="collapsible"><a href="#">Pacific Ocean</a>

 

            <ul>

                <li class="collapsible"><a href="#">Hawaii</a>

 

                    <ul>

                        <li class="collapsible"><a href="#">Oahu</a>

 

                            <ul>

                                <li><a href="#">Sandy Beach</a>

                                </li>

                                <li><a href="#">Banzai Pipeline</a>

                                </li>

                                <li><a href="#">Waimea Bay</a>

                                </li>

                                <li><a href="#">Waikiki Beach</a>

                                </li>

                                <li><a href="#">Canoes</a>

                                </li>

                            </ul>

..

..

 

..

 

    </ul>

 

</nav>

 

 

 

Формировать меню надо самому, используя вставки картинок.

Не работает, в чем может быть причина? Что не подключил?

Спасибо

 

[support 447]

js файлы точно подключались на страницу?!

Дайте ссыслку на страницу, где Вы пробуете подключить меню это, посмотрю.

[sinoptikd 0]

Посмотрите пожалуйста murmansvet.ru

Пытался и в index.php и

box_categories вставлять список категория и подкатегорий

[support 447]

У Вас как минимум две проблемы.

 

 

1. Подключение waslide.js поставить ниже строки с подключением jQuery, т.е. снчала jquery, затем меню.

 

2. Я так думаю, что у Вас проблема со структурой меню, вложенные списки сделаны неправильно.

 

т.е. у Вас подкатегории выводится после закрытого /li

 

Должно быть

 

<ul>

<li><a>категория</a>

<ul>

<li><a>подкатегория</a></li>

</ul>

</li>

</ul>

 

а в у Вас категория с li закрывается неправильно.

 

<ul>

<li><a>категория</a></li>

<ul>

<li><a>подкатегория</a></li>

</ul>

 

</ul>

[sinoptikd 0]

Спасибо, переходы заработали. Осталась одна важная деталь. 

При нажатии на категорию, мы не переходим на нее, а она только раскрывается.

Как сделать переход на нее и раскрытие списка.

 

И при переходе в подкатегорию, список слева снова закрывается, а не остается в раскрытом виде. 

[support 447]

Так это ведь такое меню, оно переходит на подкатегорию, если есть подкатегории, если нет подкатегорий, то открывает конкретную категорию.

 

Либо наверняка у Вас опять что-то со структурой меню, т.е. влоеженность неправильно сделана или ещё что.

[sinoptikd 0]

Вот меню в box_categories

При переходе в Светодиодная лента, модули, светодиоды и комплектующие раскрывается список. Внутри списка подкатегории раскрытое меню не остается, а зарывается.

 

Посмотрите пожалуйста где ошибка. Спаисбо

 

 

<nav id="slidemenu">

<div class="slidemenu">

<ul id="collapsible">

  <li class="collapsible"><a href="/index.php/cat/c23" >Светодиодная лента, модули, светодиоды и комплектующие</a>

  <ul>

  <li class="collapsible"><a href="/index.php/cat/c24">Светодиодная лента</a></li>

  <li class="collapsible"><a href="/index.php/cat/c32">Импульсные блоки питания</a></li>

  <li class="collapsible"><a href="/index.php/cat/c37">Контроллеры и диммеры для светодиодной ленты</a></li>

  <li class="collapsible"><a href="/index.php/cat/c34">Профиль для светодиодной ленты</a></li>

  <li><a href="/index.php/cat/c31">Светодиодные линейки</a></li>

  <li><a href="/index.php/cat/c39">Светодиодные модули</a></li>

  <li><a href="/index.php/cat/c68">Светодиоды</a></li>

  <li><a href="/index.php/cat/c70">Светодиодные фонари</a></li>

</ul>

</li>

  <li><a href="http://murmansvet.ru/index.php/cat/c19">Светодиодные лампы</a>

  <ul id="collapsible">

  <li><a href="http://murmansvet.ru/index.php/cat/c20">Светодиодные лампы G5.3</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c60">Светодиодные лампы E14</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c41">Светодиодные лампы Е27</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c51">Светодиодные лампы GX53</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c53">Светодиодные лампы G4</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c54">Светодиодные лампы G9</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c48">Светодиодные лампы GU10</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c45">Светодиодные лампы T8</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c65">Светодиодные лампы E40</a></li>

</ul>

</li>

  <li><a href="http://murmansvet.ru/index.php/cat/c4_Interernye-svetilniki.html">Интерьерные светильники</a>

  <ul id="collapsible">

  <li><a href="http://murmansvet.ru/index.php/cat/c5_Vstraivaemye-svetilniki-Feron.html">Встраиваемые светильники Feron</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c22_Vstraivaemye-svetodiodnye-svetilniki.html">Встраиваемые светодиодные светильники</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c44_Nakladnye-svetodiodnye-svetilniki.html">Накладные светодиодные светильники</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c75_Lineinye-svetodiodnye-svetilniki.html">Линейные светодиодные светильники</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c135_Svetilniki-s-nakleikoi--nakleiki--chasy-nakleiki.html">Светильники с наклейкой, наклейки, часы-наклейки</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c76_Svetodiodnye-nastolnye-lampy.html">Светодиодные настольные лампы</a></li>

</ul>

</li>

  <li><a href="http://murmansvet.ru/index.php/cat/c10_Ofisnye-svetodiodnye-svetilniki.html">Офисные светодиодные светильники</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c7_Ulichnye-svetodiodnye-svetilniki-i-prozhektory.html">Уличные светодиодные светильники и прожекторы</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c29_Promyshlennye-svetodiodnye-svetilniki.html">Промышленные светодиодные светильники</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c71_Yelektrotovary.html">Электротовары</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c47_Sverhtonkaya-zhidkaya-teploizolyaciya-Magniterm.html">Сверхтонкая жидкая теплоизоляция Магнитерм</a></li>

  <li><a href="http://murmansvet.ru/index.php/cat/c62_Uslugi.html">Услуги</a></li>

</ul>

</div>

</nav>

[support 447]

Судя по коду, у Вас в категории:

  <li class="collapsible"><a href="/index.php/cat/c24">Светодиодная лента</a></li>

нет подкатегорий, тогда и class="collapsible" не нужно указывать.

 

В общем, сделайте правильную разметку.

 

В принципе, правильная разметка уже есть в меню типа - http://vamshop.ru/forum/files/file/17-css-%D0%BC%D0%B5%D0%BD%D1%8E/

или http://vamshop.ru/forum/files/file/50-css-menu-%D1%81-%D0%B2%D1%8B%D0%BF%D0%B0%D0%B4%D0%B0%D1%8E%D1%89%D0%B8%D0%BC%D0%B8-%D0%BF%D0%BE%D0%B4%D0%BA%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D1%8F%D0%BC%D0%B8/

 

Там должны быть правильные вложенные списки, вот за основу можно взять эти меню, просто добавив к ним подключение waslide.js и waslide.css

[YuraS 4]

посмотрел меню на murmansvet.ru. совершенно неюзабельное. имхо, это какое-то издевательство над посетителем... :think:

[support 447]

Выглядит вот так - https://demo2-ru.webasyst.com

 

На murmansvet.ru там html-структура списка неправильная, видимо.

 

Когда оно правильно прикручено, оно правно работает.

 

Лично мне нравится такое меню.  :cg:

[MIL2 1]

Неудобно, когда в один клик не можешь вернуться в заглавную категорию, надо прокручивать кнопкой назад по всем подкатегориям и саму кнопку назад надо сверху ставить, а то в больших меню она находится внизу за пределами экрана- не зная и не сообразишь, как назад вернуться

[support 447]

Да, есть такое дело.