Заметки фрилансера

Подчеркивание активного пункта меню с эффектом плавного движения линии

Делаем по-порядку:

1. Подключаем скрипт на всех страницах меню

   <script src="/js/magic-line.js" type="text/javascript" async="async"></script>

   скрипт подключается асинхронно в безконфликтном состоянии. Блок меню имеет id равный

   top-menu

2. Добавляем стили

   #magic-line{position:absolute;bottom:0px;left:0;width:100px;height:4px;background:yellow;}

3. Далее меняем стили в применении к стандартному шаблону Joomla - protostar
   если есть выпадающие пункты меню то меняем и добавляем:
   
   • убираем position: relative у пункта меню: #top-menu li
   • Переопределяем шаблон стандартного модуля меню в нашем шаблоне и в файле default.php   mod_menu строка 87 делаем так:

     // The next item is deeper.
     if ($item->deeper)
     {
     echo '<div><ul class="nav-child unstyled small">';
     }
     // The next item is shallower.
     elseif ($item->shallower)
     {
     echo '</li>';
     echo str_repeat('</ul></div></li>', $item->level_diff);
     }
     // The next item is on the same level.
     else
     {
     echo '</li>';
     }
     }
     ?></ul>

   • в стилях убираем .navigation .nav-child {/*left: 0;*/} и добавляем
     #top-menu>li>div{position: static;}
     #top-menu li.parent:hover>div>ul.nav-child {display: block;}

 Ну вот и все. Если будут вопросы, пишите

Скачать файл magic-line.jsmagic-line.js