Author Topic: ShowMenu2: Bootstrap Navigation  (Read 21970 times)

Offline neu1886

  • Posts: 10
ShowMenu2: Bootstrap Navigation
« on: September 03, 2013, 05:04:08 AM »
Hello everyone,

ich was searching hours, but i do not found a solution. Is their a way, to get  working ShowMenu2-Output for the Bootstrap Standard Navbar?

That's the Navbar-Source:
Code: [Select]
<ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>

I know, the Submenu...will be hard...

Hope you can help me,

best regards

mr-fan

  • Guest
Re: ShowMenu2: Bootstrap Navigation
« Reply #1 on: September 03, 2013, 06:35:20 AM »
the submenu is absolute not the hard one...

look at the section "HTML Output" here:

http://code.jellycan.com/files/show_menu2-README.txt

and you need a if statement if there

the hard one is the Question how to get the CSS classes work

a) overwrite the classnames in the Framework (i've done this some times ago for the zurb/foundation Framework)
b) addClass() of the Framework via jQuery (for a dropdown JS must be enabled, too so no problem if you have a non JS fallback)

example:
Code: [Select]
/* correct menu handling top dropdownmenu */
$("li.menu-current").removeClass("current").addClass("active");

for the nesting ul's you have a look at the CONDITIONAL FORMATTING section on the linked page above.

regards mr-fan

Offline nibz

  • Posts: 684
  • Gender: Male
Re: ShowMenu2: Bootstrap Navigation
« Reply #2 on: September 03, 2013, 07:50:31 AM »
I got this so far:
Code: (only hover for sub items doesnt work yet) [Select]
<div class="navbar"><div class="navbar-inner">
<?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} else {dropdown-menu}]">',
$aMenuClose     '</ul>',
$aTopItemOpen   false,
$aTopMenuOpen   false
);?>

</div></div>

Did not yet test it for bootstrap 3.0. Will do so this afternoon!
« Last Edit: September 06, 2013, 11:05:36 AM by nibz »

Offline nibz

  • Posts: 684
  • Gender: Male
Re: ShowMenu2: Bootstrap Navigation
« Reply #3 on: September 03, 2013, 05:30:02 PM »
Didn't test, but seeing the markup you wan't it should work. (please test, and let me know!)

Offline neu1886

  • Posts: 10
Re: ShowMenu2: Bootstrap Navigation
« Reply #4 on: September 03, 2013, 07:11:05 PM »
Thanks both of you.

@nibz: Yes it works, but, if i select a submenuitem, the level over...means the main item from the mainmenu isn't selected...do you understand?

Greetings

Offline neu1886

  • Posts: 10
Re: ShowMenu2: Bootstrap Navigation
« Reply #5 on: September 05, 2013, 08:31:15 PM »
*P U S H* ;)

Offline nibz

  • Posts: 684
  • Gender: Male
Re: ShowMenu2: Bootstrap Navigation
« Reply #6 on: September 05, 2013, 11:54:49 PM »
I am very sorry i didn't respond.
Had a very busy week. Will have a day off tomorrow and then i will take a look. ;-).

Gr. Robin

mr-fan

  • Guest
Re: ShowMenu2: Bootstrap Navigation
« Reply #7 on: September 06, 2013, 10:34:03 AM »
Push your self too.... :evil:

there is a tool like http://bootstrap3.kissr.com/

there you put the HTML outpu of the SM2 Snippet from nibz......and get the 3.0 HTML Output should look alike....

so far you see how the HTML of the SM2 call is set and you could try change it to your needs...

if someone work with a CSS Framwork he should be able to do that?

but it's always easier to wait other do this work completly

regards mr-fan

Offline nibz

  • Posts: 684
  • Gender: Male
Re: ShowMenu2: Bootstrap Navigation
« Reply #8 on: September 06, 2013, 11:07:20 AM »
I updated the code above (the one for 2.3.2)

And here is an example for  3,0
Code: [Select]
<nav class="navbar navbar-default" role="navigation">
<?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
);
?>

