Создание меню, пункты которого можно скрыть/раскрыть

KakBeOlolo · 06.11.2011

Обновлено 14.02.2013.

Меню сделано в синем стиле, посмотреть можете на моем сайте.

Код:

<div class="section">
  <div class="secondaryContent" id="BannerSidebar">
  <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>
    <ul>
      <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>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<style>
li.NavigationButton a
{
margin: 4px 4px 0px 0px;/* Расстояние между кнопками */
}
/* Главные элементы списка */
li.NavigationButton a{
  width: 130px;
  -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
  -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
  box-shadow:inset 0px 1px 0px 0px #bbdaf7;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
  background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
  background-color:#79bbff;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  border:1px solid #84bbf3;
  display:inline-block;
  color:#ffffff;
  font-family:arial;
  font-size:15px;
  font-weight:bold;
  padding:6px 24px;
  text-decoration:none;
  text-shadow:1px 1px 0px #528ecc;
}
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, #378de5), color-stop(1, #79bbff) );
  background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
  background-color:#378de5;}
/* Расширяющиеся списки */
.dropdown{
  display:none;
  padding-top:5px;
  width:100%;
}
/* Каждый элемент в таких списках */
li.dropdown a{
  width: 130px;
  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-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>

Демо у меня на форуме (слево меню):
http://market4game.ru/
М.б кому-то пригодится

Desperado · 06.11.2011

это такой тонкий пиар?)

KakBeOlolo · 06.11.2011

Desperado сказал(а): ↑

это такой тонкий пиар?)
Нажмите, чтобы раскрыть...

Да нет, просто показать как выглядит

KakBeOlolo · 06.11.2011

Обнаружил проблемку, если это меню вставлять на форум, то при нажатии на аватарку зависает страница и никуда не получается нажать, проходит после обновления страницы.
Помогите решить плз.

Впринципе если отключить всплывающие окна, то все нормально

Romchik® · 06.11.2011

Мде... У XF есть ведь свой jQuery, грузится уже в HEAD. Зачем у вас еще идет подгрузка (примем многократно повторяющаяся) последней версии jQuery? Странно, что форум еще работает боле-менее...

KakBeOlolo · 07.11.2011

Получается это лишнее и лишний раз грузит форум?
Код:
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

Yoskaldyr · 07.11.2011

получается что работают 2 jquery одновременно и разных версий. Форум не грузит, только вот на стороне клиента полный бардак - только удивительно что так мало поломалось из ajax-а в ксене.

KakBeOlolo · 07.11.2011

Второй jquery и был причиной того, что всплывающее окно с профилем зависало.

KakBeOlolo · 27.11.2011

Модераторы удалите плз в первом посте это:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Нажмите, чтобы раскрыть...

А то меню с профилем не будут открываться.

Linkkk · 17.03.2012

что за сайт у тебя?

KakBeOlolo · 14.02.2013

Вот по человечески сделанная навигация на чистом CSS, модеры замените первый пост этим кодом, а то год назад, когда я создавал эту тему, ни в CSS ни в HTML не разбирался

Меню сделано в синем стиле, посмотреть можете на моем сайте

Код:

<div class="section">
<div class="secondaryContent" id="BannerSidebar">
<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>
 
 
 
<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>
 
        </ul>
</li>
 
 
 
</DIV>
</DIV>
 
 
 
<style>
 
li.NavigationButton a
{
margin: 4px 4px 0px 0px;/* Расстояние между кнопками */
}
 
/* Главные элементы списка */
 
 
li.NavigationButton a{
        width: 130px;
    -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
    background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
    background-color:#79bbff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #84bbf3;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #528ecc;
}
 
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, #378de5), color-stop(1, #79bbff) );
    background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
    background-color:#378de5;}
