Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Image Based Vertical Menu

9:41 pm on Apr 30, 2008 (gmt 0)

New User

10+ Year Member

joined:Feb 29, 2008
posts: 8
votes: 0

I am using a vertical menu with button images. The button names and the images done in photoshop.

#menu {
margin:70px 0 0 0;
#menu ul { display: block; }
#menu ul li {
display: block;
float: left;
#menu ul li a {
display: block;
text-decoration: none;

<div id="menu" >
<li><a class="selected" href="home.php"><img src="images/home.png" alt="Home" width="170" height="30" title="Home" /></a></li>
<li><a href="about-us.php"><img src="images/about.png" alt="About Us" width="170" height="30" title="About Us" /></a></li>
<li><a href="about-water.php"><img src="images/water.png" alt="About Water" width="170" height="30" title="About Water"/></a></li>

<li><a href="reverse-osmosis.php"><img src="images/reverse.png" alt="Reverse Osmosis" width="170" height="30" title="Reverse Osmosis"/></a></li>
<li><a href="other-systems.php"><img src="images/systems.png" alt="Other Systems" width="170" height="30" title="Other Systems"/></a></li>
<li><a href="water-filters.php"><img src="images/water_filters.png" alt="Water Filters" width="170" height="30" title="Water Filters"/></a></li>
<li><a href="shower-filters.php"><img src="images/filters.png" alt="Shower Filters" width="170" height="30" title="Shower Filters"/></a></li>
<li><a href="vitamin-shower.php"><img src="images/vitamin.png" alt="Vitamin Shower" width="170" height="30" title="Vitamin Shower"/></a></li>
<li><a href="magnetic-shower.php"><img src="images/magnetic.png" alt="Magnetic Shower" width="170" height="30" title="Magnetic Shower"/></a></li>
<li><a href="tap-filters.php"><img src="images/tap.png" alt="Tap Filters" width="170" height="30" title="Tap Filters"/></a></li>
<li><a href="faucet-light.php"><img src="images/faucet.png" alt="Faucet Light" width="170" height="30" title="Faucet Light"/></a></li>
<li><a href="warranty.php"><img src="images/warranty.png" alt="Warranty" width="170" height="30" title="Warranty"/></a></li>

<!--<li><a href="testimonials.php"><img src="images/testimonials.png" alt="Testimonials" width="170" height="30" title="Testimonials"/></a></li>
<li><a href="products.php"><img src="images/products.png" alt="Products" width="170" height="30" title="Products"/></a></li>-->
<li><a href="contact.php"><img src="images/contact.png" alt="Contact Us" width="170" height="30" title="Contact Us"/></a></li>
<!--<a href="warranty.php"><img class="fltlft" style="margin:5px auto 0 30px" src="images/guarantee.jpg" alt="100% Satisfaction Guarantee" width="111" height="67" title="100% Satisfaction Guarantee"/></a>-->
<!-- end #menu -->

Im using this for on hover events and so on.

#menu ul li a:hover img, #menu ul li a:active img, #menu ul li a:focus img, #menu ul li a.selected img {
-khtml-opacity: 0.5;

Now I need to create a sub menu for one button so the same image 170x30 button flyout to produce three more exact same buttons e.g

Menu1 -> Menu1a
-> Menu1b
-> Menu1c

3:09 am on May 2, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
votes: 0

I'm not sure I understand what you're asking, but there are a few tutorials out there that teach how to make menus that pop up.

As far as accessibility it concerned, your menu scores low.

I hope you realize you put your keywords on a PR8 website ... sanitizing should include removal of your keyword: make it "widgets".

4:55 am on May 2, 2008 (gmt 0)

New User

10+ Year Member

joined:Feb 29, 2008
posts: 8
votes: 0

I searched on Google for hours for Vertical Menu Flyout images and so on they are mostly flash and CSS based but not image based.

Sorry you totally lost me on the second point. Please explain in laymans terms.



Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members