WebsiteBaker Support (2.8.x) > Templates, Menus & Design

ShowMenu2: Bootstrap Navigation

(1/9) > >>

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: ---<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>
--- End code ---

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: ---/* correct menu handling top dropdownmenu */
$("li.menu-current").removeClass("current").addClass("active");
--- End code ---

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

regards mr-fan

nibz:

--- Quote from: nibz on June 26, 2013, 04:35:19 PM ---I got this so far:

--- Code: (only hover for sub items doesnt work yet) ---<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>

--- End code ---

--- End quote ---

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

Navigation

[0] Message Index

[#] Next page