/* Расширяющиеся списки */
.dropdown{
 
    display:none;
    padding-top:5px;
    width:100%;
}
/* Каждый элемент в таких списках */
li.dropdown a{
 
    width: 130px;
    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-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>

Romchik® · 14.02.2013

HTML только все равно невалидный. Я в первом сообщении добавил недостающие теги. Но не уверен, верно так или там один список лишний.

Witold · 20.07.2013

Ребята! на 1.1.3 работает но поставил на 1.1.5 не раскрывается
может кто знает в чем проблема
http://ga1axy.ru/

KakBeOlolo · 20.07.2013

Он работает на любых версиях, ты скорей всего неправильно вставил код

Witold · 21.07.2013

Делал я так.

Создал шаблон menu_sidebar
содержимое

Код:

<xen:require css="menu_sidebar.css" />
<div class="section">
  <div class="secondaryContent" id="BannerSidebar">
    <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>
    <ul>
      <li class="menu">
        <ul>
          <li class="NavigationButton"><a href="#">TEXT<span></span></a></li>
          <li class="dropdown">
            <ul>
              <li><a href="" target="_blank">text</a></li>
              <li><a href="" target="_blank">text</a></li>
              <li><a href="" target="_blank">text</a></li>
              <li><a href="" target="_blank">text</a></li>
              <li><a href="" target="_blank">text</a></li>
            </ul>
          </li>
          <li class="NavigationButton"><a href="#">TEXT<span></span></a></li>
          <li class="dropdown">
            <ul>
              <li><a href="" target="_blank">text</a></li>
              <li><a href="" target="_blank">text</a></li>
              <li><a href="" target="_blank">text</a></li>
              <li><a href="" target="_blank">text</a></li>
              <li><a href="" target="_blank">text</a></li>
            </ul>
          </li>
          <li class="NavigationButton"><a href="#">TEXT<span></span></a></li>
          <li class="dropdown">
            <ul>
              <li><a href="" target="_blank">text</a></li>
              <li><a href="" target="_blank">text</a></li>
              <li><a href="" target="_blank">text</a></li>
              <li><a href="" target="_blank">text</a></li>
              <li><a href="" target="_blank">text</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Создал шаблон стиля menu_sidebar.css
содержимое

Код:

li.NavigationButton a
{
margin: 4px 4px 0px 0px;/* Расстояние между кнопками */
}

/* Главные элементы списка */


li.NavigationButton a{
        width: 178px;
    -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
    background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
    background-color:#79bbff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #84bbf3;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #528ecc;
    text-align: center;
}

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, #378de5), color-stop(1, #79bbff) );
    background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
    background-color:#378de5;}
/* Расширяющиеся списки */
.dropdown{

    display:none;
    padding-top:5px;
    width:100%;
}
/* Каждый элемент в таких списках */
li.dropdown a{

    width: 130px;
    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-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
    text-align: center;
}

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

И потом добавил в конец шаблона sidebar_visitor_panel
перед

Код:

<xen:include template="ad_sidebar_below_visitor_panel" />

добавил

Код:

<xen:include template="menu_sidebar" />

И что не так я сделал?
--- добавлено : 21 июл 2013 в 00:56 ---
Реально нашел проблему!
не работает меню из за еще одного скрипта на странице
у меня установлен фид со скриптом который берет данные с другого сайта

Код:

<script type="text/javascript">
(function() {
    var fn = document.createElement('script'); fn.type = 'text/javascript';
    fn.src = 'http://feederninja.com/api/feed/8244f3d2ce814ade92539ddea436fed1?fnurl=' + window.location.href;
    var s = document.getElementsByTagName('head')[0].appendChild(fn);
})();
</script>

Может кто вкурсе как их подружить на странице?

Witold · 21.07.2013

Решение нашлось
просто нужно в скрипте меню добавить условие
Код:
    $(document).ready(function(){
заменить на
Код:
jQuery.noConflict();
jQuery(document).ready(function($){
и на этом вопрос закрыт
результат тут

Войти или зарегистрироваться

Создание меню, пункты которого можно скрыть/раскрыть

KakBeOlolo Местный

Desperado Местный

KakBeOlolo Местный

KakBeOlolo Местный

Romchik® The Power of Dreams Команда форума

KakBeOlolo Местный

Yoskaldyr Пользователь

KakBeOlolo Местный

KakBeOlolo Местный

Linkkk Пользователь

KakBeOlolo Местный

Romchik® The Power of Dreams Команда форума

Witold Местный

KakBeOlolo Местный

Witold Местный

Witold Местный

Поделиться этой страницей

Войти или зарегистрироваться

Создание меню, пункты которого можно скрыть/раскрыть

KakBeOlolo Местный

Desperado Местный

KakBeOlolo Местный

KakBeOlolo Местный

Romchik® The Power of Dreams Команда форума

KakBeOlolo Местный

Yoskaldyr Пользователь

KakBeOlolo Местный

KakBeOlolo Местный

Linkkk Пользователь

KakBeOlolo Местный

Romchik® The Power of Dreams Команда форума

Witold Местный

KakBeOlolo Местный

Witold Местный

Witold Местный

Поделиться этой страницей

Быстрый поиск