Author Topic: Showmenu 2 Bootstrap 3.3 menu code  (Read 904 times)

Offline nibz

  • Posts: 683
  • Gender: Male
Showmenu 2 Bootstrap 3.3 menu code
« 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>
« Last Edit: October 31, 2017, 08:04:41 PM by nibz »

Offline johnbroeckaert

  • Posts: 158
  • Gender: Male
Re: Showmenu 2 Bootstrap 3.3 menu code
« Reply #1 on: October 31, 2017, 08:00:32 PM »
 :-D
THANKS!
It is a happy talent to know how to play!

Offline nibz

  • Posts: 683
  • Gender: Male
Re: Showmenu 2 Bootstrap 3.3 menu code
« Reply #2 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

Offline rumen

  • Posts: 349
Re: Showmenu 2 Bootstrap 3.3 menu code
« Reply #3 on: November 04, 2017, 01:26:40 AM »
I use that code, but instead of this the menu appears like this. Couldn't find why.

Offline jacobi22

  • Posts: 5057
  • Gender: Male
  • Support only via PM or EMail
    • Jacobi22
Re: Showmenu 2 Bootstrap 3.3 menu code
« Reply #4 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}]">',
Etwas ist nur unmöglich, wenn man glaubt, dass es das ist!

Offline rumen

  • Posts: 349
Re: Showmenu 2 Bootstrap 3.3 menu code
« Reply #5 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.

Offline jacobi22

  • Posts: 5057
  • Gender: Male
  • Support only via PM or EMail
    • Jacobi22
Re: Showmenu 2 Bootstrap 3.3 menu code
« Reply #6 on: November 04, 2017, 09:48:07 AM »
it's simple, if your compare both menu's in the source code

the target: 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  ;-)
Etwas ist nur unmöglich, wenn man glaubt, dass es das ist!

Offline rumen

  • Posts: 349
Re: Showmenu 2 Bootstrap 3.3 menu code
« Reply #7 on: November 04, 2017, 12:26:05 PM »
Thanks buddy! With this code really wors fine. Thank you onse again!

Offline macsmet

  • Posts: 255
Re: Showmenu 2 Bootstrap 3.3 menu code
« Reply #8 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

Offline dbs

  • Betatester
  • **
  • Posts: 7490
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Showmenu 2 Bootstrap 3.3 menu code
« Reply #9 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]" ...

Offline macsmet

  • Posts: 255
Re: Showmenu 2 Bootstrap 3.3 menu code
« Reply #10 on: March 28, 2018, 08:48:53 AM »
Thanks!