Drop-down menu in WB

[mikejd]

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

[rcma]

its in German but this will help i hope!!!

http://www.websitebakers.de/tutorials/topics/dropdown-menues.php

[BlackBird]

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.

[mikejd]

Hi Blackbird,
The simple horizontal drop-down looks to be what I am looking for. Advice on implementing would be appreciated.

regards,
Mike

[BlackBird]

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:

<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" />
<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

(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.

[mikejd]

Thanks Blackbird, that looks straightforward.

regards,
Mike

[BlackBird]

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.

[topper]

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

[Xagone]

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

[nene]

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

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

<!-- / END -->

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

[dbs]

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:

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

[BlackBird]

I helped via PN, but I don't know if it's solved now.