Home > English, Programming > Cool CSS tab menu

Cool CSS tab menu

As you can see, lately I have been playing quite a bit with CSS.
So I recently made a CSS tab menu that I thought was worth sharing. It looks like this:

CSS Tab Menu

And it is quite simple.
All that is needed is an image with the looks of the tabs, when unselected and when selected/hovered.
I used this:

tabs background image

You can edit the image to get whatever looks you want.
So, now we only need our html and css:

* Please notice that I used a ‘header’ container for the menu and I set some style attributes for position/etc, but you would probably change it to whatever your container needs.

HTML fragment:

<div class="header">
  <ul class="menu">
   <li>
     <a href=""><span>Option 1</span></a>
   </li>
   <li class="selected">
     <a href=""><span>Option 2</span></a>
   </li>
   <li>
     <a href=""><span>Option 3</span></a>
   </li>
   <li>
     <a href=""><span>Option 4</span></a>
   </li>
 </ul>
</div>

CSS:

.header {
  width: 100%;
  height: 80px;
  background: #003366;
  position: relative;
}

.menu {
  margin: 0px;
  list-style: none;
  position: absolute;
  bottom: 0px;
  right: 20px;
}

.menu li {
  float: left;
  margin-left: -12px;
}

.menu li a {
  float: left;
  height: 24px;
  background: url('img/menu.png') no-repeat;
  position: relative;
  text-decoration: none;
  color: #003366;
  cursor: pointer;
}

.menu li a span {
  float: left;
  padding: 6px 31px 0 35px;
}

.selected a,
.menu li a:hover {
  background: url('img/menu.png') 0px -25px no-repeat !important;
  z-index: 10;
}

.menu li a:hover {
  z-index: 11;
  color: #99cc00;
}

Notice that the image has to be placed in a folder called img with the name menu.png.

And that’s it! ;)

About these ads
Categories: English, Programming Tags: , , , , , , ,
  1. May 27, 2010 at 13:21 | #1

    Haha am I really the first comment to this amazing writing?

  2. October 22, 2010 at 11:10 | #3

    good stuff. Thanks

  3. July 14, 2012 at 23:42 | #4

    i like your blog fancy selling ?

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: