Vertical menu using images for 1st level

[VICbc]

Hello,

I did a lot of reading regarding this issue but no luck to find a solution. So, here it is. On the homepage design, I have 6 categories with sub menu (vertical menu). Each 6 has its own graphic for the first level and the second and third popup on the side. How can I accomplish that one? Thanks for the help!

[pedes]

i don't know if i understand you correctly?

you want to have for your menu different pics for every link ?

can you give more information, maybe an example for what you want?

kind regards
Peter

[VICbc]

My menu is made of 6 main categories with second and third level of sub-cateogies. What I am trying to accomplish is the top level will be graphic and the rest of the sub-categories would be css driven. Make sense? So here is the first level of my menu:

1. About Us (graphic)
2. Media (graphic)
3. Public Information (graphic)
4. Events (graphic)
5. How Do I... (graphic)
6. Recruiting (graphic)

Each has sub categories up to three level (css driven for style).

Really appreciate the help!

[KO]

This has been discussed many times here in forums. One discussion is here http://forum.cmsmadesimple.org/index.ph ... 672.0.html

[VICbc]

Thanks for the thread but no luck. I am not a good CSS coder. I am still learning. I do have the rollovers working but still trying to figure out how to make my first level to match the exactly grahic. Example: I have a page About Us with sub menus. I want the about.jpg button to be the first level with the sub menu popup which are being styled using CSS.

See the attached jpg for the look of the first level.

[Nullig]

If you use the image field for those top level menu items, you could use the example menu template that has been discussed.

Nullig

[pedes]

you need to use a different class on every li
i use the menutext as a class, this is for every page different and then in my css i tell that there is a different image for a another class

in this example, i have 2 page where the menutext is page 1 and page 2

This is the menu template:

{if $count > 0}

{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string="" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}

{if $node->parent == true}
menutext}[/color]">url}">{$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{else}
menutext}[/color]">url}">{$node->menutext}

{/if}

{/foreach}
{repeat string="" times=$node->depth-1}

{/if}

this is the css

                .menu ul li.page1 a {
height:94px;
background:url(uploads/images/Li_1.gif);
background-repeat: no-repeat;
}
.menu ul li.page1 a:hover {
height:94px;
background:url(uploads/images/Li_1_hover.gif);
background-repeat: no-repeat;
}
.menu ul li.page2 a {
height:92px;
background:url(uploads/images/Li_2.gif);
background-repeat: no-repeat;
}
.menu ul li.page2 a:hover {
height:92px;
background:url(uploads/images/Li_2_hover.gif);
background-repeat: no-repeat;
}

hope you understand how i do it, it is working very good

Kind regards
Peter

[Nullig]

As I said in my last comment, if you set those images for those pages (under the options tabs for the pages), you can use this menu template:

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="primary-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> <img src="uploads/images/{$node->image}" />  {$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> <img src="uploads/images/{$node->image}" />  {$node->menutext} </a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn><img src="uploads/images/{$node->image}" />  {$node->menutext}</a>
{/if}

{/foreach}

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

Just create a new database template in Menu Manager and call it cssimagemenu, or something like that. Then in your page template, change the menu call to use that template, like:

{menu template='cssimagemenu'}

Nullig

[LCarson]

For the three levels to be "css driven for style" you need to write the styles for each list level.
eg.
(#menucontent being the that contains the list menu).
Level 1=

#menucontent ul {
list-style:none;
color:#FFF;
}
#menucontent li {
color:#FFF;
}
#menucontent a {
color:#FFF;
}
#menucontent li a:hover{
color:#ACACAC;
}
#menucontent li a.currentpage {
color:#9F9B74;
}

For levels 2 & 3 write up to include '#menucontent li li' and '#menucontent li li li'.

This should work when using css to control the levels of the menus.

You could also use css to insert the images for level 1 but you'd have to have a class for each of the 6. In the styles for each of these menu items have a li style and use background image; left aligned and use text-indent so the text isn't over the top of the image. Only level 1 'li' needs the background image; 'li li' & 'li li li' would only require the same text indent as level 1.

Hope this all makes sense.

[VICbc]

