Вход • Регистрация

Многоуровневое меню типа аккордеона

  • 14 февраля 2012 г.
  • Выбери в настройках меню отображать все уровни. В CSS напиши правила отображения + Небольшие инструкции для смены этих стилей и анимация на jQuery. Гдето уже на сайте это обсуждали помоему.
    • 14 февраля 2012 г.
    • спасибо, почти разобрался, но остались небольшие проблемы)
  • 24 декабря 2012 г.
  • 1. Добавляем весь блок со стилями в файл style.css. внимательно смотрим чтоб названия блоков не пересекались.
    2. В файл шаблона site.php между тегами <head></head> добавляем текст
    Код
    <script type="text/javascript" src="<insert name="path">js/leftmenu/scriptbreaker-multiple-accordion-1.js" charset="UTF-8"></script>
    <script language="JavaScript">

    $(document).ready(function() {
    $(".topnav").accordion({
    accordion:false,
    speed: 500,
    closedSign: '[+]',
    openedSign: '[-]'
    });
    });

    </script>


    3. В нужном Вам месте вашего шаблона вставляете вызов блока
    Код
    <insert name="show_block" module="menu" id="2" template="default">


    4. В файле modules\menu\views\menu.view.show_blok.php на 30-й строке меняем
    echo '<ul class="left_menu_level_1">';
    на
    echo '<ul class="topnav">';

    5. В файле modules\menu\views\menu.view.show_level.php много изменений поэтому я приведу его целиком

    Код
    <?php

    /**
    * Diafan.CMS
    *
    * @author diafan.ru
    * @version 5.1
    * @license http://cms.diafan.ru/license.html
    * @copyright Copyright (c) 2003-2012 OOO "Диафан". (http://diafan.ru)
    */
    if (!defined('DIAFAN'))
    {
    include dirname(dirname(dirname(__FILE__))).'/includes/404.php';
    }

    /**
    * Шаблон вывода первого уровня меню, вызывается из функции show_block в начале файла
    */

    if (empty($result["rows"][$result["parent_id"]]))
    {
    return true;
    }

    // начало уровня меню
    foreach ($result["rows"][$result["parent_id"]] as $row)
    {
    if (!$result["rows"][$result["parent_id"]][0] != $row)
    {
    // разделитель пунктов меню
    }

    if ($row["active"])
    {
    // начало пункта меню для текущей страницы
    // echo '<li class="active">';
    echo '<li class="active">';

    }
    elseif ($row["active_child"])
    {
    // начало пункта меню для активного дочернего пункта
    // echo '<li class="active_child">';
    echo '<li class="active">';
    }
    else
    {
    // начало любого другого пункта меню
    echo '<li>';
    }

    if (
    // на текущей странице нет ссылки, если не включена настройка "Текущий пункт как ссылка"
    (!$row["active"] || $result["current_link"])

    // влючен пункт "Не отображать ссылку на элемент, если он имеет дочерние пункты"
    && (!$result["hide_parent_link"] || empty($result["rows"][$row["id"]]))
    )
    {
    if ($row["othurl"])
    {
    echo '<a href="'.$row["othurl"].'" target="_blank">';
    }
    else
    {
    // если пункт меню имеет дочерние пункты то у главного выводить в сылке #
    if(!empty($result["rows"][$row["id"]]))
    {
    echo '<a href="#">';
    }
    else
    {
    echo '<a href="'.BASE_PATH_HREF.$row["link"].'">';
    }

    }

    }


    //вывод изображения
    if (! empty($row["img"]))
    {
    echo '<img src="'.$row["img"]["src"].'" width="'.$row["img"]["width"].'" height="'.$row["img"]["height"]
    .'" alt="'.$row["img"]["alt"].'" title="'.$row["img"]["title"].'"> ';
    }

    // название пункта меню
    echo $row["name"];
    if (
    // на текущей странице нет ссылки, если не включена настройка "Текущий пункт как ссылка"
    (!$row["active"] || $result["current_link"])

    // влючен пункт "Не отображать ссылку на элемент, если он имеет дочерние пункты"
    && (!$result["hide_parent_link"] || empty($result["rows"][$row["id"]]))
    )
    {
    echo '</a>';
    }


    if ($result["show_all_level"] || $row["active_child"] || $row["active"])
    {
    // вывод вложенного уровня меню
    $menu_data = $result;
    $menu_data["parent_id"] = $row["id"];
    $menu_data["level"]++;

    if (empty($result['attributes']['count_level']) || $result['attributes']['count_level'] >= $menu_data["level"])
    $this->get('show_level_2', 'menu', $menu_data); //ниже функция, которая выводит в цикле пункты второго уровня вложенности.
    }


    if ($row["active"])
    {
    // окончание пункта меню - текущей страницы
    echo '</li>';
    }
    elseif ($row["active_child"])
    {
    // окончание пункта меню для активного дочернего пункта
    echo '</li>';
    }
    else
    {
    // окончание любого другого пункта меню

    echo '</li>';
    }


    }
    // окончание уровня меню


    6. Ну и последнее что надо сделать это админ панели Меню на сайте - Меню - Меню каталог товаров должны стоять галочки на : показывать на сайте, раскрывать все пункты меню, текущий пункт меню как ссылка.

    Ну вот наверно и все. Со стилями в любом случае придется побороться т.к. это у каждого индивидуально.
    • 19 марта 2014 г.
    • Все сделал как написано, но вот почему то при нажатии исчезает название и [+] почему то "приклеен" с правой стороны...
  • 11 января 2013 г.
  • Как все это выглядит вживую можно здесь - http://elfa.su
    • 11 января 2013 г.
    • Александр (sanj) вы забыли скинуть ссылочку на скрипт, вдруг человек решит им воспользоваться а вообще такой скрипт и без плагина легко пишется, примерно 5 строчек и анимацию самому можно настраивать и href перехватывать
  • 12 марта 2013 г.
  • Может подскажете, как сделать чтобы при переходе в подкатегорию, аккордеон не сворачивался ?
    • 12 марта 2013 г.
    • Я делаю вот так, если код не по-нравится, можно доработать, этот код не тестировал но работать должен:

      Стили, конечно же свои. но вот пример:
      Код

      #menu_list {padding:0; margin:0; list-style:none;}
      #menu_list ul {padding:0; margin:0; list-style:none; display:none;}


      структура html

      Код

      <ul id="menu_list">
      <li class="li_1"><a href="#" class="lvl_1">Пункт меню</a>
      <ul>
      <li><a href="#">Пункт меню 2</a></li>
      <li><a href="#">Пункт меню 2</a></li>
      <li><a href="#">Пункт меню 2</a></li>
      </ul>
      </li>
      <li class="li_1"><a href="#" class="lvl_1">Пункт меню</a>
      <ul>
      <li><a href="#">Пункт меню 2</a></li>
      <li><a href="#">Пункт меню 2</a></li>
      <li><a href="#">Пункт меню 2</a></li>
      </ul>
      </li>
      </ul>


      подключаем jQuery и добавляем код для менюхи:
      Код

      <script>
      $(document).ready(function() {

      $("#list_menu .li_1").click(function(){

      $("#list_menu .li_1").find("ul").slideUp("500"); //скрываем любой открытый подуровень
      $("#list_menu .li_1").find(".lvl_1").removeClass("active_menu") //удаляем оформление с неактивных уровней

      $(this).find("ul").slideDown("500"); //показываем подуровень у меню
      $(this).find(".lvl_1").addClass("active_menu") //Задаем оформление активного первого уровня аккордиона
      });


      //При условии, что активный подпукт меню у нас оформляется sub_active
      $(".sub_active").parent().slideDown("500"); //показываем подуровень у меню


      });
      </script>


      Лучше его в отдельный файл залить, ну вроде все, если не будет работать напиши посотрю в чем может быть ошибка

Новости

  • 24 апреля, среда
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
  • 15 декабря 2023 г.
  • Подводим итоги 2023 года. Выпустили новую сборку DIAFAN.CMS 7.1.1, вводим новые тарифы на аренду сайта и коммерческую поддержку и автообновления с января 2024 г., строим планы на будущий год.