Jump to content
Дизайн и модификация IPS Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
WITOLD

Красивое меню

Recommended Posts

Имею код для красивого меню, но на IPB не работает.

Хотелось бы разобраться в чем проблема

На XenForo работает как надо

<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>

Share this post


Link to post
Share on other sites
Обратите внимание

"Board url", указанный вами в профиле, некорректен, либо недоступен на данный момент. Пожауйста, заполните его, потому что он скорее всего потребуется при диагностике вашей проблемы.

Share this post


Link to post
Share on other sites

Хотелось бы разобраться в чем проблема

На XenForo работает как надо

Проблема в том, что в коде используется jquery, ipb работает на фреймворке prototype

Share this post


Link to post
Share on other sites

Как переписать скрипт для того чтоб заработало

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...