Unique Background Image - horizontal menu

Hi Jason et. al.!

I've got a horizontal CSS MenuWriter menu that's been working great for several months. One requirement that I've been asked to implement is to change our Donate button to a unique color at the root level of the menu. The code for the images in the menu is as follows:

ul#cssmw3 > li {
background-image: url("../cssmw3_images/left_act.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw3 > li > span {
background-image: url("../cssmw3_images/right_act.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw3 > li > span > a, ul#cssmw3 > li > span > a:link {
background-image: url("../cssmw3_images/center_act.jpg");
background-repeat: repeat-x;
color: #F1F3F2;
display: block;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 8px 0 8px;
padding: 5px 5px 5px 5px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 108px;
outline-style: none;
}
ul#cssmw3 > li:hover {
background-image: url("../cssmw3_images/left_hover_act.gif");
background-position: left top;
background-repeat: no-repeat;
}

ul#cssmw3 > li.hover {
background-image: url("../cssmw3_images/left_hover_act.gif");
background-position: left top;
background-repeat: no-repeat;
}

ul#cssmw3 > li.current {
background-image: url("../cssmw3_images/left_hover_act.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw3 > li:hover > span {
background-image: url("../cssmw3_images/right_hover_act.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}

ul#cssmw3 > li.hover > span {
background-image: url("../cssmw3_images/right_hover_act.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}

ul#cssmw3 > li.current > span.current {
background-image: url("../cssmw3_images/right_hover_act.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw3 > li:hover > span > a, ul#cssmw3 > li:hover > span > a:link {
background-image: url("../cssmw3_images/center_hover_act.jpg");
background-repeat: repeat-x;
color: #273015;
font-weight: bold;
text-decoration: none;
outline-style: none;
}

ul#cssmw3 > li.hover > span > a, ul#cssmw3 > li.hover > span > a:link {
background-image: url("../cssmw3_images/center_hover_act.jpg");
background-repeat: repeat-x;
color: #273015;
font-weight: bold;
text-decoration: none;
outline-style: none;
}

ul#cssmw3 > li.current > span.current > a.current, ul#cssmw3 > li.current > span.current > a.current:link {
background-image: url("../cssmw3_images/center_hover_act.jpg");
background-repeat: repeat-x;
color: #273015;
font-weight: bold;
text-decoration: none;
outline-style: none;
}

As you can see, the background images are from slices and I have a default image set and a hover image set. I read a thread entitled "Main Menu Level - Different Backgrounds?" and tried the technique by editing the <li> tag in the menu.php file:

<li><span><a href="<url goes here>" target="_blank" style="background-image:url(../cssmw3_images/<image source file>)">Donate Now</a></span></li>

but when I load the page it still shows the original background from the menu.css.

Any help would be appreciated!

Hi Gang: I've been able to get the center image to show up but using this code:

<li style="background-image:url(CSSMenuWriter/cssmw3_images/MainNav_Donate_left_s01_1.gif)" style="background-position:left top" style="background-repeat: no-repeat"><span style="background-image:url(CSSMenuWriter/cssmw3_images/MainNav_Donate_right_s01_1.gif)" style="background-position:right top" style="background-repeat: no-repeat"><a href="https://<link to donor form>" target="_blank" style="background-image:url(CSSMenuWriter/cssmw3_images/MainNav_Donate_center_s01_1.gif)" style="background-repeat: no-repeat">Donate Now</a></span></li>

I'm not getting the proper images on the right and left - any pointers?

Thanks as always!

Ok I've gotten a bit further - now I need to figure out how to code the Hover for the three images in question. Thanks in advance!

Perhaps I need to use a custom class for this - if you have any suggestions on how to structure this, I'd appreciate any pointers.

Thanks as always!

since you want to control all aspects, including hover, you would be better setting each menu Item LI tag to have a unique ID:


<li id="donate"><span><a href="<url goes here>" target="_blank">Donate Now</a></span></li>


then create rules to target the indvidual ID such as:
ul#cssmw3 > li#donate

ul#cssmw3 > li#donate > span

ul#cssmw3 > li#donate > span > a, ul#cssmw3 > li#donate > span > a:link

ul#cssmw3 > li#donate:hover

etc...


basically copying each existing style, and targeting to the specific ID using "#idNmae" after the LI

this way you can still control the pseudo classes like :link and :hover

Thanks Jason, I'm almost there, but when I view my page, All of the center images are the new center image for the donate menu!

Here's the line in the menu.php:
<li id="donate"><span><a href="{link to donation form here}" target="_blank">Donate Now</a></span></li>

and the CSS as per your instructions:

/* code for custom donation menu */
ul#cssmw3 > li#donate {
background-image: url("../cssmw3_images/MainNav_Donate_left_s01_1.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw3 > li#donate > span {
background-image: url("../cssmw3_images/MainNav_Donate_right_s01_1.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw3 > li#donate > span > a, ul#cssmw3 > li > span > a:link {
background-image: url("../cssmw3_images/MainNav_Donate_center_s01_1.gif");
background-repeat: no-repeat;
color: #F1F3F2;
display: block;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 8px 0 8px;
padding: 5px 5px 5px 5px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 108px;
outline-style: none;
}
ul#cssmw3 > li#donate:hover {
background-image: url("../cssmw3_images/MainNav_Donate_lefthover_s01_1.gif");
background-position: left top;
background-repeat: no-repeat;
}

ul#cssmw3 > li#donate.hover {
background-image: url("../cssmw3_images/MainNav_Donate_lefthover_s01_1.gif");
background-position: left top;
background-repeat: no-repeat;
}

