Адаптация красивого, плавающего меню для DLE
Адаптировал:
DLE: 9.3 (и ранние версии)
Демо:
Скачиваем скрипты
Подключаем
Скрипты кидаем в папку js вашего шаблона
Открываем файл шаблона main.tpl
между тегами
<head></head>
Вставляем:
<script type="text/javascript" src="{THEME}/js/g.dev.js"></script>
<script type="text/javascript" src="{THEME}/js/jquery.hoverflow.min.js"></script>
<script type="text/javascript" src="{THEME}/js/jquery.hoverflow.min.js"></script>
Что бы заставить ваше меню двигаться обозначим его тегом
<menu>
Пример:
<menu>
<li><a href="#">О сайте</a></li>
<li><a href="#">В мире</a></li>
<li><a href="#">Экономика</a></li>
<li><a href="#">Религия</a></li>
<li><a href="#">Криминал</a></li>
<li><a href="#">Спорт</a></li>
<li><a href="#">Культура</a></li>
<li><a href="#">Инопресса</a></li>
</menu>
<li><a href="#">О сайте</a></li>
<li><a href="#">В мире</a></li>
<li><a href="#">Экономика</a></li>
<li><a href="#">Религия</a></li>
<li><a href="#">Криминал</a></li>
<li><a href="#">Спорт</a></li>
<li><a href="#">Культура</a></li>
<li><a href="#">Инопресса</a></li>
</menu>
Стили
menu {
display: block;
margin-bottom: 1em;
margin-left: 5px;
margin-top: 1em;
padding-left: 2px;
padding-right: 2px;
}
display: block;
margin-bottom: 1em;
margin-left: 5px;
margin-top: 1em;
padding-left: 2px;
padding-right: 2px;
}
Библиотека jQuery подключена в DLE по умолчанию, обязательна для работы скрипта, если же по каким либо причинам она отсутствует подключаем.