</nav>

Offline nibz

  • Posts: 684
  • Gender: Male
Re: ShowMenu2: Bootstrap Navigation
« Reply #9 on: September 06, 2013, 11:20:35 AM »
Push your self too.... :evil:

Hi mr-fan,
It wasn't just the problem of the upgrade to a newer version of bootstrap.
I was missing a short little code to also set the menu parent li item to active (i allready knew that i was missing that!, but didn't take the time then to look how i can put it in), everything works now.

And i also don't know if neu1886 uses bootstrap3, because the code i sent first is for 2.3.2.
But since i had the time i converted a version for 3.0.

Thanks for the comment though!, i also think that if you work with these frameworks you need to know some things of the framework before you work with it.

Greets Nibz.

mr-fan

  • Guest
Re: ShowMenu2: Bootstrap Navigation
« Reply #10 on: September 06, 2013, 12:04:40 PM »
may i write it too hard....but this are basic things.

i always get a little bit worried about "question-only-threats" without an effort for a solution and only the question for a ready-to-use solution asap.....so don't get me wrong ;)

and a "push" of a topic without the sign of own affords to get it solved is not the good practise in a OS forum....
so someone could say i've tested this and tried that and it won't work..."PUSH"

that yould we better instead of that post below...

I think if someone get in trouble with the SM2 together with a CSS Framwork he should think about go ahead?
CSS Framworks for "really" good looking layouts/templates are not easy to handle in a PHP Template...;)

regards mr-fan

Offline nibz

  • Posts: 684
  • Gender: Male
Re: ShowMenu2: Bootstrap Navigation
« Reply #11 on: September 06, 2013, 01:10:49 PM »
@mr-fan

I completely get where you're coming from.
And in global you are right, but to not get any further offtopic please on-topic from now ;)

Offline neu1886

  • Posts: 10
Re: ShowMenu2: Bootstrap Navigation
« Reply #12 on: September 06, 2013, 09:59:22 PM »
Hello,

I thank all who have commented on the post. I did not want anyone to get too close. I actually know the rules of conduct in such a forum. Beg your pardon.

I test the code once.

Offline nibz

  • Posts: 684
  • Gender: Male
Re: ShowMenu2: Bootstrap Navigation
« Reply #13 on: September 06, 2013, 10:14:32 PM »
I bet you are using google translate?, (lol).
But you didn't offend me, but mr-fan is right in general that people take it to light, we are working for free, free cms, free forum. So in general people who ask questions should take more efford in trying to have a good nettiquete.

I hope the code posted works,
Please let me know if it works for you. Or if it doesn't work. Than we can take a look what's wrong.

Offline noname8

  • Posts: 151
Re: ShowMenu2: Bootstrap Navigation
« Reply #14 on: November 28, 2013, 01:29:15 PM »
Thank you, seems to work with bs 3. However ie has problems with dropdown visibility if not latest or almost latest version.

Code: [Select]
<div class="navbar" role="navigation">
    <div class="container">
    <div class="navbar-inner">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <div class="navbar-collapse collapse navbar-collapse">
    <?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+1
        
$aMaxLevel      SM2_CURR+1,
        
$aOptions       SM2_ALL,
        
$aItemOpen      $open,
        
$aItemClose     '</li>',
        
$aMenuOpen      '<ul class="[if(level==1){nav navbar-nav} else {dropdown-menu}]">',
        
$aMenuClose     '</ul>',
        
$aTopItemOpen   false,
        
$aTopMenuOpen   false
    
);?>

</div>
</div>
</div>
</div>

This one has the lang in the menu level 0 so the main nav is level 1.

Offline casi

  • Posts: 106
Re: ShowMenu2: Bootstrap Navigation
« Reply #15 on: March 20, 2015, 07:54:23 AM »
Hi. I am using this menu for my template. works fine, but when I add another menu block the functionality seems not to work anymore.

$menu[1]='Main';
$menu[2]='Top';

