Перейти к содержимому


Witold

Регистрация: 30 Apr 2013
Offline Активность: May 01 2013 12:58 PM
-----

Мои сообщения

В теме: jquery в IPB

30 April 2013 - 06:11 PM

нашел вот красивое меню, но на 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>