Красивое меню - Дизайн и модификация Invision Power Board

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

 

Правила раздела

Здесь обсуждаются вопросы оформления форумов IPB 3.x.
Пожалуйста, не оффтопьте, если зашли сюда случайно, и обратите внимание на соседние разделы.
Оформление форумов IPB 2.x.
Настройка форумов, включая установку и техническую настройку скинов.
Размещение рекламы на форумах.
SEO оптимизация форума.
Техническая поддержка наших скинов и модов.

СвернутьПрикрепленные теги

Теги не найдены

Страница 1 из 1
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в этой теме

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

#1 Пользователь не на сайте   WITOLD ответил: »

 
 
  • Newbie
  • *
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 9
  • Регистрация: 01-Ноябрь 11
  • Репутация: 1
  • IPB version:3.4.x
 

Отправлено 27 Апрель 2013 - 22:39

Имею код для красивого меню, но на 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>

0

#2 Пользователь не на сайте   Bot ответил: »

 
 
  • Почетный робот
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
 

Отправлено 27 Апрель 2013 - 22:39

Обратите внимание

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


0

#3 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 8 763
  • Регистрация: 20-Март 09
  • Репутация: 2 288
  • IPB version:3.1.x
 

Отправлено 27 Апрель 2013 - 23:32

Просмотреть сообщениеWITOLD сказал(а):

Хотелось бы разобраться в чем проблема
На XenForo работает как надо

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

#4 Пользователь не на сайте   WITOLD ответил: »

 
 
  • Newbie
  • *
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 9
  • Регистрация: 01-Ноябрь 11
  • Репутация: 1
  • IPB version:3.4.x
 

Отправлено 28 Апрель 2013 - 12:41

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

Сообщить об этой теме:


Страница 1 из 1
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в этой теме

1 пользователей читают эту тему
0 зарегистрированных, 1 гостей, 0 скрытых


Контактная информация

Вопросы по работе сайта

+7 (917) 501-4765
C 10 до 20 в рабочие дни (время московское)

Техническая поддержка

Контактные данные специалистов

Дизайн форумов

IPB 3.x ¦ IPB 2.x

Бесплатные шаблоны

IPB 3.2 – 3.4 ¦ IPB 3.1 ¦ IPB 3.0 ¦ IPB 2.2 – 2.3 ¦ IPB 2.1 ¦ Клипарт
Лицензия на использование ¦ Ваша поддержка ¦ О проекте
Copyright © 2005-2016 IPBSkins.ru Team
При копировании материалов с сайта
прямая ссылка на источник обязательна