«
»

Как организовать скрытие меню в бутерброд? На этот вопрос далеко не все веб мастера могут найти внятный вопрос, в данной записи я попытаюсь ответить на него приведя пример кода.

В коде который используется в данном примере, мной использовались стили и скрипты Bootstrap, которые можно взять из CDN по ссылкам ниже.

CDN Bootstrap LINK:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

На всякий случай прикрепляю ссылку и на CDN Bootstrap :

https://www.bootstrapcdn.com/

Пример рабочего бутерброда:

https://bootsnipp.com/snippets/QodP1

Для того что бы меню скрылось на мобильных устройствах, и отображалось в вертикальной последовательности после щелчка по “бутерброду” () Вам необходимо поместить код меню темы между тегами:

<!-------------ЗДЕСЬ ЛЮБОЙ КОД МЕНЮ------------> <!----------КОНЕЦ ЛЮБОГО КОДА МЕНЮ--------------->

Как это сделать более подробнее приведено в примере кода.

Код обвертки меню:

<ul class="top-header-bar"> <!--MENU--> <script> (function($){ $('#dropdown').hover(function() { $(this).AddClass('open'); }) $(document).ready(function(){ $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { event.preventDefault(); event.stopPropagation(); $(this).parent().siblings().removeClass('open'); $(this).parent().toggleClass('open'); }); }); })(jQuery); </script> <div class="container"> <!--BOOTSRAP--> <nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation"> <div class="navbar-header"> <button ENGINE="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse-1"> <ul class="nav navbar-nav"> <!--BOOTSRAP--> <!-- Finish navbar-header --> <!-------------ЗДЕСЬ ЛЮБОЙ КОД МЕНЮ------------> <div class="row"> <?php wp_nav_menu( array( 'menu' => 'primary_top', 'theme_location' => 'primary_top', 'depth' => 10, 'container' => '', 'menu_id' =>'desktop-menu_top', 'menu_class' => 'primary_top', 'fallback_cb' => 'Tyche_Navwalker::fallback','walker' => new Tyche_Navwalker(), ) ); ?> </div> <!----------КОНЕЦ ЛЮБОГО КОДА МЕНЮ---------------> <!--BOOTSRAP--> </ul> </div><!-- /.navbar-collapse --> </nav> <!--BOOTSRAP--> </div> <!-- #site-navigation --> </ul>

Источник записи: https://mediadoma.com

Связанные записи
WordPressПлагины

Как принимать пожертвования? 4 лучших плагина для пожертвований на сайте WordPress.

WEB

Beaker Browser - Одноранговый браузер для веб-хакеров и разработчиков.

WordPressПлагиныПолезные сайты

Бесплатные и платные решения для клонирования (дублирования) WordPress сайта

WordPressПлагины

Как получить больше подписчиков электронной почты на вашем сайте WordPress