WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: mikejd on February 21, 2011, 07:04:48 PM

Title: Drop-down menu in WB
Post by: mikejd on February 21, 2011, 07:04:48 PM: Hi,

I would like to add a drop-down horizontal navigation menu on site I am designing. There are many downloadable menus, probably too many to test, so I would like to ask if anyone can recommend a suitable one which they have used.

Ideally I would want it to be css only but can accept that Javascript may be needed to cater for IE. And obviously it should be easy to implement in WB.

Any advice welcome.

Mike Davies
Title: Re: Drop-down menu in WB
Post by: rcma on February 22, 2011, 11:23:02 AM: its in German but this will help i hope!!!

http://www.websitebakers.de/tutorials/topics/dropdown-menues.php
Title: Re: Drop-down menu in WB
Post by: BlackBird on February 22, 2011, 11:25:55 AM: If there's a menu you like here

http://lwis.net/free-css-drop-down-menu/

I can show you how to implement it in WB.
Title: Re: Drop-down menu in WB
Post by: mikejd on February 22, 2011, 11:50:04 AM: Hi Blackbird,
The simple horizontal drop-down looks to be what I am looking for. Advice on implementing would be appreciated.

regards,
Mike
Title: Re: Drop-down menu in WB
Post by: BlackBird on February 22, 2011, 12:20:04 PM: You may include the CSS directly into your template. Just download the framework and copy the appropriate files into your template folder. Copy this into your template's index.php (head section):

Code: [Select]
<link href="css/dropdown/themes/default/helper.css" media="screen" rel="stylesheet" type="text/css" /> <link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" /> <link href="css/dropdown/themes/default/default.css" media="screen" rel="stylesheet" type="text/css" /> 
(These should also be the files you need to copy)

Now you will have to add the CSS classes to your show_menu2() call. The <ul> needs to have the ID "nav" and the CSS classes "dropdown dropdown-horizontal".

That's all.
Title: Re: Drop-down menu in WB
Post by: mikejd on February 22, 2011, 12:35:42 PM: Thanks Blackbird, that looks straightforward.

regards,
Mike
Title: Re: Drop-down menu in WB
Post by: BlackBird on February 22, 2011, 02:12:39 PM: Just one note: Maybe the CSS files include other CSS files with @import(). So if the result doesn't look like expected, take a look into the files to see if there are more files to copy.
Title: Re: Drop-down menu in WB
Post by: topper on May 10, 2011, 05:15:21 PM: Hi, BlackBird

I wonder if its possible to use this menu with sm2.

http://lwis.net/free-css-drop-down-menu/dropdown.lwis.celebrity.horizontal.html

regards
topper
Title: Re: Drop-down menu in WB
Post by: Xagone on May 10, 2011, 05:27:06 PM: BlackBird, yes
but messy

your hierarchy would be something like :
- Home
- About
-- about us
--- menu subitem 1
--- menu subitem 2
--- menu subitem 3
--- menu subitem 4
-- facts
--- menu subitem 1
--- menu subitem 2
--- menu subitem 3
--- menu subitem 4
-- teams
--- menu subitem 1
--- menu subitem 2
--- menu subitem 3
--- menu subitem 4
- Services
- Products
- Contacts

with a sm2 having "conditionnal" showing
Title: Re: Drop-down menu in WB
Post by: nene on July 27, 2011, 07:26:57 AM: Its not working for me. What did I do wrong?

I have copied all necessary or needed files to my template folder as directed.

I added the following to the head section of my index.php file
<link href="/css/dropdown/themes/default/helper.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/dropdown/themes/default/default.css" media="screen" rel="stylesheet" type="text/css" />





and

<div id="topnav">
<?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul id="nav" class="dropdown dropdown-horizontal">'); ?>
</div>

to call the menu

Pls help.

Regards
Nene Nanor
Title: Re: Drop-down menu in WB
Post by: dbs on July 27, 2011, 12:13:44 PM: give us a link.

for showing arrows you need the class "dir" for <li> or <a>.
i have tried the menu with modul LibraryAdmin and it works for me with this SM2
Code: [Select]
<?php show_menu2( $aMenu = 0, $aStart = SM2_ROOT, $aMaxLevel = SM2_ALL, $aOptions = SM2_ALL|SM2_PRETTY, $aItemOpen = '[li] <a href="[url]" target="[target]" class=[if(class==menu-expand){"dir"}else{""}]>[menu_title]</a>', $aItemClose = '</li>', $aMenuOpen = '<ul>', $aMenuClose = '</ul>', $aTopItemOpen = false, $aTopMenuOpen = '<ul id="nav" class="dropdown dropdown-horizontal">' ); ?>
Title: Re: Drop-down menu in WB
Post by: BlackBird on July 27, 2011, 12:55:08 PM: I helped via PN, but I don't know if it's solved now.