Дополнительное меню - вертикальное

+77
6.36K
Предлагаемое решение позволит реализовать дополнительное вертикальное меню в сайтбаре.
Меню представляет собой нечто среднее между jQuery Treeview и Accordion.
Демо
Попробуйте кликать и по названиям пунктов меню и по пиктогамкам оранжевого цвета (так обозначены пункты меню с субпунктами). При клике по названию — переход по ссылке и раскрытие субменю. При клике по пиктограмке — открываются субменю, при повторном — закрываются.

Всё готовое, как на демо, берём здесь.

Внимание!!! Заменяется файл includes\jquery\treeview\jquery.treeview.css — резервы, пожалуйста, делайте.
Скопируйте файлы на сервер. Подключите в temlate.php скрипты
  1. <script type="text/javascript" src="/templates/_default_/js/jquery.treeview.js"></script>
  2. <script type="text/javascript" src="/templates/_default_/js/jquery.cookie.js"></script>
  3. <script language="javascript">
  4. $(document).ready(function(){
  5. $("#navigation").treeview({
  6. animated: "slow",
  7. collapsed: true,
  8. unique: true,
  9. persist: "location"
  10. });
  11. });
  12. </script>
Скрипт настройки должен находиться перед закрывающим</head>
В архиве инструкция по подключению с использованием jQuery.Сookie — понадобится в том случае, если захотите запоминать действия пользователя. В этом случае, измените в скрипте настойки поведения меню параметр
  1. persist: "location"
на
  1. persist: "cookie"
На мой взгяд первый вариант информативнее.
Создать дополнительное меню в админке, указать шаблон для вывода модуля меню: mod_menuadd.tpl
Удачи!
+2
Сергей Петрович Сергей Петрович 12 лет назад #
Всё чётко!!! +
Можно развернуть подпункты, можно сразу перейти по ссылке. При переходе не схлапывается! Короче, меню, как оно должно быть!!!
0
Дмитрий Дмитрий 12 лет назад #
Красиво! Пока без надобности но плюс поставил)))
0
Trang Trang 12 лет назад #
тоже без надобности. Но плюс поставил- красиво и по существу. Многим пригодится
0
Azura Azura 12 лет назад #
Супер! Очень качественно! :))) Спасибищи!
0
Санечек Санечек 12 лет назад #
спасибо, достойная работа
0
Евгений Евгений 12 лет назад #
Нужное меню, поставил на сайт, только не все стрелки показывает, не могу найти в чем причина, все файлы на месте.
Олег Васильевич я Олег Васильевич я 12 лет назад #
Комментарий удален
0
Евгений Евгений 12 лет назад #
Со стрелками разобрался, теперь не разворачиваются и не сворачиваються подменю при нажатии на стрелки, а сразу переходит по ссылке.
Олег Васильевич я Олег Васильевич я 12 лет назад #
Комментарий удален
0
Leshiy Leshiy 12 лет назад #
Добрый день, у меня проблемка, меню каким-то образом конфликтует с модулем "Новые объявления", в окошке меню появляется ошибка : Warning: Smarty error: math: parameter y is empty in /home/klimusa/roadlife.klimusa.ru/docs/includes/smarty/libs/Smarty.class.php on line 1092 . можно ли побороть это?
Олег Васильевич я Олег Васильевич я 12 лет назад #
Комментарий удален
0
Harconen Harconen 12 лет назад #
да было бы луче если клика на пункт открывало подпункт а так на кружок наводить не удобно
0
AndroS AndroS 12 лет назад #
а как быть с родительским пунктом? Он же тоже ссылка. А там либо ссылка, либо открытие дочерних ссылок
0
Harconen Harconen 12 лет назад #
в демка норма работает кликая на пункты открывает подкатегорию а у меня почемута работает нада кликать на кружок
Олег Васильевич я Олег Васильевич я 12 лет назад #
Комментарий удален
0
Скорпион Скорпион 11 лет назад #
Как можно понять от чего не работает?
Такое ощущение что не срабатывают стили из jquery.treeview.js - каким способом можно это проверить?
0
Скорпион Скорпион 11 лет назад #
UPD. Использую Ваш шаблон "Чуть веселей 1-10"
Олег Васильевич я Олег Васильевич я 11 лет назад #
Комментарий удален
0
Bubble Gumoff Bubble Gumoff 11 лет назад #
module_leftnav.tpl - откуда берется?
0
Bubble Gumoff Bubble Gumoff 11 лет назад #
а для 1.10.1 будет работать?
Олег Васильевич я Олег Васильевич я 11 лет назад #
Комментарий удален
Олег Васильевич я Олег Васильевич я 11 лет назад #
Комментарий удален
0
Профмаркет Профмаркет 11 лет назад #
Классное меню!!! Очень нравиться!!! Подскажите пожалуйста можно ли его прикрутить на версию сайта 1.6.2 ?
0
WebMan WebMan 11 лет назад #
Спасибо, красивое меню!
Подтверждаю глюк с отображением стрелочек. Если самый нижний пункт меню имеет подпункты, то ни свёрнутая, ни развёрнутая стрелка не отображается. Если под ним добавить ещё пункт меню на том же уровне, то стрелки начинают показываться нормально.
Если в нижнем пункте меню подпунктов нет, то серая стрелка присутствует.
Тестировал на версии Инстанта 1.10.1 в разных браузерах. Что подправить для правильного отображения стрелок?
Олег Васильевич я Олег Васильевич я 11 лет назад #
Комментарий удален
0
WebMan WebMan 11 лет назад #
Я проверял на дефолтном шаблоне. Создал дополнительное меню и в нём набил несколько пунктов (с подпунктами и без них). При наличии и отображении нижнего пункта (независимо, с подпунктами или без), в предыдущем (с подпунктами) все стрелки отображаются. При снятии с публикации нижнего пункта в предыдущем с подпунктами стрелки пропадают. Пробовал создавать и скрывать вместе и поочереди два нижних простых пункта. При скрытии или удалении обоих стрелки пропадают. Если хоть один есть - стрелки на месте.
Может это связано с тем, что какие-то файлы не перекодированы в UTF для 10-ки?
Firebug показывает, что к свойству background-image рисунка применяется стиль none из reset.css.
Посмотрите, пожалуйста, почему так происходит.
Олег Васильевич я Олег Васильевич я 11 лет назад #
Комментарий удален
+1
WebMan WebMan 11 лет назад #
Спасибо за помощь в личке, Олег Васильевич!
Глюки со стрелками решены.
Я не знаю, зачем в настройках меню в админке на двух вкладках задаётся шаблон меню. Причём один раз выбирается из списка, а второй пишется ручками. Вот как раз во втором я ошибочно вписал "mod_menu_add.tpl" вместо "module_menu_add.tpl". После изменения на верный шаблон всё прекрасно заработало и без дополнительного нижнего скрытого пункта меню.
Спасибо за классное меню! smile
Олег Васильевич я Олег Васильевич я 11 лет назад #
Комментарий удален
0
WebMan WebMan 11 лет назад #
Это что именно Вы имели ввиду? Поясните подробнее для начинающих, плз.
Олег Васильевич я Олег Васильевич я 11 лет назад #
Комментарий удален
0
Павел Павел 9 лет назад #
если хотите чтобы не было стерол то в стиле .treeview li.last уберите одну букву или точку к примеру стиль на версии 1.10.6 выглядит так background: url(../images/menu_add_li.png) no-repeat scroll 0 6px transparent; если совсем уберете то подставятся прочие стрелки а если сделаете ошибку то стиль не найдет картинку стрелку то есть и нечего не выведете, убираете пару буквы или много примеру вот так background: url(../images/ne_nuzhna_kartinka.png) no-repeat scroll 0 6px transparent; главное чтобы у вас не было такой картинки с таким названием
0
LuckyRain LuckyRain 11 лет назад #
Добрый день! Вопрос по меню, а именно на демо в пункте меню

