1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

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

Тема в разделе "Модификации шаблонов", создана пользователем KakBeOlolo, 6 ноя 2011.

Загрузка
  1. KakBeOlolo

    KakBeOlolo Местный

    Регистрация:
    08.10.11
    Сообщения:
    511
    Симпатии:
    91
    Версия XF:
    1.1.2
    Обновлено 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/
    М.б кому-то пригодится :)
     
    Mirovinger и maxon нравится это.
  2. Desperado

    Desperado Местный

    Регистрация:
    23.10.10
    Сообщения:
    270
    Симпатии:
    98
    Версия XF:
    1.1.3
    это такой тонкий пиар?) :cautious:
     
    Nonesa нравится это.
  3. KakBeOlolo

    KakBeOlolo Местный

    Регистрация:
    08.10.11
    Сообщения:
    511
    Симпатии:
    91
    Версия XF:
    1.1.2
    Да нет, просто показать как выглядит :rolleyes:
     
  4. KakBeOlolo

    KakBeOlolo Местный

    Регистрация:
    08.10.11
    Сообщения:
    511
    Симпатии:
    91
    Версия XF:
    1.1.2
    Обнаружил проблемку, если это меню вставлять на форум, то при нажатии на аватарку зависает страница и никуда не получается нажать, проходит после обновления страницы.
    Помогите решить плз.

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

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

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    Мде... У XF есть ведь свой jQuery, грузится уже в HEAD. Зачем у вас еще идет подгрузка (примем многократно повторяющаяся) последней версии jQuery? Странно, что форум еще работает боле-менее...
     
    KakBeOlolo нравится это.
  6. KakBeOlolo

    KakBeOlolo Местный

    Регистрация:
    08.10.11
    Сообщения:
    511
    Симпатии:
    91
    Версия XF:
    1.1.2
    :D

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

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

    Регистрация:
    27.09.10
    Сообщения:
    1.921
    Симпатии:
    1.160
    Версия XF:
    1.0.4
    получается что работают 2 jquery одновременно и разных версий. Форум не грузит, только вот на стороне клиента полный бардак - только удивительно что так мало поломалось из ajax-а в ксене.
     
    KakBeOlolo нравится это.
  8. KakBeOlolo

    KakBeOlolo Местный

    Регистрация:
    08.10.11
    Сообщения:
    511
    Симпатии:
    91
    Версия XF:
    1.1.2
    Второй jquery и был причиной того, что всплывающее окно с профилем зависало. :thumbsup:
     
  9. KakBeOlolo

    KakBeOlolo Местный

    Регистрация:
    08.10.11
    Сообщения:
    511
    Симпатии:
    91
    Версия XF:
    1.1.2
    Модераторы удалите плз в первом посте это:

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

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

    Регистрация:
    15.03.12
    Сообщения:
    14
    Симпатии:
    0
    Версия XF:
    1.1.2
    что за сайт у тебя?
     
  11. KakBeOlolo

    KakBeOlolo Местный

    Регистрация:
    08.10.11
    Сообщения:
    511
    Симпатии:
    91
    Версия XF:
    1.1.2
    Вот по человечески сделанная навигация на чистом 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>
     
    Mefodian, Mirovinger и Romchik® нравится это.
  12. Romchik®

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

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    HTML только все равно невалидный. Я в первом сообщении добавил недостающие теги. Но не уверен, верно так или там один список лишний.
     
  13. Witold

    Witold Местный

    Регистрация:
    19.01.12
    Сообщения:
    132
    Симпатии:
    23
    Версия XF:
    1.2.2
    Ребята! на 1.1.3 работает но поставил на 1.1.5 не раскрывается
    может кто знает в чем проблема
    http://ga1axy.ru/
     
  14. KakBeOlolo

    KakBeOlolo Местный

    Регистрация:
    08.10.11
    Сообщения:
    511
    Симпатии:
    91
    Версия XF:
    1.1.2
    Он работает на любых версиях, ты скорей всего неправильно вставил код
     
  15. Witold

    Witold Местный

    Регистрация:
    19.01.12
    Сообщения:
    132
    Симпатии:
    23
    Версия XF:
    1.2.2
    Делал я так.

    Создал шаблон 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>
    Может кто вкурсе как их подружить на странице?
     
  16. Witold

    Witold Местный

    Регистрация:
    19.01.12
    Сообщения:
    132
    Симпатии:
    23
    Версия XF:
    1.2.2
    Решение нашлось
    просто нужно в скрипте меню добавить условие
    Код:
        $(document).ready(function(){
    заменить на
    Код:
    jQuery.noConflict();
    jQuery(document).ready(function($){
    и на этом вопрос закрыт
    результат тут
     
    Mirovinger нравится это.

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