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

Twitter Bootstrap

(1/1)

Bart Raymakers:
Does anyone have experience with bootstrap in combination with WebsiteBaker?
I wanted to create a responsive menu with dropdown menus. The rest is no problem I think.

I can easily set up a 'navigation bar '. Bootstrap uses the class "active" for the menu item of the current active page. Showmenu_2 uses the class "current-menu". Renaming those classes won't do it... So creating a responsive menu with dropdown menus is certainly not going to be easy!

Bootstrap and Website baker would be a fantastic combination ... If it works of course.

Pleasy, is there somebody who can help me?
Regards and thanks in advance! Bart

Stefek:

--- Quote from: Bart Raymakers on June 01, 2013, 09:59:27 AM ---I can easily set up a 'navigation bar '. Bootstrap uses the class "active" for the menu item of the current active page. Showmenu_2 uses the class "current-menu". Renaming those classes won't do it... So creating a responsive menu with dropdown menus is certainly not going to be easy!

--- End quote ---
Hello Bart,

you can easily make the show_menu2 Function to rename the "current-menu" state to a phrase you want.

There are lots of possibilities with show_menu2. In doubt, read the documentation file (you'll find it in the show_menu2 directory).
Here is just a example how you could rename menu-current to active


--- Code: ---<?php

show_menu2(
0, 
SM2_ROOT, 
SM2_CURR+2, 
SM2_ALL, 

                // here
'<li class="[if(class=menu-current){ active}]">'.

                                // and here
'<a[if(class=menu-current){ class="active"}] href="[url]">'.

'<span>[menu_title]</span>'.
'</a>',

"</li>", 
'<ul[if(level=0){ class="topmenu" }][if(level=1){ class="submenu" }]>',
'</ul>'
);

--- End code ---

Let me know if it helps.

Stefek

Bart Raymakers:
Hi Steffek,

you certainly got me on the right way! After changing a little bit of code, I have a nice bootstrap-menu!
For creating a navbar with submenus I need to change some ID's and classes.

Thanks to you I understand the conditional aspect of Showmenu_2.
I'm not that good at PHP, even after reading the manual several times I didn't understand it a 100 %.

When you're in Belgium a buy you a beer!  :wink:

Stefek:

--- Quote from: Bart Raymakers on June 01, 2013, 02:14:24 PM ---When you're in Belgium a buy you a beer!  :wink:

--- End quote ---
Thanks.

Actaully you can change anything in the output of the show_menu2

Here is an example of a working menu I created once:


--- Code: ---<?php
$sItemOpen =  '<li class="level[level]'.
'[if(class=menu-expand){ expandable_[level]}]'.
                '[if(level=0){ top_[page_id]}]'.
'[if(class=menu-current || class=menu-parent){ selected}]"'.
'>'.
'<a if(class=menu-current){ class="selected"}] href="[url]">'.
'<span>[menu_title]</span>'.
'</a>';
$main_menu = show_menu2(
0, 
SM2_ROOT, 
SM2_CURR+2, 
SM2_ALL | SM2_BUFFER, 
$sItemOpen,
"</li>", 
'[if(level=1){<span class="haschilds"></span>}]<ul[if(level=0){ class="topmenu" }][if(level=1){ class="submenu" }]>',
"</ul>".
'' 

);
echo $main_menu;

--- End code ---

With the "SM2_BUFFER" Flag, you can put your show_menu2 call into a variable (in my case $main_menu).
Doing so, you can place your Code somewhere on the top of the page (or even in a different file) and then print the content of the variable with "echo $main_menu;"

You can use level and many other conditions to get the menu-behavior you need and want.
Glad could help.

Have a nice WE.
Stefek

Navigation

[0] Message Index