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

+77
5.63K
Предлагаемое решение позволит реализовать дополнительное вертикальное меню в сайтбаре.
Меню представляет собой нечто среднее между 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
Сергей Петрович Сергей Петрович 9 лет назад #
Всё чётко!!! +
Можно развернуть подпункты, можно сразу перейти по ссылке. При переходе не схлапывается! Короче, меню, как оно должно быть!!!
0
Дмитрий Дмитрий 9 лет назад #
Красиво! Пока без надобности но плюс поставил)))
0
Trang Trang 9 лет назад #
тоже без надобности. Но плюс поставил- красиво и по существу. Многим пригодится
0
Azura Azura 9 лет назад #
Супер! Очень качественно! :))) Спасибищи!
0
Санечек Санечек 9 лет назад #
спасибо, достойная работа
0
Евгений Евгений 9 лет назад #
Нужное меню, поставил на сайт, только не все стрелки показывает, не могу найти в чем причина, все файлы на месте.
0
Олег Васильевич я Олег Васильевич я 9 лет назад #
киньте адрес в личку - гляну
0
Евгений Евгений 9 лет назад #
Со стрелками разобрался, теперь не разворачиваются и не сворачиваються подменю при нажатии на стрелки, а сразу переходит по ссылке.
0
Олег Васильевич я Олег Васильевич я 9 лет назад #
См.личку
0
Leshiy Leshiy 9 лет назад #
Добрый день, у меня проблемка, меню каким-то образом конфликтует с модулем "Новые объявления", в окошке меню появляется ошибка : Warning: Smarty error: math: parameter y is empty in /home/klimusa/roadlife.klimusa.ru/docs/includes/smarty/libs/Smarty.class.php on line 1092 . можно ли побороть это?
0
Олег Васильевич я Олег Васильевич я 9 лет назад #
Пока вмдим что конфликт не с модулем "Новые объявления".
Проблема связана с отображением на главной
0
Harconen Harconen 9 лет назад #
да было бы луче если клика на пункт открывало подпункт а так на кружок наводить не удобно
0
AndroS AndroS 9 лет назад #
а как быть с родительским пунктом? Он же тоже ссылка. А там либо ссылка, либо открытие дочерних ссылок
0
Harconen Harconen 9 лет назад #
в демка норма работает кликая на пункты открывает подкатегорию а у меня почемута работает нада кликать на кружок
0
Олег Васильевич я Олег Васильевич я 9 лет назад #
Просто настройте правильно и всё заработает.
У вас добрый десяток пунктов меню открывает одну и ту же статью.
Удачи!
0
Скорпион Скорпион 9 лет назад #
Как можно понять от чего не работает?
Такое ощущение что не срабатывают стили из jquery.treeview.js - каким способом можно это проверить?
0
Скорпион Скорпион 9 лет назад #
UPD. Использую Ваш шаблон "Чуть веселей 1-10"
0
Олег Васильевич я Олег Васильевич я 9 лет назад #
Шаблон модулю module_leftnav.tpl назначен?
0
Bubble Gumoff Bubble Gumoff 9 лет назад #
module_leftnav.tpl - откуда берется?
0
Bubble Gumoff Bubble Gumoff 9 лет назад #
а для 1.10.1 будет работать?
0
Олег Васильевич я Олег Васильевич я 9 лет назад #
Работает
Насколько помню, пару файлов перекодировал.
Гляну позже, закинe для UTF
0
Олег Васильевич я Олег Васильевич я 9 лет назад #
закинe - закину
0
Профмаркет Профмаркет 9 лет назад #
Классное меню!!! Очень нравиться!!! Подскажите пожалуйста можно ли его прикрутить на версию сайта 1.6.2 ?
0
WebMan WebMan 9 лет назад #
Спасибо, красивое меню!
Подтверждаю глюк с отображением стрелочек. Если самый нижний пункт меню имеет подпункты, то ни свёрнутая, ни развёрнутая стрелка не отображается. Если под ним добавить ещё пункт меню на том же уровне, то стрелки начинают показываться нормально.
Если в нижнем пункте меню подпунктов нет, то серая стрелка присутствует.
Тестировал на версии Инстанта 1.10.1 в разных браузерах. Что подправить для правильного отображения стрелок?
0
Олег Васильевич я Олег Васильевич я 9 лет назад #
Давайте по пунктам:
1.
Если самый нижний пункт меню имеет подпункты, то ни свёрнутая, ни развёрнутая стрелка не отображается
вот демо этого шаблона
Видим что
нижний пункт меню имеет подпункты
и всё работает без проблем. т.е. что-то где-то "не так". Как-то пробовал лечить человеку такой-же глюк. Так и разобрался в чём там дело было. Решили вопрос так: создали пункт без подпунктов и сняли с публикации.
2.
Если в нижнем пункте меню подпунктов нет, то серая стрелка присутствует.
Так и делалось - с подпунктами своя картинка, без подпуктов - своя
Удачи!
0
WebMan WebMan 9 лет назад #
Я проверял на дефолтном шаблоне. Создал дополнительное меню и в нём набил несколько пунктов (с подпунктами и без них). При наличии и отображении нижнего пункта (независимо, с подпунктами или без), в предыдущем (с подпунктами) все стрелки отображаются. При снятии с публикации нижнего пункта в предыдущем с подпунктами стрелки пропадают. Пробовал создавать и скрывать вместе и поочереди два нижних простых пункта. При скрытии или удалении обоих стрелки пропадают. Если хоть один есть - стрелки на месте.
Может это связано с тем, что какие-то файлы не перекодированы в UTF для 10-ки?
Firebug показывает, что к свойству background-image рисунка применяется стиль none из reset.css.
Посмотрите, пожалуйста, почему так происходит.
0
Олег Васильевич я Олег Васильевич я 9 лет назад #
Так где ж смотреть то?
Может бы ссылочку какую или скрины, на крайний случай...
+1
WebMan WebMan 9 лет назад #
Спасибо за помощь в личке, Олег Васильевич!
Глюки со стрелками решены.
Я не знаю, зачем в настройках меню в админке на двух вкладках задаётся шаблон меню. Причём один раз выбирается из списка, а второй пишется ручками. Вот как раз во втором я ошибочно вписал "mod_menu_add.tpl" вместо "module_menu_add.tpl". После изменения на верный шаблон всё прекрасно заработало и без дополнительного нижнего скрытого пункта меню.
Спасибо за классное меню! smile
0
Олег Васильевич я Олег Васильевич я 9 лет назад #
Эх, если б все модули такие настройки имели cry
0
WebMan WebMan 9 лет назад #
Это что именно Вы имели ввиду? Поясните подробнее для начинающих, плз.
0
Олег Васильевич я Олег Васильевич я 9 лет назад #
Если скайпом пользуетесь, стукните ещё разок в личку. Попробую в разговоре объяснить. (Знаний не хватает чтобы написать внятно)
0
Павел Павел 7 лет назад #
если хотите чтобы не было стерол то в стиле .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 9 лет назад #
Добрый день! Вопрос по меню, а именно на демо в пункте меню

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

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

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

Еще от автора

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