Posts Tagged ‘tab’
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:
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:
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! š
Categories
- Agile (1)
- Art (1)
- Development (3)
- English (16)
- estonia (6)
- Gadgets (1)
- Internet (1)
- Java (3)
- JavaScript (3)
- Jeez (5)
- Linux (9)
- Misc (13)
- Music (5)
- Portuguese (35)
- Programming (16)
- Testing (2)
- Trips (1)
- UFSCar (4)
- Videos (1)
Blogroll
Links
Archives
- May 2012 (1)
- April 2012 (1)
- June 2011 (1)
- January 2011 (1)
- December 2010 (1)
- September 2010 (1)
- June 2010 (1)
- May 2010 (2)
- April 2010 (2)
- July 2008 (1)
- June 2008 (1)
- May 2008 (8)
- April 2008 (1)
- December 2007 (3)
- June 2007 (2)
- May 2007 (3)
- April 2007 (1)
- March 2007 (3)
- February 2007 (1)
- December 2006 (5)
- November 2006 (7)
- September 2006 (2)