Додаткове меню

+3
Голосів: 3
Опубліковано: 2012 / 07 / 30
Переглядів: 72
Редагувалося: 3 рази — останній 30 липня 2012
Настрій: норма
Привіт!
Розповім як підключити гарне вертикальне меню для InstantCMS.
Буде використано всім відомий плагін jQuery Treeview.
Наскільки розумію, в версіях InstantCMS до 1.8 подібне меню працювало.
Не можу точно сказати - я з InstantCMS познайомився коли актуальною була версія 1.8
Меню, яке я запропоную буде чимось середнім між jQuery Treeview та Accordion.

Суть відміни полягає ось в чому: в Treeview-меню при клацанні на лінк-категорію, що містить вкладені лінки, категорія розкривається і стають доступними вкладені. Так звичайно, можливо зробити. Однак, в тому разі, коли ми для лінка-категорії хочемо задати перехід, нас це навряд чи влаштує.
Розглянемо простий приклад. Мета створити навігацію по контентному розділі. У нас з вами є категорії контенту:
Код PHP:
  1.  
  2. 1. Статті
  3. 2. Новини
  4. 2.1 Астрономія
  5. 2.1.1 стаття-1
  6. 2.1.2 стаття-2
  7. 2.1.1 стаття-3
  8. 2.2 Геологія
  9. 2.3 Біологія
  10. 3.Огляди
Для реалізації такого меню використовуємо плагіни jQuery Treeview jQuery.Сookie. Для чого останній? Ми зможемо запа'ятати за необхідності в якому вигляді залишилося меню, коли відвідувач покинув сторінку і віддати йому наступного разу.
Отже, підключаємо jquery.treeview.js, та jquery.cookie.js (останній не обов'язково). Перед закриваючим </head> вставляємо скрипт налаштування поведінки меню:
Код PHP:
  1. <script language="javascript">
  2. $(document).ready(function(){
  3. $("#navigation").treeview({
  4. animated: "slow",
  5. collapsed: true,
  6. unique: true,
  7. persist: "location"
  8. });
  9. });
  10. </script>
Зверніть увагу на
Код PHP:
  1. persist: "location"
- в такому вигляді меню не буде використовувати "запам'ятовування". Якщо ви маєте ціль використати cookie, замініть location на cookie. Про інші налаштування розповім за нагоди.
Демо реалізоване в безкоштовну шаблоні "Трішки веселіше"- спробуйте клацати по заголовках пунктів меню та по помаранчевих піктограмках.
Все готове для підключення меню в InstantCMS, в тому вигляді як на демо можна взяти тут Інструкція в архіві.
Заходіть!

Читайте також:

  • Трішки веселіше
    Трішки веселіше

    Демо Изображение уменьшено. Щелкните, чтобы увидеть оригинал. Трішки переробив дефолтний шаблон - давно хотілося чогось веселішого. Позиції: Пояснення: 1. варіанти основної частини: три к...

  • Приховуємо модулі для економії місця
    Приховуємо модулі для економії місця

    Привіт всім! Ось тут наш брат по зброї запитує як робляться модулі які за замовчуванням закриті, а їхній зміст відкривається при клацанні по назві. Думаю багатьом стане в нагоді така можливість. Вз...

  • Вивід випадкового модуля
    Вивід випадкового модуля

    Привіт! Покажу як простенько вивести випадковий модуль на позицію в шаблоні. Для прикладу виведемо три модуля. Всього кілька простеньких кроків: 1. стиль модулів: Код PHP:<style> #first,...

  • Шаблон для InstantCMS 1.10
    Шаблон для InstantCMS 1.10

    Динамічний: три колонки, дві (з лівим або правим сайтбарами), одна колонка (без сайтбарів). Схема позицій: Змінено вивід модулів та компонентів. В шаблон вже встановлено: додаткове вертикальне мен...

Коментарі (2)
Александр # 25 вересня 2012 у 17:02 0
Здравствуйте, есть проблема с меню, подключил всё по инструкции, но при добавлении пункта меню не имеющего подпункты - меню отказывается разворачиваться, т е отображается только верхний уровень. А если все пункты имеют вложенность, то меню раскрываеться, только на месте картинок стрелочек - пустое место, но которое реагирует на нажатие и выполняет свои функции. Шаблон не дефулт.
Олег Васильович я # 25 вересня 2012 у 18:58 0
А чему разворачиваться, если нет подпунктов?
Касаемо стрелочек: проверьте пути к картинкам в jquery.treeview.css.
Удачи!