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

1.5.x Меню с подпунктами

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

Загрузка
  1. Aksim

    Aksim Местный

    Регистрация:
    15.09.12
    Сообщения:
    312
    Симпатии:
    89
    Вот уже несколько дней ломаю себе голову над тем как реализовать в боковой панели форума блок вертикального меню с раскрывающимися подпунктами. Подобные меню реализованы на огромном количестве сайтов и весьма удобны пользователям. Вот на всякий случай пример такого меню, что бы внести полную ясность того, что хочется получить.
    Untitled-1.jpg Untitled-2.jpg
    Я на своем форуме использую портал xenporta, и по этому я решил реализовать меню по средствам виджета портала Raw HTML. Размещаю сам виджет в макете в нужное место, в самом виджете вставляю стандартный код подобных меню, что то типа такого
    HTML:
    <div class="menu">
     <ul>
        <li><span class="sublink">Раздел 1</span></li>
          <li class="submenu">
            <ul>
                <li><a href="http://sait.ru">Подраздел 1</a></li>
                <li><a href="http://sait.ru">Подраздел 2</a></li>
                <li><a href="http://sait.ru">Подраздел 3</a></li>
            </ul>
          </li>
        <li><a href="#">Раздел 2</a></li>
        <li class="submenu">
            <ul>
                <li><a href="http://sait.ru">Подраздел 1</a></li>
                <li><a href="http://sait.ru">Подраздел 2</a></li>
                <li><a href="http://sait.ru">Подраздел 3</a></li>
            </ul>
          </li>
    </div>
    В результате на главной странице получается блок, который унаследует все стили и оформления и внешне ни чем не отличается от других блоков. Но вот само меню в блоке выглядит просто ужасно.
    Untitled-3.jpg
    В общем все меню просто отображается сразу же в раскрытом виде в столбик и как то его привести к желаемому результату у меня ни как не получается.

    Возможно кто то уже делал у себя на форуме подобное меню и может подсказать как его реализовать, пускай даже не с помощью виджета xenportа, созданием нового шаблона, или как то еще. Буду премного благодарен за любые подсказки.
     
  2. Shimikami

    Shimikami Местный

    Регистрация:
    23.02.17
    Сообщения:
    246
    Симпатии:
    112
    Ну так создайте сайдбар.
    Через модификацию шаблона sidebar_online_users.
    Находим строку
    <!-- end block: sidebar_online_users -->
    Через модификацию шаблонов добавляем следующее:
    Код:
    <xen:require css="block_links.css" />
    <div class="section">
       <div class="secondaryContent">
           <h3>Блок меню</h3>
         <xen:include template="block_links" />
       </div>
    </div>
    Создаём шаблон block_links, со следующим содержимым:
    Код:
    <div class="menu">
     <ul>
       <li><span class="sublink">Раздел 1</span></li>
         <li class="submenu">
           <ul>
               <li><a href="http://sait.ru">Подраздел 1</a></li>
               <li><a href="http://sait.ru">Подраздел 2</a></li>
               <li><a href="http://sait.ru">Подраздел 3</a></li>
           </ul>
         </li>
       <li><a href="#">Раздел 2</a></li>
       <li class="submenu">
           <ul>
               <li><a href="http://sait.ru">Подраздел 1</a></li>
               <li><a href="http://sait.ru">Подраздел 2</a></li>
               <li><a href="http://sait.ru">Подраздел 3</a></li>
           </ul>
         </li>
    </div>
    
    Ну и создаём шаблон block_links.css, с содержимым.
    Вот так и получится.
    Пример:
    [​IMG]
     
  3. Aksim

    Aksim Местный

    Регистрация:
    15.09.12
    Сообщения:
    312
    Симпатии:
    89
    Пробовал подобным способом, у меня почему то получалось то же самое, все пункты меню просто отображались один под другим и ни какого развертывания списка.
    Так же не очень хочеться это реализовывать через создания нового шаблона и его инклуд на форуме. Список меню гораздо нужнее на главной странице, то есть на портале, чем на самом форуме. По этому хотелось бы все таки реализовать его через виджет портала.
     
  4. temza

    temza Местный

    Регистрация:
    02.02.17
    Сообщения:
    161
    Симпатии:
    25
    Версия XF:
    1.5.11
    Очень нужная штука ! Попробую тоже сделать.
    Не подскажете, как в портал выводить не последние темы, а наиболее активные?
     
  5. Aksim

    Aksim Местный

    Регистрация:
    15.09.12
    Сообщения:
    312
    Симпатии:
    89
    виджет Recent Threads выводит темы в которых есть новые сообщения
    --- добавлено : Aug 26, 2017 8:50 PM ---
    пример вашего css увидеть можно? Возможно именно в css и найдется решение вопроса.
     
    Последнее редактирование модератором: 03.09.2017
  6. Shimikami

    Shimikami Местный

    Регистрация:
    23.02.17
    Сообщения:
    246
    Симпатии:
    112
    У меня сверху опечатка, не могу отредактировать.
    Подключить CSS нужно в шаблоне block_links, а не там где создаём сайдбар.
    Пример CSS:
    Код:
    #nav{
        float:left;
        width:100%;
        list-style:none;
        font-weight:bold;
        margin-bottom:10px;
    }
    #nav li{
        margin-right:10px;
        position:relative;
        display:block;
        text-align: center;
    }
    #nav li a{
        display:block;
        padding:5px;
        color:#fff;
        background:#333;
        text-decoration:none;
       
        text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        border-radius:2px;
    }
    #nav li a:hover{
        color:#fff;
        background:#6b0c36;
        background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
        text-decoration:underline;
    }
    
    /*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
    #nav ul{
        list-style:none;
        position:absolute;
        left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
        opacity:0; /* Устанавливаем начальное состояние прозрачности */
        -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
    }
    #nav ul li{
        padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
        float:none;
        background:url(dot.gif);
    }
    #nav ul a{
        white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
        display:block;
    }
    #nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
        left:0; /* Приносим его обратно на экран, когда нужно */
        opacity:1; /* Делаем непрозрачным */
    }
    #nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
        background:#6b0c36;
        background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
        text-decoration:underline;
    }
    #nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
        text-decoration:none;
        -webkit-transition:-webkit-transform 0.075s linear;
    }
    #nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
        background:#333;
        background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
        text-decoration:underline;
        -moz-transform:scale(1.05);
        -webkit-transform:scale(1.05);
    }
    XenForo - DEFAULT стиль выберите, там будет.
     
  7. Aksim

    Aksim Местный

    Регистрация:
    15.09.12
    Сообщения:
    312
    Симпатии:
    89
    Ого, интересненький css. Цены бы всему этому не было, если бы работало через виджет на портале. Все таки сайд бар форума для меня не вариант, поскольку меню на самом форуме теряет смысл, а вот на главной, то есть на портале, оно былоб на вес золота.
     
  8. Aksim

    Aksim Местный

    Регистрация:
    15.09.12
    Сообщения:
    312
    Симпатии:
    89
    Ни чего не могу понять, но результат ровно тот же.
     
  9. temza

    temza Местный

    Регистрация:
    02.02.17
    Сообщения:
    161
    Симпатии:
    25
    Версия XF:
    1.5.11
    Не то.
    Но не буду тут флудить.
     

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