The 'Main' menu with the ID 1 works fine, but as soon I use the 'Top' menu with the ID 2, this 'Top' menu is empty, not displayed anymore. Can you help on this?

Code: [Select]
<?php
// Top Navigation
ob_start(); 
$topnav str_replace('menu-current','active',$topnav);
show_menu2(
$aMenu          2,
$aStart         SM2_ROOT+1
$aMaxLevel      SM2_START,
$aOptions       SM2_PRETTY,
$aItemOpen      '<li>[ac][menu_title]</a>',
$aItemClose     '</li>',
$aMenuOpen      '<ul>',
$aMenuClose     '</ul>',
$aTopItemOpen   false,
$aTopMenuOpen   false
);
$topnav ob_get_contents();
ob_end_clean();
// end Top Navigation


// Main Navigation
ob_start(); 
$mainnav str_replace('menu-current','active',$mainnav);
show_menu2(
$aMenu          1,
$aStart         SM2_ROOT+1
$aMaxLevel      SM2_CURR+1,
$aOptions       SM2_ALL,
$aItemOpen      '<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>}]',
$aItemClose     '</li>',
$aMenuOpen      '<ul class="[if(level==1){nav navbar-nav} else {dropdown-menu}]">',
$aMenuClose     '</ul>',
$aTopItemOpen   false,
$aTopMenuOpen   false
);
$mainnav ob_get_contents();
ob_end_clean();
// end Main Navigation
?>

Thanks Casi

Offline DarkViper

  • Forum administrator
  • *****
  • Posts: 3062
  • Gender: Female
Re: ShowMenu2: Bootstrap Navigation
« Reply #16 on: March 22, 2015, 09:03:21 AM »
Hi. I am using this menu for my template. works fine, but when I add another menu block the functionality seems not to work anymore.

$menu[1]='Main';
$menu[2]='Top';

The 'Main' menu with the ID 1 works fine, but as soon I use the 'Top' menu with the ID 2, this 'Top' menu is empty, not displayed anymore. Can you help on this?

Code: [Select]
<?php
// Top Navigation
ob_start(); 
$topnav str_replace('menu-current','active',$topnav);
show_menu2(
$aMenu          2,
...
);
$topnav ob_get_contents();
ob_end_clean();
this can not work, because you try to replace the class names before the menu is calculated.

A more simple solution without str_replace():
Code: [Select]
<?php
// Top Navigation
$topnav show_menu2(
    
$aMenu          2,
    
$aStart         SM2_ROOT+1
    
$aMaxLevel      SM2_START,
    
$aOptions       SM2_PRETTY|SM2_BUFFER,
    
$aItemOpen      '<li class="[class][if(class=menu-current||class=menu-parent){ active}]">[ac][menu_title]</a>',
    
$aItemClose     '</li>',
    
$aMenuOpen      '<ul>',
    
$aMenuClose     '</ul>',
    
$aTopItemOpen   false,
    
$aTopMenuOpen   false
);
// end Top Navigation

// Main Navigation
$mainnav show_menu2(
$aMenu          1,
$aStart         SM2_ROOT+1
$aMaxLevel      SM2_CURR+1,
$aOptions       SM2_ALL|SM2_BUFFER,
$aItemOpen      '<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>}]',
$aItemClose     '</li>',
$aMenuOpen      '<ul class="[if(level==1){nav navbar-nav} else {dropdown-menu}]">',
$aMenuClose     '</ul>',
$aTopItemOpen   false,
$aTopMenuOpen   false
);
// end Main Navigation

have a nice day
Manuela
« Last Edit: March 22, 2015, 09:19:36 AM by DarkViper »
Der blaue Planet - er ist nicht unser Eigentum - wir haben ihn nur von unseren Nachkommen geliehen

"You have to take the men as they are… but you can not leave them like that !" :-P
Das tägliche Stoßgebet: Oh Herr, wirf Hirn vom Himmel !

Offline macsmet

  • Posts: 255
