Menu styling... CSS or Menu manager? [SOLVED]

[Parapet]

I need to make the background of the level 2 dropdown ul (horizontal css menu) be a gradient image, with the li's as text links on top of the image.

My task has been to take this website:
http://www.culliganwaterpros.com
... and recreate it exactly within CMSMS. You can see what the dropdowns should look like, but I have not been able to get them to look like they should with css styling alone.

Should I be making changes in the Menumanager file or in the stylesheet for this? Can anyone steer me in the right direction? If anyone has done this before, would you be willing to share the code you used so I can study it and learn from it? I can do this in normal CSS dropdown menus, but not with the CMSMS menu system.

Everything else is ready to go, so any help would be very much appreciated!

Thanks in advance!

[uniqu3]

If you can do it in CSS you can also do it with MenuManager.
Do you have anything working yet or how does your structure exactly look like?

[Parapet]

I haven't touched the Menu Manager code at this point, I was wondering if I needed to do so.

Right now any menu styling I do affects both the top level and the level 2 menu items, so clearly I need to "separate" the two, but I'm not precisely sure how to go about it. I'm not an expert in CSS but I'm beyond beginner. The CSS for this particular menu makes my head spin after a while.

What I have working is this: http://www.culliganwaterpros.com/index1.php
(It's laid in alongside the live site.) You should be able to call up the CSS from there.

[uniqu3]

In my opinion the css of the standard menu is just to much for the task you wish to accomplish or maybe it's just me and i tend to not use the standard css and rewrite my own.


So here is how i would of done it:

Code: Select all

.yourmenuclass ul {
 /* Here is style for <ul> of the first level */}

 .yourmenuclass ul li {
 /*style of first level list elements*/
 .yourmenuclass li:a:link, .yourclass li a:visited {
 /* style of links <a> in the first level */}

 .yourmenuclass li a:hover, .yourmenuclass li a:active {
 /* style for hover state of links */}

 .yourmenuclass ul li a.current {
 /* style for current page */}

.yourmenuclass ul ul {
 /* style of second level ul */
}

.yourmenuclass li li a:link, .yourclass li li a:visited {
 /* second level links */

and so on and.

The menumanager template:

Code: Select all

<div class="yourmenuclass">
{if $count > 0}
<ul>
{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 class="current" {elseif $node->current == true}
<li><a class="current" {elseif $node->haschildren == true}
<li><a {elseif $node->type == 'sectionheader'}
<li>{$node->menutext} {elseif $node->type == 'separator'}
<li>{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}"{else}title="{$node->menutext}"{/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>
{/if}
</div>

[Dr.CSS]

Put that background image in your uploads/themename/ folder and call it on the ul#primary-nav ul as a background, make sure you remove any background colors from li li or li li a etc. so it can show thru...

I did it by giving...
#primary-nav background-color: transparent...
and using this in the...
ul#primary-nav ul
background:  url(http://www.culliganwaterpros.com/menu/s ... ground.jpg) repeat-x left top;

2 steps in Firefox Web Dev. tool bar and boom it works...

[Parapet]

DrCSS:
oh my gosh, it was that simple... thank you! thank you! thank you! I've got a few more little things to fine-tune, but that saved me so much time...

The other answer above was helpful, too.. I am going to pursue that one a little further, but this last saved me a lot of "fussing" time!