close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Unique Background Image - horizontal menu

Thread began 6/02/2011 12:42 pm by markhaynes75235 | Last modified 6/03/2011 12:24 pm by Jason Byrnes | 2121 views | 7 replies |

markhaynes75235

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!

Sign in to reply to this post

markhaynes75235

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!

Sign in to reply to this post

markhaynes75235

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!

Sign in to reply to this post

markhaynes75235

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!

Sign in to reply to this post

Jason ByrnesWebAssist

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

Sign in to reply to this post

markhaynes75235

Unique Background Image - horizontal menu

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!

Sign in to reply to this post

markhaynes75235

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!

Sign in to reply to this post

Jason ByrnesWebAssist

you're welcome.

Sign in to reply to this post

Mike Perry

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:
<?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

Sign in to reply to this post

Jason ByrnesWebAssist

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

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...