Horizontal menu with horizontal submenu

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
SIMONdesign.nl
Forum Members
Forum Members
Posts: 28
Joined: Tue Nov 21, 2006 8:02 am

Horizontal menu with horizontal submenu

Post by SIMONdesign.nl »

I am looking for a way to create horizontal menu with a horizontal submenu... Can this be done with the cssmenu.tpl and css?
I mean something like this: www.hetspijshuys.nl
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm
Location: Helsinki, Finland

Re: Horizontal menu with horizontal submenu

Post by KO »

Yes it can be done with CSS styles. Second level would stay visible only when you hover over it and disappear when you move you mouse out.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: Horizontal menu with horizontal submenu

Post by Dr.CSS »

Have you ever built a web site before?...
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm
Location: Helsinki, Finland

Re: Horizontal menu with horizontal submenu

Post by KO »

Maybe this gets you going... http://www.alistapart.com/articles/hybrid
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: Horizontal menu with horizontal submenu

Post by Dr.CSS »

And you are charging a client to do this but you want us to give you the code so you don't have to do any searching the net or figure it out on your own...

I've done this menu a few times but had to figure it out on my own, use Firefox with the Web dev. toolbar and edit the css on the fly and you may come up with it, or just steal the CSS from the site you linked to...

A lot of the developers and major helpers on the forum are getting sick and tired of people asking questions and not doing any research and then mouthing off about not getting any help...

"I want you to solve my problem for me and if you don't your just a jerk"

And people wonder why some of us are accused of having an attitude or don't bother helping on the forum anymore...

You can't come in here posing as a web developer or some such and then not do any research or give enough information for some one else to help you and then start telling others to stuff it...
User avatar
Nullig
Power Poster
Power Poster
Posts: 2380
Joined: Fri Feb 02, 2007 4:31 pm
Location: Comox Valley, BC

Re: Horizontal menu with horizontal submenu

Post by Nullig »

On one of my sites I used 2 horizontal menus.

First, I created a new menu template in Menu Manager called cssmenu2, which contains the following code:

Code: Select all

{if $count > 0}
<div id="menuwrapper2">
<ul id="secondary-nav">
{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" 
{elseif $node->type == 'sectionheader'}
        <li class="sectionheader"><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}
Then in my page template, I caledl the 2 menus like this:

Code: Select all

   <!-- Start Navigation -->
   <div id="menu_horiz">
         <h2 class="accessibility">Navigation</h2>
         {menu template='cssmenu.tpl'}
         {menu template='cssmenu2' start_level='2'}
   <hr class="accessibility" />

   </div>
   <!-- End Navigation -->
Hope that helps.

Nullig
jmcgin51
Power Poster
Power Poster
Posts: 1899
Joined: Mon Jun 12, 2006 9:02 pm

Re: Horizontal menu with horizontal submenu

Post by jmcgin51 »

nullig - can you provide a link to this menu structure in action?  I think this might be what I'm looking for for a new site.

Thanks!
Post Reply

Return to “Layout and Design (CSS & HTML)”