когда нечего делать, а творческая душа требует реализации и хочется что-то сделать или написать, то я пишу сюда или делаю что-то на этом сайте. Кому интересна web-разработка, wordpress и то что рядом с этим, то заходите на мой сайт и читайте всякое...
Сейчас я делаю новую тему для своего интернет-магазина shop.tool-ha.ru, хочу чтобы там всё было круто woocommerce, bootstrap, полный адаптив. Для большего удобства навигации я хочу сделать боковое меню. А так как всё это на bootstrap то естественно встал вопрос о «как это сделать». Реализация на мой взгляд получилась отличной. Посмотрите!
Сперва мне нужен выпадающий блок. ссылка на реализацию блока в bootstrap. Там все просто. Скопировал — вставил. На стилях я тоже не хочу долго останавливаться по ряду причин. Ну во-первый это многие знаю, а во-вторых это не так уж сложно. Единственно я обращу внимание «самых маленьких» на пару вещей.
font-size: 1rem; — можете использовать px, rem, em. Всё что вам угодно
для класса .menu в своем проекте я использовал атрибут left:-15px; чтобы выравнивать полевому краю блока .container
.navbar-vertycal .dropdown-menu {position: absolute; top:0; left: 100%;} это для того чтобы меню раскрывалось с права.
Меню находиться в .col-lg-3 если нужно, чтобы меню было шире или уже измените размер колонки.
Это код вывода вертикального меню. Его нужно разместить внутри container>row>col-lg-3 (или например col-md-4)
<div class="menu collapse in" id="collapseExample" aria-expanded="true">
<nav class="navbar navbar-vertycal" role="navigation">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<?php wp_nav_menu(array(
'container_class' => 'navbar-vertycal',
'theme_location' => 'primary',
'items_wrap' => '<ul id="%1$s" class="nav navbar-nav">%3$s</ul>',
'walker' => new Bootstrap_Walker_Nav_Menu,
)); ?>
</div><!-- /.navbar-collapse -->
</nav>
</div>
Меню Bootstrap целиком
Вы так же можете вывести и всё меню bootstrap, горизонтально например, используя следующий код
// Вставляйте этот код
<nav id="nav" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header visible-xs">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Kawaii Walls</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<?php wp_nav_menu(array(
'container_class' => 'menu-header',
'theme_location' => 'primary',
'items_wrap' => '<ul id="%1$s" class="%2$s nav navbar-nav">%3$s</ul>',
'walker' => new Bootstrap_Walker_Nav_Menu,
)); ?>
</div><!-- /.navbar-collapse -->
</nav>
Обратите внимание что в случае с полным меню 'container_class' => 'menu-header', а в случае с вертикальным 'container_class' => 'navbar-vertycal'. Это основное отличие.
Поддержи Xakplant
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.