Адаптировал: Golden
DLE: 9.3 (и ранние версии)
Демо: topscripts.ru
Адаптировал:
DLE: 9.3 (и ранние версии)
Демо:
Подключаем
Скрипты кидаем в папку js вашего шаблона
Открываем файл шаблона main.tpl
между тегами
Вставляем:
<script type=»text/javascript»>
jkmegamenu.definemenu(«megaanchor», «megamenu1», «mouseover»)
</script>
В коде выше Вы можете найти значение «mouseover». Его можно заменить на «click» и тогда меню будет открываться не при наведении, а при нажатии на ссылку.
Если на странице будет несколько меню, тогда необходимо будет несколько раз их инициализировать. Для этого достаточно нужное количество раз повторить строку jkmegamenu.definemenu() с классами, которые относятся к этому меню.
Далее в любом месте документа вставляем ссылку с id=»megaanchor». Именно при наведении мышки на эту ссылку у нас будет появляться меню. После ссылки необходимо оформить разметку меню. Как Вы видите, все предельно просто: с помощью заголовков 3-го уровня и неупорядоченных списков мы можем создать любую конфигурацию.
Пример HTML
….
….
<div id=»megamenu1″ class=»megamenu»>
<div class=»column»>
<h3>Web Development</h3>
<ul>
<li><a href=»#»>javascript Kit</a></li>
<li><a href=»#»>Dynamic Drive</a></li>
<li><a href=»#»>CSS Drive</a></li>
<li><a href=»#»>Coding Forums</a></li>
<li><a href=»#»>DOM Reference</a></li>
</ul>
</div>
<div class=»column»>
<h3>News Related</h3>
<ul>
<li><a href=»#»>CNN</a></li>
<li><a href=»#»>MSNBC</a></li>
<li><a href=»#»>Google</a></li>
<li><a href=»#»>BBC News</a></li>
</ul>
</div>
<div class=»column»>
<h3>Technology</h3>
<ul>
<li><a href=»#»>News.com</a></li>
<li><a href=»#»>SlashDot</a></li>
<li><a href=»#»>Digg</a></li>
<li><a href=»#»>Tech Crunch</a></li>
</ul>
</div>
<br style=»clear: left» /> <!—Break after 3rd column. Move this if desired—>
<div class=»column»>
<h3>Web Development</h3>
<ul>
<li><a href=»#»>javascript Kit</a></li>
<li><a href=»#»>Dynamic Drive</a></li>
<li><a href=»#»>CSS Drive</a></li>
<li><a href=»#»>Coding Forums</a></li>
<li><a href=»#»>DOM Reference</a></li>
</ul>
</div>
<div class=»column»>
<h3>News Related</h3>
<ul>
<li><a href=»#»>CNN</a></li>
<li><a href=»#»>MSNBC</a></li>
<li><a href=»#»>Google</a></li>
<li><a href=»#»>BBC News</a></li>
</ul>
</div>
<div class=»column»>
<h3>Technology</h3>
<ul>
<li><a href=»#»>News.com</a></li>
<li><a href=»#»>SlashDot</a></li>
<li><a href=»#»>Digg</a></li>
<li><a href=»#»>Tech Crunch</a></li>
</ul>
</div>
</div>
С помощью стилей придаем данному блоку относительное позиционирование. Благодаря этому можем размещать дополнительные блоки внутри.
Стили
position: absolute;
display: none;
left: 0;
top: 0;
background: white;
border: 1px solid #f06b24;
border-width: 5px 1px;
padding: 10px;
font: normal 12px Verdana;
z-index: 100;
}
.megamenu .column{
float: left;
width: 180px; /*width of each menu column*/
margin-right: 5px;
}
.megamenu .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.megamenu .column ul li{
padding-bottom: 5px;
}
.megamenu .column h3{
background: #e0e0e0;
font: bold 13px Arial;
margin: 0 0 5px 0;
}
.megamenu .column ul li a{
text-decoration: none;
}
.megamenu .column ul li a:hover{
color: red;
}
Библиотека jQuery подключена в DLE по умолчанию, обязательна для работы скрипта, если же по каким либо причинам она отсутствует подключаем.