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

Offline nibz

  • Posts: 684
  • Gender: Male
Re: ShowMenu2: Bootstrap Navigation
« 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?

Offline zirzy

  • Posts: 178
Re: ShowMenu2: Bootstrap Navigation
« Reply #26 on: December 22, 2015, 11:32:46 AM »
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




Offline nibz

  • Posts: 684
  • Gender: Male
Re: ShowMenu2: Bootstrap Navigation
« 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

Offline nibz

  • Posts: 684
  • Gender: Male
Re: ShowMenu2: Bootstrap Navigation
« 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

Offline zirzy

  • Posts: 178
Re: ShowMenu2: Bootstrap Navigation
« 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] <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

Offline nibz

  • Posts: 684
  • Gender: Male
Re: ShowMenu2: Bootstrap Navigation
« 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
); 
?>


Offline zirzy

  • Posts: 178
Re: ShowMenu2: Bootstrap Navigation
« Reply #31 on: January 05, 2016, 12:42:46 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
); 
?>


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



Offline nibz

  • Posts: 684
  • Gender: Male
Re: ShowMenu2: Bootstrap Navigation
« 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

Offline nibz

  • Posts: 684
  • Gender: Male
Re: ShowMenu2: Bootstrap Navigation
« 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

Offline zirzy

  • Posts: 178
Re: ShowMenu2: Bootstrap Navigation
« Reply #34 on: January 06, 2016, 09:46:43 AM »
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





Offline Ruud

  • Posts: 3660
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: ShowMenu2: Bootstrap Navigation
« Reply #35 on: January 06, 2016, 10:36:19 AM »
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.

Offline noname8

  • Posts: 151
Re: ShowMenu2: Bootstrap Navigation
« 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!

Offline varjo

  • Posts: 8
Re: ShowMenu2: Bootstrap Navigation
« 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/

Offline dbs

  • Betatester
  • **
  • Posts: 8688
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: ShowMenu2: Bootstrap Navigation
« Reply #38 on: May 19, 2016, 11:48:38 AM »
Hi, try this:
Go to Admin Tools > Frontend Output Filter > uncheck jQuery.

Offline Ruud

  • Posts: 3660
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: ShowMenu2: Bootstrap Navigation
« 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.

Offline varjo

  • Posts: 8
Re: ShowMenu2: Bootstrap Navigation
« Reply #40 on: May 19, 2016, 12:28:39 PM »
@dbs
@Ruud

Thanks to both of you. Unchecking the jQuery helped.