Re: ShowMenu2: Bootstrap Navigation
« Reply #17 on: April 13, 2015, 09:24:58 PM »
Hi,

Just playing with Bootstrap and using this menu code to get the Bootstrap menu working.
How can I limit WB showing the third level in the Bootstrap menu?
It doesn't actually work but it show there are more pages (class="caret" shows up) and it makes the second level not responding anymore.




Offline nibz

  • Posts: 684
  • Gender: Male
Re: ShowMenu2: Bootstrap Navigation
« Reply #18 on: April 14, 2015, 11:28:47 PM »
Hi there Macsmet,

I missed your question (forum is a little busy  :-))

But to answer it:

You could add another conditional statement to check if the menu level is less then 1 then the next level will not show.

Here my updated code:
Code: [Select]
<nav class="navbar navbar-default" role="navigation">
<?php 
$open '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">
[if(class==menu-expand&&level<1){<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
);
?>

</nav>

Notice the if(class==menu-expand&&level<1) this checks if the level is not more than 1 and will not place the caret on the first level items, only on the root level.

Hope this answers your question,

Please let me know if it does or doesn't

Offline macsmet

  • Posts: 255
Re: ShowMenu2: Bootstrap Navigation
« Reply #19 on: April 15, 2015, 09:06:36 AM »
Hi Nibz,

Your addition to the code works fine.
Thanks.

greetings,

MacSmet

Offline zirzy

  • Posts: 178
Re: ShowMenu2: Bootstrap Navigation
« Reply #20 on: December 18, 2015, 01:31:45 PM »
I updated the code above (the one for 2.3.2)

And here is an example for  3,0
Code: [Select]
<nav class="navbar navbar-default" role="navigation">
<?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
);
?>

</nav>

Why 4th level is not showing on dropdown? 3th level links with carret is not active at all  :|


-zirzy

Offline Gast

  • Posts: 5920
Re: ShowMenu2: Bootstrap Navigation
« Reply #21 on: December 18, 2015, 02:29:17 PM »
Quote
Why 4th level is not showing on dropdown? 3th level links with carret is not active at all

please check at first your wb-setting -> advanced setting
look there to LIMIT of Levels or something like this, set it up to max = 10

Offline zirzy

  • Posts: 178
Re: ShowMenu2: Bootstrap Navigation
« Reply #22 on: December 18, 2015, 04:22:08 PM »
Quote
Why 4th level is not showing on dropdown? 3th level links with carret is not active at all

please check at first your wb-setting -> advanced setting
look there to LIMIT of Levels or something like this, set it up to max = 10

I got 6 and still dont work..

Offline nibz

  • Posts: 684
  • Gender: Male
Re: ShowMenu2: Bootstrap Navigation
« Reply #23 on: December 18, 2015, 05:00:00 PM »
i have limited the numer of levels, see $aMaxLevels.

I did this because:
Hi dbs.

I'm sorry to say but bootstrap themselve took out the 3rd level from the navbar
Quote
"Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342

But over here they show that it is possible with some extra CSS: http://stackoverflow.com/a/18024991

Hope you can get it working the way you want! ;)
If you still can't don't hessitate to ask again here in the forum then i will take a look what i can do (no guarantees)

Offline zirzy

  • Posts: 178
Re: ShowMenu2: Bootstrap Navigation
« Reply #24 on: December 21, 2015, 11:09:45 AM »
i have limited the numer of levels, see $aMaxLevels.

I did this because:
Hi dbs.

I'm sorry to say but bootstrap themselve took out the 3rd level from the navbar
Quote
"Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342

But over here they show that it is possible with some extra CSS: http://stackoverflow.com/a/18024991

Hope you can get it working the way you want! ;)
If you still can't don't hessitate to ask again here in the forum then i will take a look what i can do (no guarantees)

But why isn't link with caret (arrow) working in drop down menu? All other links are working but links with arrow isn't.. If level is greater than SM2_CURR+1 there comes this arrow thing and link does not work.  So how can I fix it? :)

zirzy