HOWTO: suckerfish based vertical flyout nav

essexboyracer · **Joined:** Wed Jun 20, 2007 5:40 pm **Posts:** 71

I had problems with the default vertical flyout css nav in CMSMS jumping a pixel on parent menu items, so I had a look around and found this snazzy menu taken from: http://solardreamstudios.com/learn/css/cssmenus/. To my surprise it was easy to install. Download the .js file and grab the css style also.

1. copy cssmenu.tpl, rename it, then edit it, changing:

Code:

{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">

TO:

Code:

{if $count > 0}
<div id="menuwrapper">
<ul id="navmenu">

2. Then remove from that renamed.tpl file any instance of;

Code:

class="subitem" 
class="separator"
class="subitem"
class="menuactive menuparent"
class="menuactive"

Basically strip any class definitiions from the tpl file (i left in the

at the end). upload it, and call it in your template like you would any other tpl manu file;

Code:

{menu template='renamed.tpl'}

3. Copy and paste the CSS into a new stylesheet in CMSMS, name it nice like suckerfish dropdown and attach to your template

4. Add the IE Javascript link to the .js file you got from the site above into the HEAD of the template.

Code:

{literal}
<!--[if gte IE 5.5]> 
<script language="JavaScript" src="/dhtml.js" type="text/JavaScript"></script> 
<![endif]--> 
{/literal}

I havn't tried it but it could possibly be used for a horiz menu.

ADDED: http://wiki.cmsmadesimple.org/index.php ... nu_Manager

_________________
Tring Web Design Services, Hertfordshire, UK
www.tring-web-design.co.uk
www.berkhamsted-web-design.co.uk

Last edited by essexboyracer on Thu Jul 12, 2007 6:33 pm, edited 1 time in total.

cyberman · **Posted:** Thu Jul 12, 2007 1:36 pm

Thanks for that nice Howto - have added a link to this post in Wiki (section MenuManager).

Greg · **Posted:** Fri Jul 13, 2007 1:50 pm

Yes this does work with a horizontal menu as well see my post.

Just an observation: I would suggest using 'if lte IE 6' instead of 'if gte IE 5.5' to load dhtlm.js as the helper js is not required for IE 7 and can cause problems.

essexboyracer · **Joined:** Wed Jun 20, 2007 5:40 pm **Posts:** 71

Nice one Greg, glad it works for horiz as well. I did search but struggled to find anything. Amazing that two people found the same thing, must be a good thing.

The suckerfish variant we found is excellent because it gives an instant prefect result (tweak the colours/fonts etc) which means people have less to pick holes about => make my life easier. I struggled for days with the supplied CSS Vertical Nav trying to tweak stuff here and there to get rid of that wobble.

Maybe the forum needs to be seperated (like Ted doesn't have enough work with CMSMS 2) into areas which users of CMSMS have trouble with, like menus, modules, tags etc.

EBR

ISOX · **Posted:** Mon Jul 16, 2007 3:49 pm

i really like this one! it works! But it doesn't work well in IE $:-\$ in IE it doesnt open to view the sub-catagories.. anyone else have this problem? or better... a solution?

Greg · **Posted:** Mon Jul 16, 2007 6:37 pm

ISOX are you experiencing this with IE 6 or less? If yes then I would guess the dhtlm.js is not attached in your template. Maybe a wrong path or ??

ISOX · **Posted:** Mon Jul 16, 2007 8:13 pm

my god! i was like: I sure i called the javascript!

checked again.... i made a mistake: a / was missing in the url! haha. anyway! thanks for the response! it works!

LivingMudFish · **Joined:** Wed Feb 08, 2006 1:37 pm **Posts:** 25

Hi,

i have made a template in fireworks sliced it up and tried to add the horizontal menu. briefly it don't work! is this to do with the tables that are created in fireworks when it is exported as html?

if so how do i get around it? i don't know enough about cms yet to hard code a page..

it's doing my head in

Dr.CSS · **Posted:** Tue Oct 09, 2007 4:15 am

A link?...

streever · **Posted:** Thu Oct 11, 2007 8:25 pm

if there are tables, it won't work

the point of using this system is to not do it that way, but to use divs & css--not tables or code from fireworks like that.

this article: http://www.alistapart.com/articles/dropdowns/ is by the original author of suckerfish in which he explains the system!

hope that helps

mran · **Joined:** Sat Oct 06, 2007 5:47 pm **Posts:** 20

Would someone be willing to post the code for the renamed.tpl? I'm coming to this from only knowing css and html, so this code is quite unfamiliar to me. My edit, which I'll post below, doesn't work. Where am I going wrong?

Code:

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="navmenu">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

   {repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}

   {repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
   </li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
   <li><a
{elseif $node->current == true}
   <li><a 
{elseif $node->haschildren == true}
   <li><a 
{elseif $node->type == 'sectionheader'}
        <li><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
        <li style="list-style-type: none;"> <hr class="separator" />
{else}
   <li><a 
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}

{/foreach}

   {repeat string="</li></ul>" times=$node->depth-1}      </li>
   </ul>
<div class="clearb"></div>
</div>
{/if}

Greg · **Posted:** Wed Oct 24, 2007 12:10 pm

Here is the code I use mran - looks the same to me:

Code:

{* CSS classes used in this template:
#navmenu - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="navmenu">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactive menuparent"><a class="menuactive menuparent" {elseif $node->current == true}
<li class="menuactive"><a class="menuactive" {elseif $node->haschildren == true}
<li class="menuparent"><a class="menuparent" {else}
<li><a {/if}
href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
<div class="clear"></div>
</div>
{/if}

essexboyracer · **Joined:** Wed Jun 20, 2007 5:40 pm **Posts:** 71

With a bit of tweaking you can get the http://users.tpg.com.au/j_birch/plugins/superfish/ flyout menu working as well, as soon as I have ime I will post another howto if people want.

I used superfish instead for the delay on the sub menus which makes navigation with a pointing device a bit easier.

jorge57 · **Posted:** Mon Nov 19, 2007 4:02 pm

mran, I also installed everything as stated in the instructions and it did not work. I noticed that the .js file uses getElementById and the name of the id it refers to is navmenu-v. The .css file also refers to navmenu-v. But the instructions say to rename the id 'navmenu' in the .tpl file. I changed the id name in the .tpl file to navmenu-v and now it works fine.

Oh, I also had to mess around a bit with the link to the .js file in my template. I went as far as removing the logis around the link and that helped although I'm not sure if that's the wisest thing to do. But, it's working well for me. Hope this helps.

Gregor · **Posted:** Sat Mar 22, 2008 4:00 pm

hello,

I got the vertical menu running, with one exception. My site www.uisge-beatha.eu
Click on the menu item "Fotoalbum", and when you hover over de menu items, you'll see that the menu "Foto album" expands to page width and all album item are moved down.

I'm struckling to get it solved for some time, and I'd really appreciate it if someone could help me to solve it.

Thanks in advance,
Gregor

HOWTO: suckerfish based vertical flyout nav

Who is online