Dynamic Drive CSS Library- Sleek Pointer Menu

CSS Library: Horizontal CSS Menus: Here

Sleek Pointer Menu

An inverted, round corner CSS menu bar with a cut-out pointer below each menu link. The pointer is simply a transparent background image, automatically adopting to any background colors (in this case, black and darkred). Furthermore, you can easily "deconstruct" this menu depending on the desired look, such as removing the top border or the two round corners. Enjoy!

Demo:

The three images used (last image resized for easier download):

The CSS:

<style type="text/css">

#pointermenu{
border-top: 7px solid black; /*optional border across top*/
margin: 0;
padding: 0;
}

#pointermenu ul{
margin: 0;
margin-left: 15px; /*menu offset from left edge of window*/
float: left;
padding-left: 8px;
font: bold 13px Verdana;
background-color: black;
background: black url(media/leftround.gif) bottom left no-repeat; /*optional left round corner*/
}

* html #pointermenu ul{ /*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/
margin-bottom: 1em;
margin-left: 7px; /*menu offset from left edge of window in IE*/
}

#pointermenu ul li{
display: inline;
}


#pointermenu ul li a{
float: left;
color: white;
font-weight: bold;
padding: 2px 11px 7px 7px;
text-decoration: none;
background: url(media/pointer.gif) bottom center no-repeat;
}

#pointermenu ul li a:visited{
color: white;
}


#pointermenu ul li a:hover, #pointermenu ul li a#selected{ /*hover and selected link*/
color: white;
background-color: darkred;
}

#pointermenu ul li a#rightcorner{
padding-right: 0;
padding-left: 2px;
background: url(media/rightround.gif) bottom right no-repeat; /*optional right round corner*/
}

</style>

The HTML:

<div id="pointermenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/" id="selected">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
<li><a href="http://www.dynamicdrive.com/contact.htm">Contact</a></li>
<li><a href="#" id="rightcorner">&nbsp;</a></li>
</ul>
</div>
<br style="clear: left" />

Code Info

Rate this code:

Date Posted: 06/23/2006

Revision History: 09/01/2006

Usage Terms: Click here

Your Comments (23)

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 >

excellent sample of clean & amazing css navigation menu

Posted by Jaspal Singh Sutdhar on 01/03, 01:01 PM

Its a nice menu.. but it took me a while to get it working with gradients all through it..

should I submit the code for my version?

heres a link to what it looks like..
http://www.myfellowdj.com/z/images/56686menu1.png

Posted by MrMaybe on 01/13, 09:18 PM

I admire everyone who even KNOWS whata CSS is logically about. Just as I was getting used to HTML here we ago again. This script is great...Hope I don't drop it before I get home.

Blessings,
Vapor

Posted by Perucci on 02/16, 05:39 PM

Very good. Thanks a lot.

Posted by jaume on 03/12, 05:37 AM

Very nice, but how compatible is it with other browsers?

Posted by Özel Ders Kurs on 04/17, 01:45 PM

#pointermenu ul li a{

float: left;

color: white;

font-weight: bold;

padding: 2px 11px 7px 7px;

text-decoration: none;



/* added by Halit YESIL BEGIN*/

border-left:dotted 1px #FFFFFF;

/* added by Halit YESIL END*/



background: url(media/pointer.gif) bottom center no-repeat;

}

Posted by HalitYesil on 06/28, 05:38 AM

good work man ,and thank you.

Posted by Autocad 2007 on 09/22, 12:25 PM

I am trying to get the links to open in an iframe. Is this possible? If so how would I code the link? Thanks

Posted by Brenda on 10/31, 05:36 AM

nice style, wouldn't be a bad idea to have round.gif change to red on roll over.

Posted by chris on 12/10, 08:42 AM

the code is easy
but the method is great

Posted by VONSH on 02/02, 11:24 PM

Comment Pages 2 of 3 pages < 1 2 3 >