ShowMenu2: Bootstrap Navigation

[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 Expand

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

[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 Expand


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

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

[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]

@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

[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]

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.

[nibz]

I updated the code above (the one for 2.3.2)

And here is an example for  3,0

Code Select Expand


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


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

[neu1886]

*P U S H*

[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

[nibz]

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

[nibz]

I got this so far:

Code (only hover for sub items doesnt work yet) Select Expand


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

[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 Expand

/* 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

[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 Expand

<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