ShowMenu2: Bootstrap Navigation

[neu1886]

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]

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

[nibz]

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!

[nibz]

Didn't test, but seeing the markup you wan't it should work. (please test, and let me know!)

[neu1886]

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

[neu1886]

*P U S H*

[nibz]

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]

Push your self too....

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

[nibz]

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>


[nibz]

Push your self too....

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]

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

[nibz]

@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

[neu1886]

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.

[nibz]

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.

[noname8]

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.

[casi]

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

[DarkViper]

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

[macsmet]

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.

[nibz]

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

[macsmet]

Hi Nibz,

Your addition to the code works fine.
Thanks.

greetings,

MacSmet

[zirzy]

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

[jacobi22]

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

[zirzy]

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

[nibz]

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

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

[zirzy]

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

"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