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

nibz · « **Reply #25 on:** December 21, 2015, 07:30:07 PM »

From here i don't know. Do you have a link to a demo page?

zirzy · « **Reply #26 on:** December 22, 2015, 11:32:46 AM »

Quote from: nibz on December 21, 2015, 07:30:07 PM

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

nibz · « **Reply #27 on:** December 22, 2015, 01:30:47 PM »

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

nibz · « **Reply #28 on:** December 22, 2015, 09:24:25 PM »

Hi zirzy,

This will fix the problem:

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

zirzy · « **Reply #29 on:** January 04, 2016, 01:29:28 PM »

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

nibz · « **Reply #30 on:** January 04, 2016, 09:38:13 PM »

The url is missing.

Try this:

Code: [Select]

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

zirzy · « **Reply #31 on:** January 05, 2016, 12:42:46 PM »

Quote from: nibz on January 04, 2016, 09:38:13 PM

The url is missing.

Try this:
Code: [Select]
<?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] </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.

What can I do to acces LR menu link page?

-zirzy

nibz · « **Reply #32 on:** January 05, 2016, 05:56:13 PM »

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

nibz · « **Reply #33 on:** January 05, 2016, 08:09:21 PM »

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

zirzy · « **Reply #34 on:** January 06, 2016, 09:46:43 AM »

Quote from: nibz on January 05, 2016, 08:09:21 PM

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

Ruud · « **Reply #35 on:** January 06, 2016, 10:36:19 AM »

Quote from: nibz on January 05, 2016, 08:09:21 PM

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.

noname8 · « **Reply #36 on:** January 13, 2016, 10:22:37 AM »

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!

varjo · « **Reply #37 on:** May 19, 2016, 11:36:05 AM »

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/

dbs · « **Reply #38 on:** May 19, 2016, 11:48:38 AM »

Hi, try this:
Go to Admin Tools > Frontend Output Filter > uncheck jQuery.

Ruud · « **Reply #39 on:** May 19, 2016, 11:51:34 AM »

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.

varjo · « **Reply #40 on:** May 19, 2016, 12:28:39 PM »

@dbs
@Ruud

Thanks to both of you. Unchecking the jQuery helped.

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.