Dynamic Drive CSS Library- Sleek Pointer Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Sleek Pointer Menu

Author: Dynamic Drive

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 (28)

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 1 of 3 pages 1 2 3 >

Althought I like the look of this one, it's a little too flat for my taste. Overall, a very apealing menu.

* I recommend this script.

Posted by Nathan on 06/23, 03:33 PM

This is awesome, good colour choices, they contrast well.
******************
*Highly reccomended*
**********************

Posted by Chris on 06/23, 04:37 PM

excellent but do not look nice
Should set red shadowing background to full edge

Posted by Thái Cao Phong on 06/25, 08:26 AM

Really cool!
But rightcorner image isn't working on me. I don't know why. Easily, i changed it

#pointermenu ul li a#rightcorner{
padding-right: 0;
padding-left: 

7px;

background: url(media/rightround.gif) bottom right no-repeat; /*optional right round corner*/
} 

Posted by mgsmus on 08/14, 09:39 AM

Wow, it was my first time using anything like this and it worked great! Easy to figure out. :)

Posted by spork on 08/18, 11:21 AM

Mgsmus:
The issue with the right corner not working by default is because there was a slight error in the HTML code of the menu. It's now been updated.

Posted by ddadmin on 09/01, 08:17 PM

IE6 does not show the links in the status bar. Is it possible to solve this problem?

Thanks,

Posted by ozel ders on 11/03, 03:04 AM

Very cool man! I mite just use this for my site!

Thanks, ajm113.

Posted by Ajm113 on 11/04, 11:14 PM

hi,

I try to use this code with 2 level navigation,

It look really nice, but i got a bug in IE, it puts me
6px between both navigation div :(

Ty to the authors

Posted by Pole on 11/14, 06:06 AM

it didnt work at all. it didnt appear on the page. some gelp please?

Posted by vlion on 12/06, 12:08 AM

Comment Pages 1 of 3 pages 1 2 3 >

Commenting is not available in this weblog entry.