Dynamic Drive CSS Library- Sleek Pointer Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

Social Media Applications

PSD to HTML

Web Templates

Website Hosting

HTML Editor

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

I think itll look better if background was grey and fill colour was sky blue. Overall very good and compatible script! Another great one dynamic drive!

Posted by Husain on 03/24, 12:42 PM

how would i changed the code to make the menu "float" in the middle of the screen no matter what the screen size?
i was thinking that its under the

#pointermenu ul{
margin: 0;
margin-left: 400px; /*menu offset from left edge of window*/
float: left;
padding-left: 8px;
font: bold 13px Verdana;
background-color: black;

thanks =)

Posted by derek on 06/05, 08:05 PM

I like it, but only if the images are not downloaded. Looks too fat if they are.

Posted by Pooponastick on 06/10, 01:50 PM

Comment Pages 3 of 3 pages « First < 1 2 3