Dynamic Drive CSS Library- Image Marker Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Vertical CSS Menus: Here

Image Marker Menu

Author: Dynamic Drive

This CSS code creates a vertical menu out of ordinary lists, using an arrow image to replace the default HTML marker. The image is applied as a background image, with a different one shown when the mouse moves over the links.

Demo:

The two images used:

The CSS:

<style type="text/css">

.markermenu{
width: 170px; /*width of menu*/
}

.markermenu ul{
list-style-type: none;
margin: 5px 0;
padding: 0;
border: 1px solid #9A9A9A;
}

.markermenu ul li a{
background: white url(media/arrow-list.gif) no-repeat 2px center;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 20px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}


* html .markermenu ul li a{ /*IE only. Actual menu width minus left padding of LINK (20px) */
width: 150px;
}

.markermenu ul li a:visited, .markermenu ul li a:active{
color: #00014e;
}

.markermenu ul li a:hover{
color: black;
background-color: #ffffcb;
background-image:url(media/arrow-list-red.gif); /*onMouseover image change. Remove if none*/
}

/* Holly Hack for IE \*/
* html .markermenu ul li { height: 1%; }
* html .markermenu ul li a { height: 1%; }
/* End */

</style>

The HTML:

<div class="markermenu">
<ul>
<li><a href="http://www.dynamicdrive.com/" >Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Library</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM  Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li>		
</ul>
</div>

Code Info

Rate this code:

Date Posted: 05/24/2006

Revision History: July 12th, 08: Menu CSS and HTML updated. Menu now wraps around a DIV that controls its width.
Sept 2nd, 08: Menu CSS updated to correct bug in IE6.

Usage Terms: Click here

Your Comments (24)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 2 of 3 pages < 1 2 3 >

Perfect, works really great! tip for using icons: place it in the link, otherwise it fals above it.

Posted by Monsta on 12/13, 05:26 PM

Godmoon.Good stuff for joomla design

Posted by Godmoon on 04/02, 04:37 PM

simple but very useful.. changing the background color works wonders..

Posted by Ders on 08/20, 06:18 PM

I am using this menu and it looks great but IE is adding alot of space between my menu items. The menu winds up to tall.

Any ideas?

thanks

tj

Posted by TJ on 10/25, 03:15 PM

exactly where do i put this

Posted by s on 10/31, 10:08 AM

Very simple and nice menu. It does the job very well with Firefox or Safari on Macintosh platforms, but the menu list sometimes disappear with IE. Any ideas?

Thanks

G

Posted by Greg on 11/12, 10:14 AM

Very nice menu..I too had the same problem listed above some times...

Posted by San on 12/30, 07:53 AM

Hi!

This is almost what I was looking for, however I did a little change to adapt to what I was needing.

Take a look, experiment change this css by this and see what happens.

.markermenu {
border:1px solid #9A9A9A;
list-style-type:none;
margin:5px 0pt;
padding:0pt;
width:200px;
}
.markermenu li a {
background:white url(media/arrow-list.gif) no-repeat scroll 2px center;
border-bottom:1px solid #B5B5B5;
color:#00014E;
display:block;
font-family:"Lucida Grande","Trebuchet MS",Verdana,Helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
padding:3px 0pt 3px 20px;
text-decoration:none;
width:auto;
}

* html .markermenu li a { /*IE only. Actual menu width minus left padding of LINK (20px) */
width:180px;
}
.markermenu li a:visited, .markermenu li a:active {
color:#00014E;
}
.markermenu li a:hover {
background-color:#FFFFCB;
background-image:url(media/arrow-list-red.gif);
color:black;
padding-left:40px;
background:#FFFFCB url(media/arrow-list-red.gif) no-repeat scroll 185px center;
}

* html .markermenu li a:hover{ /*IE only. Actual menu width minus left padding of LINK (40px) due to hover*/
width:160px;
} 

I hope you enjoy it.
Thanks for article, very usefull to me. ;)

Posted by Ulysses on 04/25, 06:16 AM

Ops, there are two lines useless:

background-color:#FFFFCB;
background-image:url(media/arrow-list-red.gif); 

Posted by Ulysses on 04/25, 06:19 AM

Thanks... but just one question.... how I can put bullets on mouse over event?

Posted by The Traveller on 06/10, 03:20 PM

Comment Pages 2 of 3 pages < 1 2 3 >

Commenting is not available in this weblog entry.