WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: nibz on October 31, 2017, 07:54:53 PM

Title: Showmenu 2 Bootstrap 3.3 menu code
Post by: nibz on October 31, 2017, 07:54:53 PM

The working code for a default bootstrap 3.3 navbar, so you don't have to reinvent the wheel.

When you use the menu on root.

Code: [Select]

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php 
$open = '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">
[if(class==menu-expand){<a href="[url]" class="dropdown-toggle" data-toggle="dropdown">[menu_title]<b class="caret"></b></a>}
else {<a href="[url]">[menu_title]</a>}]';
show_menu2(
$aMenu          = 1,
$aStart         = SM2_ROOT, 
$aMaxLevel      = SM2_CURR+1,
$aOptions       = SM2_ALL,
$aItemOpen      = $open,
$aItemClose     = '</li>',
$aMenuOpen      = '<ul class="[if(level==0){nav navbar-nav} else {dropdown-menu}]">',
$aMenuClose     = '</ul>',
$aTopItemOpen   = false,
$aTopMenuOpen   = false
);?>
    </div>
</div>
</nav>


Title: Re: Showmenu 2 Bootstrap 3.3 menu code
Post by: johnbroeckaert on October 31, 2017, 08:00:32 PM

 :-D
THANKS!

Title: Re: Showmenu 2 Bootstrap 3.3 menu code
Post by: nibz on October 31, 2017, 08:05:25 PM

@johnbroeckaert no thanks :).
Changed a little thing so if you copied the code please replace it by the new one

Title: Re: Showmenu 2 Bootstrap 3.3 menu code
Post by: rumen on November 04, 2017, 01:26:40 AM

I use that code, but instead of this (http://lystoto.com/templates/shop/index.html) the menu appears like this (http://lystoto.com/). Couldn't find why.

Title: Re: Showmenu 2 Bootstrap 3.3 menu code
Post by: Gast on November 04, 2017, 01:45:03 AM

please add somewhere in a HTML-area of your template / index.php this code here to show the actual level of this page - best position: somewhere in the top or in the footer of your page

Code

Code: [Select]

<?php
echo "Level: ".LEVEL;
?>
i'm sure, it's only a question of the level
(was this not a multi-lingual page before??)

important is this line in the code from nibz and specially the red marked part. if you're not in the root of your page tree (in level = 0), play with this, use level = 1 or what ever you have there. This Level switch is the different between your two links

Quote

$aMenuOpen      = '<ul class="[if(level==0){nav navbar-nav} else {dropdown-menu}]">',

Title: Re: Showmenu 2 Bootstrap 3.3 menu code
Post by: rumen on November 04, 2017, 01:51:51 AM

It is below the footer, it shows Level=0 and there is no any chage in the menu. Never mind. It works, that's most important.

Title: Re: Showmenu 2 Bootstrap 3.3 menu code
Post by: Gast on November 04, 2017, 09:48:07 AM

it's simple, if your compare both menu's in the source code

the target (http://lystoto.com/templates/shop/index.html): ul class="sub-menu"  ++ a-href use # instead of the url

i try to explain and hope you can understand this

Quote

$open = '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">
         [if(class==menu-expand){<a href="[url]" class="dropdown-toggle" data-toggle="dropdown">[menu_title]<b class="caret"></b></a>}
         else {<a href="[url]">[menu_title]</a>}]';

blue = the condition - if class == menu-expand - means: if there are child's at this menu point

red: the reaction, if this condition is true - <a href="[url]" class="dropdown-toggle" data-toggle="dropdown">

you need here a simple <a href="#"> instead of the red line like

Code: [Select]

$open = '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">
         [if(class==menu-expand){<a href="#">[menu_title]<b class="caret"></b></a>}
         else {<a href="[url]">[menu_title]</a>}]';

next point

Quote

$aMenuOpen      = '<ul class="[if(level==0){nav navbar-nav} else {dropdown-menu}]">',

red: the condition  - if level == 0 - means: if you're in the root of your page tree

red: answer, if the condition is true (level 0 only)

green: answer, if condition is false (level 1 and higher)

what you need, is a different class (sub-menu) instead of dropdown-menu.
Solution:

Code: [Select]

$aMenuOpen      = '<ul class="[if(level==0){nav navbar-nav} else {sub-menu}]">',
Result: works for me  ;-)

Title: Re: Showmenu 2 Bootstrap 3.3 menu code
Post by: rumen on November 04, 2017, 12:26:05 PM

Thanks buddy! With this code really wors fine. Thank you onse again!

Title: Re: Showmenu 2 Bootstrap 3.3 menu code
Post by: macsmet on March 27, 2018, 08:25:44 PM

Hi there,

Is it correct that a bootstrap menu (like mentioned here) doesn't open a URL to a new page?
Even when you set in in WB to open the link with _blank?

Greetings,

William

Title: Re: Showmenu 2 Bootstrap 3.3 menu code
Post by: dbs on March 27, 2018, 10:50:34 PM

Hi, if you need target you have to add it like so

Code: [Select]

<a href="[url]" target="[target]" ...

Title: Re: Showmenu 2 Bootstrap 3.3 menu code
Post by: macsmet on March 28, 2018, 08:48:53 AM

Thanks!