нашел вот красивое меню, но на IPB не работает хотя на XenForo на ура
Скажите как подключить библиотеки так чтоб можно было парсировть на форуме в боковую панель из темплейта
{parse template=
<div class="section">
<div class="secondaryContent">
<h3>МЕНЮ</h3>
<script>
$(document).ready(function(){
/* Скрипт будет выполнен после загрузки страницы */
/* Смена эффекта для плагина easing */
$.easing.def = "easeOutBounce";
$('li.NavigationButton a').click(function(e){
var dropDown = $(this).parent().next();
/* Закрываем все другие списки, кроме текущего */
$('.dropdown').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});
</script>
<!-- #1 -->
<li class="menu">
<ul>
<li class="NavigationButton">
<a href="#">Кнопка большая<span></span></a>
</li>
<li class="dropdown">
<ul>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
</ul>
</li>
<!-- конец #1 -->
<!-- #2 -->
<li class="menu">
<ul>
<li class="NavigationButton">
<a href="#">Кнопка большая<span></span></a>
</li>
<li class="dropdown">
<ul>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
</ul>
</li>
<!-- конец #2 -->
<!-- #3 -->
<li class="menu">
<ul>
<li class="NavigationButton">
<a href="#">Кнопка большая<span></span></a>
</li>
<li class="dropdown">
<ul>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
</ul>
</li>
<!-- конец #3 -->
</div>
</div>
<!-- CSS Стиль меню -->
<style>
li.NavigationButton a
{
margin: 4px 4px 0px 0px;/* Расстояние между кнопками */
}
/* Главные элементы списка */
li.NavigationButton a{
width: 179px;
-moz-box-shadow:inset 0px 1px 0px 0px #FFF;
-webkit-box-shadow:inset 0px 1px 0px 0px #FFF;
box-shadow:inset 0px 1px 0px 0px #FFF;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #585858), color-stop(1, #B00C0C) );
background:-moz-linear-gradient( center top, #585858 5%, #B00C0C 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#585858', endColorstr='B00C0C');
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #000;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:14px;
font-weight:bold;
padding:6px 24px;
text-align: center;
text-decoration:none;
text-shadow:1px 1px 0px #000;
}
li.NavigationButton a:hover{
text-decoration:none;
}
li.NavigationButton a span{
height:44px;
position:absolute;
right:0;
top:0;
width:4px;
display:block;
}
li.NavigationButton:active {
position:relative;
top:1px;
}
/* Эффекты при наведении */
li.NavigationButton a:hover{ background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8c0909), color-stop(1, #8c0909) );
background:-moz-linear-gradient( center top, #8c0909 5%, #8c0909 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8c0909', endColorstr='#8c0909');
background-color:#585858;}
/* Расширяющиеся списки */
.dropdown{
display:none;
padding-top:5px;
width:100%;
}
/* Каждый элемент в таких списках */
li.dropdown a{
width: 179px;
border:1px solid #40392C;
color:#CCCCCC;
margin:2px 0;
padding:4px 18px;
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:11px;
font-weight:bold;
padding:6px 24px;
text-align: center;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
li.dropdown a:hover
{
text-decoration:none;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
li.dropdown a:active {
position:relative;
top:1px;
}
</style>