WebsiteBaker Logo
  • *
  • Templates
  • Help
  • Add-ons
  • Download
  • Home
*
Welcome, Guest. Please login or register.

Login with username, password and session length
 

News


WebsiteBaker 2.13.8 is now available!


R.I.P Dietmar (luisehahne) and thank you for all your valuable work for WB
https://forum.websitebaker.org/index.php/topic,32355.0.html


* Support WebsiteBaker

Your donations will help to:

  • Pay for our dedicated server
  • Pay for domain registration
  • and much more!

You can donate by clicking on the button below.


  • Home
  • Help
  • Search
  • Login
  • Register

  • WebsiteBaker Community Forum »
  • WebsiteBaker Support (2.8.x) »
  • Templates, Menus & Design »
  • Twitter Bootstrap
  • Print
Pages: [1]   Go Down

Author Topic: Twitter Bootstrap  (Read 8183 times)

Offline Bart Raymakers

  • Posts: 38
Twitter Bootstrap
« on: June 01, 2013, 09:59:27 AM »
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
Logged

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: Twitter Bootstrap
« Reply #1 on: June 01, 2013, 11:26:49 AM »
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!
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: [Select]
<?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>'
);

Let me know if it helps.

Stefek
Logged
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Offline Bart Raymakers

  • Posts: 38
Re: Twitter Bootstrap
« Reply #2 on: June 01, 2013, 02:14:24 PM »
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:
Logged

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: Twitter Bootstrap
« Reply #3 on: June 01, 2013, 02:36:04 PM »
Quote from: Bart Raymakers on June 01, 2013, 02:14:24 PM
When you're in Belgium a buy you a beer!  :wink:
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: [Select]
<?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;

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
Logged
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

  • Print
Pages: [1]   Go Up
  • WebsiteBaker Community Forum »
  • WebsiteBaker Support (2.8.x) »
  • Templates, Menus & Design »
  • Twitter Bootstrap
 

  • SMF 2.0.19 | SMF © 2017, Simple Machines
  • XHTML
  • RSS
  • WAP2