Статьи сайта -> Астрономия

подпункт "Первоначальный нулевой" специально подключен в меню или тянется автоматом?
Вопрос связан с тем, что если отдельно на каждую статью раздела "астрономии" не создавать пункт меню, то при просмотре такой статьи, все меню сворачивается и приходит в первоначальный вид. И в этом случае не понятно статью из какого раздела просматривают в данный момент.

Можно ли как нибудь настроить, чтобы меню не сворачивалось?
Олег Васильевич я Олег Васильевич я 11 лет назад #
Комментарий удален
0
SP SP 11 лет назад #
Отображает "главное меню", причем с теми пунктами, которые отключены в админке... а в настройках меню стоит "дополнительное меню 1". Версия цмс 1.7 В чем может быть дело?
0
Man Man 11 лет назад #
Олег Васильевич я!
А для 1.10 есть готовое?
0
Павел Павел 9 лет назад #
1.10.6 поставил. только вместо того чтобы кидать в папку includes из файла jquery.treeview.css стили добавил в файл шаблона стилей, а рисунки в папку шаблона images, да и в стилях нужно везде заменить путь к папке images на ../images пример background:url(images/bg.jpg)
на background:url(../images/bg.jpg)
+1
Странник Странник 10 лет назад #
Спасибо за фичу! На iCMS v.1.10.3 заработала сразу! Две минуты подключения! Единственно, что сделал: в своем шаблоне, когда вставил jqyery в header, прописал в скрипте вместо #navigation - id своего элемента с позицией, куда у меня выводится модуль. Ну и еще картинки со стрелочками на свои поменял! Респект!
0
Александр Потапов Александр Потапов 9 лет назад #
Можете подробнее описать как делали?

Еще от автора

Pioneer - скин для шаблона modern
Бред сумасшедшего на тему "Как бы выглядела InstantCMS 1-х сегодня".
Одна ёлка, немного снега и два Деда, играющихся в прятки
Ещё один вариант новогоднего украшения. Пока не замылено в сети (на эту минуту стоит только на 2-х сайтах)
Новогодние скидки
Всё платное за 50%
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.