close ad
 
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

My first menu, and I just can't keep it simple now, can I?

Thread began 9/14/2009 6:11 pm by lon.winters301855 | Last modified 9/17/2009 6:21 pm by Jimmy Wu | 2202 views | 5 replies |

lon.winters301855Beta Tester

My first menu, and I just can't keep it simple now, can I?

I may have painted myself into a corner here, or maybe there's still a way out. Here's what I have so far.

1. Created a custom menu and theme - no problem.
2. Needed non-uniform button widths. Search here revealed a solution to use inline styles to define the with for each button. Did that, worked greate.
3. Needed a uniquebackground image for each button, applied inline style again, works great.

Hover state text change does anything I want by editing the CSS. No problem. But, i would like the background to change. It appears by adding either a global background image or inline background images overrides any other background styles. Therefore I think I need to:

A) Somehow override the background image for the hover state and apply a regular style (Color) (this could be global) or
B) Swap the background image for another on the hover state? (This would most likely have to be inline due to the varied sizes)

Any input appreciated!

Sign in to reply to this post

Jimmy Wu

A different way you can do the background images is to define a class for each of the links and apply the images in the menu.css file. This way you can assign a hover state for the class as well.

For example, if my menu looks like this, I have added the link1 class to the Item 1 menu:
<ul class="level-0" id="cssmw">
<li class="parent"><a class="link1" href="#">Item 1</a>
<ul class="level-1">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>

In my css file I have added this:
ul#cssmw > li > a.link1 {
background-image:url(img.jpg);
}

ul#cssmw > li > a.link1:hover {
background-image:url(hoverimg.jpg);
}

Note, the img.jpg and hoverimg.jpg need relative paths to the image. The css for the sublevel menus would be slightly different as well.

Sign in to reply to this post

lon.winters301855Beta Tester

Excellent Jimmy, thank you!

I imagine I could also include the varied widths for each one of the buttons in my link classes, that is much cleaner than adding inline styles.

I did find a workround for the original prjoject (not too pretty so I won't post it), but I will go back and change it to this. On project number two, this is the only thing that will work so thank you again!

Sign in to reply to this post

Jimmy Wu

Yes, you should be able to add the widths to the css file as well. I'm glad it was helpful to you. If you have any additional issues feel free to make a new thread.

Sign in to reply to this post

lon.winters301855Beta Tester

Just wanted to post an update -

Everything is working great! The only minor tweak I had to make was to preload the hover images. There was momentary white space the first time I rolled over each button. Once the images were cached that went away.

So I just used DW's preload images behavior and they were all loaded and ready to go.

Sign in to reply to this post

Jimmy Wu

Glad to hear that you got it working. If you have any additional issues, feel free to make a new thread.

Sign in to reply to this post

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...