WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: neu1886 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:
<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
-
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:
/* 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
-
I got this so far:
<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!
-
Didn't test, but seeing the markup you wan't it should work. (please test, and let me know!)
-
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
-
*P U S H* ;)
-
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
-
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
-
I updated the code above (the one for 2.3.2)
And here is an example for 3,0
<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>
-
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.
-
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
-
@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 ;)
-
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.
-
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.
-
Thank you, seems to work with bs 3. However ie has problems with dropdown visibility if not latest or almost latest version.
<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.
-
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?
<?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
-
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?
<?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():
<?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
-
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.
-
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:
<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
-
Hi Nibz,
Your addition to the code works fine.
Thanks.
greetings,
MacSmet
-
I updated the code above (the one for 2.3.2)
And here is an example for 3,0
<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
-
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
-
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..
-
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)
-
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
-
From here i don't know. Do you have a link to a demo page?
-
From here i don't know. Do you have a link to a demo page?
Sorry, but I do not have a link on this page :-( I'am only testing this on my localhost, just to be sure it works with no flaws.. But I'm gonna use it if possible on my new project. I have made a few sites for bootstrap 3 but I have been using a different responsive navigation. It works fine on multilevel but there is a few flaws and for bootstrap it would be nice to have its own navigation ;) It is ok if there is max level thing. I can create another menu for + 2 etc. levels.
Maybe this has the same problem: http://WebsiteBaker.at/wb-templates/template-bs_naturak.html
$aMaxLevel = SM2_CURR+1, -> If I change 1 to 2 or 3, menu disappears.. Why?
So if someone can help me with this I would appreciate it :) And maybe others will need this too ;)
zirzy
-
Hi Zirzy,
You are right, i see the problem; when there are more levels the links with the > dont work.
I think this has something to do with the JS but don't know.
Tomorrow or tonight i will have some time to take a look.
I will report back.
Kind regards,
Nibz
-
Hi zirzy,
This will fix the problem:
<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==0){<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_START+1,
$aOptions = SM2_ALL,
$aItemOpen = $open,
$aItemClose = '</li>',
$aMenuOpen = '<ul class="[if(level==0){nav navbar-nav}] [if(level==1){dropdown-menu}]">',
$aMenuClose = '</ul>',
$aTopItemOpen = false,
$aTopMenuOpen = false
);?>
</nav>
i added a conditional format option the ul wrapper, now only level 1 (root is level 0) will have the class dropdown-menu. Also i added a conditional format option to the menu-expand it will only search the root items and add the arrow icon to them (since if the link isn't at the root it will not work with a icon.)
Kind regards,
Robin
-
Ok, thanks for fast reply :)
Option 1
Here is what i have (all links works fine but dropdown desapears):
<?php
$open = '<li class="[if(class=menu-current||class=menu-parent){active}] [if(class==menu-expand){dropdown}]">[if(class==menu-expand&&level==0){<a href="" class="dropdown-toggle" data-toggle="dropdown">[menu_title] <b class="caret"></b></a>}else {<a href="">[menu_title]</a>}]';
show_menu2(
$aMenu = 1,
$aStart = SM2_ROOT+1,
$aMaxLevel = SM2_START+1,
$aOptions = SM2_ALL,
$aItemOpen = $open,
$aItemClose = '</li>',
$aMenuOpen = '<ul class="[if(level==1){nav navbar-nav}] [if(level==2){dropdown-menu}]">',
$aMenuClose = '</ul>',
$aTopItemOpen = false,
$aTopMenuOpen = false
);
?>
Option 2
..and like this (links with "arrow down" is referring nowhere and dropdown is working nicely ):
<?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="" class="dropdown-toggle" data-toggle="dropdown">[menu_title] <b class="caret"></b></a>}else {<a href="">[menu_title]</a>}]';
show_menu2(
$aMenu = 1,
$aStart = SM2_ROOT+1,
$aMaxLevel = SM2_START+1,
$aOptions = SM2_ALL,
$aItemOpen = $open,
$aItemClose = '</li>',
$aMenuOpen = '<ul class="[if(level==1){nav navbar-nav}] [if(level==2){dropdown-menu}]">',
$aMenuClose = '</ul>',
$aTopItemOpen = false,
$aTopMenuOpen = false
);
?>
What is wrong? :|
-Zirzy
-
The url is missing.
Try this:
<?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+1,
$aMaxLevel = SM2_START+1,
$aOptions = SM2_ALL,
$aItemOpen = $open,
$aItemClose = '</li>',
$aMenuOpen = '<ul class="[if(level==1){nav navbar-nav}] [if(level==2){dropdown-menu}]">',
$aMenuClose = '</ul>',
$aTopItemOpen = false,
$aTopMenuOpen = false
);
?>
-
The url is missing.
Try this:
<?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+1,
$aMaxLevel = SM2_START+1,
$aOptions = SM2_ALL,
$aItemOpen = $open,
$aItemClose = '</li>',
$aMenuOpen = '<ul class="[if(level==1){nav navbar-nav}] [if(level==2){dropdown-menu}]">',
$aMenuClose = '</ul>',
$aTopItemOpen = false,
$aTopMenuOpen = false
);
?>
Isn't that the same as my option 2? Did not work the way I needed :) Dropdown is correct but when I klick menu link where is "arrow" (level 1) only dropdown opens, I can not enter to the page..
Ok, here is a pic of the menu and if I klick that LR menu link --> dropdown opens. If I klick LR menu link two times --> dropdown desapears. But if I wanna go to the LR page, I can not acces that page. I can acces only pages LR-kategoria 1 and LR-kategoria 2, but not the LR page.
(http://i64.tinypic.com/335dx0y.jpg)
What can I do to acces LR menu link page? :)
-zirzy
-
Hi zirzi,
I think this is a problem with bootstrap not with showmenu2.
Maybe this is a solution: https://github.com/mrhanlon/twbs-dropdown-doubletap
Kind regards
Nibz
-
I checked this, bootstrap doesn't support this.
There are several workarounds on the web but i can't get them to work.
I googled: bootstrap navbar parent clickable
and got e.g. this answer: http://stackoverflow.com/questions/25692514/bootstrap-how-do-i-make-dropdown-navigation-parent-links-an-active-link
If you have more questions regarding this issue you should post them at a bootstrap forum because this has nothing to do with WebsiteBaker.
Kind regards,
Nibz
-
I checked this, bootstrap doesn't support this.
There are several workarounds on the web but i can't get them to work.
I googled: bootstrap navbar parent clickable
and got e.g. this answer: http://stackoverflow.com/questions/25692514/bootstrap-how-do-i-make-dropdown-navigation-parent-links-an-active-link
If you have more questions regarding this issue you should post them at a bootstrap forum because this has nothing to do with WebsiteBaker.
Kind regards,
Nibz
Ok, thanks Nibz for your kind help.
I will try those too and if they don't work for me, I will use this one 😊
Thanks for your help!
-zirzy
-
I checked this, bootstrap doesn't support this.
There is a good reason for this.
A mobile device does not have a mouse and therefore no mouseover event (hover) to show sub-menus. Clicking a "normal" menu will show the sub-menu but the browser immediately starts loading that page.
For that reason you see many many websites where you cannot access child-pages with a mobile device at all.
Some frameworks solve this by always showing all sub-menu items in the mobile view, but on large websites this is not very pretty.
On tablets you will typically see the standard website anyway. In that viewmode a tablet will not be able to go to any sub-menus.
-
Didn't read fully but
DO NOT DO THAT if there is even one user using mobile
but do make a redirect subpage on top of that list, perhaps using name info or general etc..
1.st subpage->to that main page->profit!
-
Hello all,
I have a problem regarding the Bootstrap navigation. I have used bs_naturak template on one website but the navigation isn't working correctly. On smaller screens the navigation isn't collapsing. When I got the navigation to work as it should one of the snippets, responsiveslides, stopped working.
What should I do to get the navigation working right? Please help quickly.
The website: http://www.merjaportti.com/
-
Hi, try this:
Go to Admin Tools > Frontend Output Filter > uncheck jQuery.
-
Have a look at the example on http://www.w3schools.com/bootstrap/bootstrap_navbar.asp (the "Collapsing The Navigation Bar" part)
At least the <button> you disabled is needed, with the correct "data-target" set.
I would advise to use the bootstrap classes like "collapse navbar-collapse". Bootstrap has a lot of working rules set for these classes.
-
@dbs
@Ruud
Thanks to both of you. Unchecking the jQuery helped.