null

Bootstrap 3 — Создание мобильного меню для WordPress

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

В коде который используется в данном примере, мной использовались стили и скрипты 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

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

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

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

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

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