Меню аккордеон для DLE

menyshka
аккордеон для DLE

Здравствуйте. Четыре дня назад впервые установил новостной движок DataLife Engine. Раньше почему то мне как то не нравились сайты которые я видел на этом движке…

А тут ради интереса поставил на денвер и до чего он мне понравился что даже захотелось сайт замутить на нём.

Понравилось то,что шустрый он очень,да и вообще прост в обращении. Правда стоит денег…

Ну короче начал я делать сайт себе, нашёл шаблон и установил. И тут возникла проблемка. Понадобилось мне меню раздвижное. Категорий по задумке много и подкатегорий тоже.

А до этого ставил шаблончик тоже нормальный такой,но мне в нём понравилась только менюшка. Короче вытащил с того шаблона и поставил на этот.

На мой взгляд скромный менюшка очень даже ни чего. И вот решил поделится ею с вами. Может кому тоже пригодится.

И так скачиваем архив с файлами менюшки в низу этого поста и распаковываем его. Две картинки из архива надо положить в папку images ВАШЕГО ШАБЛОНА.

Тоже самое надо сделать с файлом ddaccordion.js,только его надо закинуть в папку js. Идём далее в папку style вашего шаблона и открываем там файл style.css и вот в самый низ этого файла вставляем это:

.bnavi .dcont {  width: 200px; } .bnavi ul, .bnavi ul li { display: inline; } .bnavi ul b a, .bnavi ul b span { background: url(«../images/sublinks.png») no-repeat 0 -23px; text-indent: 8px; display: block; height: 23px; line-height: 22px; margin-bottom: 1px; text-decoration: none; color: #393939; cursor: pointer; } .bnavi ul b a:hover, .bnavi ul b span:hover, .bnavi ul b a.active { background-position: 0 -46px; color: #2681a3; } .bnavi ul b a.active { background-position: 0 0; } .bnavi ul b span.closed { background-position: 0 -69px; } .bnavi ul b span.closed:hover { background-position: 0 -92px; } .bnavi ul b span.opened { background-position: 0 -115px; margin: 0; } .bnavi .submenu, .bnavi .submenu div { overflow: hidden; width: 200px; } .bnavi .submenu { margin-bottom: 1px; background: #e7e7e7 url(«../images/submenu.png») no-repeat -226px 100%; } .bnavi .submenu div { background: url(«../images/submenu.png») no-repeat 0 0; } .bnavi .submenu ul { display: block; margin-left: 8px; padding: 8px 0; width: 209px; } .bnavi .submenu a { color: #2b7fa1; text-decoration: none; display: block; height: 19px; line-height: 18px; text-indent: 17px; background: url(«../images/submenu.png») no-repeat -452px 0; } .bnavi .submenu a:hover { background: #f8f8f8 url(«../images/submenu.png») no-repeat -452px -19px; }

Осталось не много… Идём в файл main.tpl вашего шаблона и перед закрытием тега </head> ставим это:

<script type=«text/javascript» src=«{THEME}/js/ddaccordion.js»></script> <script type=«text/javascript»> ddaccordion.init({ headerclass: «sublink», contentclass: «submenu», revealtype: «click», mouseoverdelay: 200, collapseprev: false, defaultexpanded: [], onemustopen: false, animatedefault: false, persiststate: false, toggleclass: [«closed», «opened»], togglehtml: [«none», «», «»], animatespeed: «fast», oninit:function(expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> <style type=«text/css»> .submenu{display: none} </style>

Ну и наконец меню ставим там где у вас меню всё в том же main.tpl. Ставим это:

<div class=«block_blue bnavi»><div class=«dtop»><div class=«dbtm»> <h3 class=«dtitle»>Меню</h3> <div class=«dcont»> <ul class=«reset»> <li><b><a href=«/main/»>Новости</a></b></li> <li><b><span headerindex=«0h» class=«sublink closed»>CMS для сайта</span></b> <div style=«display: none;» contentindex=«0c» class=«submenu»><div> <ul class=«reset»> <li><a href=«/cms/»>Все</a></li> <li><a href=«/cms/cms-games/»>CMS Игры</a></li> <li><a href=«/cms/cms-engine/»>CMS движки</a></li> <li><a href=«/cms/files-cms/»>Разное</a></li> </ul> </div></div> </li><li><b><span headerindex=«1h» class=«sublink closed»>DLE — DataLife Engine</span></b> <div style=«display: none;» contentindex=«1c» class=«submenu»><div> <ul class=«reset»> <li><a href=«/dle/»>Все</a></li> <li><a href=«/dle/hack-dle/»>Хаки</a></li> <li><a href=«/dle/cms_dle/»>Движок</a></li> <li><a href=«/dle/skriptdle/»>Модули</a></li> <li><a href=«/dle/shdle/»>Шаблоны</a></li> <li><a href=«/dle/defence-dle/»>Защита DLE</a></li> </ul> </div></div> </li> <li><b><span headerindex=«2h» class=«sublink closed»>Ucoz система</span></b> <div style=«display: none;» contentindex=«2c» class=«submenu»><div> <ul class=«reset»> <li><a href=«/ucoz/»>Все</a></li> <li><a href=«/ucoz/scriptucoz/»>Скрипты</a></li> <li><a href=«/ucoz/shucoz/»>Шаблоны</a></li> <li><a href=«/ucoz/defucoz/»>Защита Ucoz</a></li> </ul> </div></div> </li> <li><b><span headerindex=«3h» class=«sublink closed»>Joomla CMS</span></b> <div style=«display: none;» contentindex=«3c» class=«submenu»><div> <ul class=«reset»> <li><a href=«/joomla/»>Все</a></li> <li><a href=«/joomla/engine-joomla/»>Движок</a></li> <li><a href=«/joomla/module-joomla/»>Модули</a></li> <li><a href=«/joomla/plugins-joomla/»>Плагины</a></li> <li><a href=«/joomla/shablon-joomla/»>Шаблоны</a></li> <li><a href=«/joomla/defence-joomla/»>Защита</a></li> </ul> </div></div> </li></div></div></div></div>

Конечно надо все ссылки в нём переделать под ваши нужды. Ну и стиль подделать под ваш шаблон. Вот и всё. Удачи!


Понравилась статья? Поделиться с друзьями:
Комментарии: 15
  1. кека

    на 9.2 не работает или шаблон такой :x

    1. Admin (автор)

      Как раз на 9.2 и ставил я и работает отлично.Какой у вас шаблон??

  2. Viche

    Можно вопрос, почему не отображает картинки ?

    1. Admin (автор)

      Картинки в меню?Если да то,значит что то вы в стилях не то сделали.

  3. Viche

    та все правильно сделал

  4. Viche

    А ты можешь эту менюху прыкрутить к моему сайту…. ?

    1. Admin (автор)

      Покажите сайт и я вам отвечу.

  5. Viche

    77.121.208.185

  6. Viche

    а можешь скинуть весь тот код который ты туда ставил, потому что в этом коде присутствуют такие знаки » » «

  7. Viche

    Ну а css?

  8. Viche

    И код main.tpl

  9. Admin (автор)

    Ну а » заменить на » не судьба? ;-) и так же в main.tpl. Если всё менять самому влом.Есть Notepad++ который заменит всё сразу :|

  10. Вольт

    Если это cms-mod.ru ваш демо сайт, скажите где можно такой шаблон скачать?

    1. Admin (автор)

      Незнаю!

  11. Толя

    Чет только ссылки на скачивание файлов не нашел,невидно.А так спасибо

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: