Все (ну или почти все) знают, что в Администрировании -> Настройках есть пункт -> Дополнительные пункты меню, через который мы можем добавлять дополнительные пункты к нашему главному меню, но не все догадываются, что в этом пункте к меню можно прикрутить практически любой html код,
стандартное добавление выглядит так:
1 = <a href="ссылка на дополнительный пункт меню"><span>Название пункта меню (описание)</span></a>
где цифра впереди это порядковый номер позиции дополнительного пункта в меню, начиная с 0 и т.д.
но можно впихнуть сюда и целый список ссылок, который будет в последствии выпадающим, схема получается такова:
1 = <a href="/pages/spravochnik">
<span>Справочник
<ul>
<li><a href="/pages/ssylka">Пункт 1</a></li>
<li><a href="/pages/ssylka2">Пункт 2</a></li>
<li><a href="/pages/ssylka3">Пункт 3</a></li>
<li><a href="/pages/ssylka4">Пункт 4</a></li>
<li><a href="/pages/ssylka5">Пункт 5</a></li>
</ul>
</span></a>
НО вставлять весь этот код нужно без пробелов между тегами, т.е. так
1 = <a href="/pages/spravochnik"><span>Справочник<ul><li><a href="/pages/ssylka">Пункт 1</a></li><li><a href="/pages/ssylka2">Пункт 2</a></li><li><a href="/pages/ssylka3">Пункт 3</a></li><li><a href="/pages/ssylka4">Пункт 4</a></li><li><a href="/pages/ssylka5">Пункт 5</a></li></ul></span></a>
теперь создадим эффект выпадания списка дополнительных пунктов в главном меню при наведении курсора
в html-верх или в свой стиль добавляем код:
<style>
/*выпадающее меню*/
#pun-navlinks {
opacity: 0.9;
filter: alpha(opacity=90);
text-align: center !important;
}
#pun-navlinks ul li {
margin: 0 20px 0 0;
padding: 0.9em 0 !important;
position: relative;
}
#pun-navlinks ul li ul {
width: 175px;
display: none;
position: absolute;
z-index: 10000;
top: 30px;
left: -35px;
background: #828282;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#pun-navlinks.section ul.container ul li {
float: left;
display: block;
width: 100%;
text-align: center;
font-weight: bold;
padding: 0.5em 0 !important;
margin: 0 !important;
position: static !important;
}
#pun-navlinks ul li:hover ul {
display: block !important;
}
/* 2nd Menu */
#pun-navlinks ul li:hover li a {
color: #fff;
}
/* 2nd Menu Hover Persistence */
#pun-navlinks ul li:hover li a:hover, #pun-navlinks ul li:hover li:hover a {
background: #555;
color: #ffcc33;
text-decoration: none;
font-weight: bold;
}
</style>была предпринята попытка сделать стиль выпадающего меню, не нарушающим вид главного меню, но возможно что его ещё надо править,
спасибо rps в помощи корректировки стиля!
преимущество такого создания меню в виде выпадающего списка, в том что этот выпадающий список будет отображаться и работать даже при администрировании форума и при отключенной поддержки JavaScript в браузере у пользователя