ul#cssmw3 > li#donate.current {
background-image: url("../cssmw3_images/MainNav_Donate_lefthover_s01_1.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw3 > li#donate:hover > span {
background-image: url("../cssmw3_images/MainNav_Donate_righthover_s01_1.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}

ul#cssmw3 > li#donate.hover > span {
background-image: url("../cssmw3_images/MainNav_Donate_righthover_s01_1.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}

ul#cssmw3 > li#donate.current > span.current {
background-image: url("../cssmw3_images/MainNav_Donate_righthover_s01_1.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw3 > li#donate:hover > span > a, ul#cssmw3 > li:hover > span > a:link {
background-image: url("../cssmw3_images/MainNav_Donate_centerhover_s01_1.gif");
background-repeat: no-repeat;
color: #273015;
font-weight: bold;
text-decoration: none;
outline-style: none;
}

ul#cssmw3 > li#donate.hover > span > a, ul#cssmw3 > li.hover > span > a:link {
background-image: url("../cssmw3_images/MainNav_Donate_centerhover_s01_1.gif");
background-repeat: no-repeat;
color: #273015;
font-weight: bold;
text-decoration: none;
outline-style: none;
}

ul#cssmw3 > li#donate.current > span.current > a.current, ul#cssmw3 > li.current > span.current > a.current:link {
background-image: url("../cssmw3_images/MainNav_Donate_centerhover_s01_1.jpg");
background-repeat: no-repeat;
color: #273015;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
/* end code for custom donation menu */

Now all center nav images in the other menus use the center images for the donate menu in both states, but the Left and Right images are the correct images - let me know what I did wrong!

Thanks!

OK I figured it out. I added an id to the other LI tags named "default" and then edited the appropriate CSS, including the #default id value - now everything is working as expected. Thanks for your pointers!

you're welcome.

I'm having trouble implementing this with current pseudo-class.

The following code works for the basic link and for the hover pseudo-class:

ul#cssmw > li#productsNav {
	background-image:url(../../images/productsRed.png);
	background-repeat:no-repeat;
	background-position:center;
}

ul#cssmw > li#productsNav:hover {
	background-image:url(../../images/productsWhite.png);
	background-repeat:no-repeat;
	background-position:center;
}

The following code fails to change the background image for the current pseudo-class:

ul#cssmw > li#productsNav:current	{
	background-image:url(../../images/productsWhite.png);
	background-repeat:no-repeat;
	background-position:center;
}

The address bar includes products.php; the menu.php code follows:

<?php

$WA_menuDir = getcwd();

chdir(dirname(__FILE__));

require_once("../../webassist/framework/library.php");

require_once("../../webassist/framework/framework.php");

chdir($WA_menuDir);

$WA_Menu = new WA_Include(__FILE__);

?>

<ul class="level-0" id="cssmw">

<li id="recipeNav" style="width:130px;"><a href="../../recipe.php"></a></li>

<li id="performanceNav" style="width:200px; text-align:center;"><a href="../../performance.php">Performance</a></li>

<li id="tasteNav" style="width:100px;"><a href="../../taste.php">Taste</a></li>

<li id="productsNav" style="width:140px;"><a href="../../products.php">Products</a></li>

<li id="buyNav" style="width:180px;"><a href="../../wheretobuy.php">Buy</a></li>

</ul>



<script type="text/javascript">if(window.attachEvent) { window.attachEvent("onload", function() { cssmw.intializeMenu('cssmw',{select_current: 0, orientation: 1}); }); } else if(window.addEventListener) { window.addEventListener("load", function() { cssmw.intializeMenu('cssmw',{select_current: 0, orientation: 1}); }, true); }</script>

<?php

$WA_Menu->Initialize(true);

echo($WA_Menu->Body);

?>

Help??

Mike

i would need a link where i can see the problem to investigate