Свое выпадающее меню в теме Speed на разделы блога?


Здравствуйте!
Нужно сделать выпадающее меню, ведущее на различные блоги в теме speed.
Аналог - https://gidronom.ru/
Подскажите как это реализовать? Можно без автоматизации, готовы править меню самостоятельно.

1 ответ
  • Сергеев Владимир
    Разработчик
    Решение
    28 декабря 2021 13:57

    Здравствуйте, Руслан! 

    Для начала вам нужно создать блок с меню.
    Идите в приложение Сайт –> блоки и создайте там новый блок, например speed.dop_menu
    В этот блок добавьте код: 

    <li class="not-active uk-visible@m{if $wa->currentUrl() == '/главная ссылка/'} uk-active{/if}">
        
        <a href="/главная ссылка/" aria-expanded="false" class="">
            Главный пункт
            <i class="nav-icon pl-5 flip-v">
                <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="chevron-down"><polyline fill="none" stroke="currentColor" stroke-width="1.03" points="16 7 10 13 4 7"></polyline>
                </svg>
            </i>
        </a>
        
        <div class="uk-dropdown" data-uk-dropdown="offset:3;">
            <ul class="uk-nav uk-navbar-dropdown-nav">
                
                <li class="{if $wa->currentUrl() == '/ссылка1/'} uk-active{/if}">
                    <a href="/ссылка1/">
                        Первый подпункт
                    </a>
                </li>
                
                <li class="{if $wa->currentUrl() == '/ссылка2/'} uk-active{/if}">
                    <a href="/ссылка2/">
                        Второй подпункт
                    </a>
                </li>
                
            </ul>
        </div>
    
    </li>


    Вам останется только ссылки поменять. 
    Затем этот блок нужно добавить в панель.

    Затем идёте в настройки темы и в настройку очерёдности блоков в панели (Секция настроек "Верхняя панель") добавляете название этого блока:

    Блок появится в панели. 
    Если этого не произойдёт, то нужно убрать часть блоков из очерёдности, либо снять лимит на отображение. 
    В текущей версии лимит стоит. В будущей версии я добавил второй ряд меню. Но версия выйдет в январе. 

    Если вам нужно отображать это меню ещё и в выезжающей панели на мобильных, то нужно добавить аналогичный блок, только код будет немножко другим.

    <ul class="uk-nav uk-nav-default uk-nav-parent-icon" data-uk-nav="multiple:true">
        <li class="uk-parent">
            <a href="/главная ссылка/" class="uk-position-relative">Главный пункт</a>
            <ul class="uk-nav-sub">
                <li class="not-active">
                    <a href="/главная ссылка/" class="js-only">Смотреть текущую</a>
                    <ul class="uk-nav-sub uk-nav-sub-p-0">
                        
                        <li>
                            <a href="/ссылка1/" class="uk-position-relative">
                                <i class="uk-position-center-left-out mr-5 param-icon"></i>
                                Пункт 1
                            </a>
                        </li>
                        
                        <li>
                            <a href="/ссылка2/" class="uk-position-relative">
                                <i class="uk-position-center-left-out mr-5 param-icon"></i>
                                Пункт 2
                            </a>
                        </li>
                        
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    

    И точно так же его нужно добавить в настройку очерёдности. Только уже для выезжающего сайдбара. 

Добавить ответ
Чтобы добавить комментарий, зарегистрируйтесь или войдите
Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
Подписывайтесь и получайте скидки!

Узнавайте первым о скидках и специальных предложениях!