Thanks for all the feedbacks and help! Iam trying to make sense in all that... it sucks to be a newby! Anyway, not sure if I got my css right...

  .menu ul li.about a {
  height:34px;
  background:url(uploads/images/about.jpg);
  background-repeat: no-repeat;
  }
  .menu ul li.about a:hover {
  height:34px;
  background:url(uploads/images/about_hover.jpg);
  background-repeat: no-repeat;
  }
  .menu ul li.media a {
  height:34px;
  background:url(uploads/images/media.jpg);
  background-repeat: no-repeat;
  }
  .menu ul li.media a:hover {
  height:34px;
  background:url(uploads/images/media_hover.jpg);
  background-repeat: no-repeat;
  }
  .menu ul li.public a {
  height:34px;
  background:url(uploads/images/public.jpg);
  background-repeat: no-repeat;
  }
  .menu ul li.public a:hover {
  height:34px;
  background:url(uploads/images/public_hover.jpg);
  background-repeat: no-repeat;
  }

  .menu ul li.events a {
  height:34px;
  background:url(uploads/images/events.jpg);
  background-repeat: no-repeat;
  }
  .menu ul li.events a:hover {
  height:34px;
  background:url(uploads/images/events_hover.jpg);
  background-repeat: no-repeat;
  }

  .menu ul li.how a {
  height:34px;
  background:url(uploads/images/how.jpg);
  background-repeat: no-repeat;
  }
  .menu ul li.how a:hover {
  height:34px;
  background:url(uploads/images/how_hover.jpg);
  background-repeat: no-repeat;
  }

  .menu ul li.recruiting a {
  height:34px;
  background:url(uploads/images/recruiting.jpg);
  background-repeat: no-repeat;
  }
  .menu ul li.recruiting a:hover {
  height:34px;
  background:url(uploads/images/recruiting_hover.jpg);
  background-repeat: no-repeat;
  }


/* Vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


/* The wrapper determines the width of the menu elements */
#menuwrapper {
  width: 100%;
}


/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  width: 100%;
  margin-left: -1px;
}
#primary-nav ul {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
}
#primary-nav li {
  margin-bottom: -1px;
  position: relative;
}


/* Styling the basic apperance of the menu elements */
#primary-nav a {
  border: 1px solid #006699;
  display: block;
  margin: 0px;
  padding: 5px 10px;
  color: #006699;
  text-decoration: none;
  background: transparent;
  min-height:1em; /* Fixes IE7 whitespace bug*/
}
#primary-nav li, #primary-nav li.menuparent {
  background-color: #ececec;
  min-height:1em; /* Fixes IE7 bug*/
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
  background-color: #C7C7C7;
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent,
#primary-nav li.menuparent:hover,
#primary-nav li.menuparenth {
  background-image: url(images/cms/arrow.gif);
  background-position: center right;
  background-repeat: no-repeat;
}


/* Styling the apperance of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
  background-color: #E7AB0B;
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
  display: none;
}
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
  display: block;
}


/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }


/* section header */
#primary-nav li.sectionheader {
  border-left: 1px solid #006699;
  border-top: 1px solid #006699;
  font-size: 130%;
  font-weight: bold;
  padding: 1.5em 0 0.8em 0.5em;
  background-color: #fff;
  margin: 0;
  width: 100%;
}


/* separator */
#primary-nav li hr.separator {
  display:block;
  height: 0.5em;
  color: #abb0b6;
  background-color: #abb0b6;
  width: 100%;
  border:0;
  margin:0;
  padding:0; 
  border-top: 1px solid #006699;
  border-right: 1px solid #006699;
}

For each page for the top level, I used the alias name for the css class.  So I created a new menutemplate using the one Nullig posted and make sure the template used that one and attached the css for this menu as well. Make sense?

After I have done that, the menu looks like this (see attachment). Thanks for all your help! I am learning a lot!

[Nullig]

Did you attach the images to the pages on the Options tab for each page?

Nullig

[VICbc]

i see what you mean. I did it for the first button and this is what it looks like now. I can remove the border and the colour of rollover but it affects all levels and I only want the first level to have the image instead of text.

[Nullig]

What I would suggest is to use the original icon (icon.jpg below) as the image for the page, the background (background.jpg below) as the background image in your stylesheet and let the menu text handle the text.

Nullig

[VICbc]

That's a better approach!

Thanks! Will do that! I'll let you know once done!

Cheers!