HOWTO: suckerfish based vertical flyout nav

[essexboyracer]

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: Select all

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

TO:

Code: Select all

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

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

Code: Select all

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: Select all

{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: Select all

{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

[cyberman]

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

[Greg]

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]

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]

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]

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]

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]

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]

A link?...

[streever]

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]

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: Select all

{* 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]

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

Code: Select all

{* 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]

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]

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]

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