CSS Library: Horizontal CSS Menus: Here
Plastic Tabs menu
Author: Sasi Kiran/ Tab images by Dynamic Drive
This is a no frills, "plastic looking" tabs menu. The entire menu can be aligned either to the left or right of the page, by setting the menu's float attribute accordingly.
Demo:
The three images used:
The CSS:
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 5 pages « First < 1 2 3 4 5 >
hey guys, i'm struggling alot with css codes and i've tried inserting these codes but the tabs just dont appear. the links appear but no tabs shown. i've already saved the images and i've got no idea what's wrong. somebody savveee meee!!!
these ungrateful comments are useless, if expressed in name-calling or dislike without any COHERENT reason other than "it sucks". Grow up and present better solutions if your sooooooo elite.
thank u for your time
thank u for your time
I added a ton of effects (current, hover, etc...) and now the menu stretches across the entire available width. What's wrong?
.navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
.navigation li {
float: right;
background-image: url('images/nav.jpg');
background-position: right bottom;
background-repeat: no-repeat;
background-color: #272212;
height: 50px;
padding-left: 0px;
padding-top: 0;
padding-bottom: 0;
font-family: trebuchet ms, "Lucida Sans", Verdana, sans-serif;
font-size: large;
margin-left: 5px;
}
.navigation a {
display: block;
background-image: url('images/navleft.jpg');
background-position: left bottom;
background-repeat: no-repeat;
height: 50px;
font-family: trebuchet ms, "Lucida Sans", Verdana, sans-serif;
font-size: large;
color: #3e5c19;
padding-left: 15px;
padding-right: 55px;
}
a {
font-family: trebuchet ms, "Lucida Sans", Verdana, sans-serif;
color: #3e5c19;
text-decoration: none;
}
.navigation li a:hover {
color: #80BD33;
}
.navigation #current {
background-image: url('images/nav_current.jpg');
}
.navigation li:hover {
background-image: url('images/nav_hover.jpg');
background-position: right bottom;
background-repeat: no-repeat;
}
^That's only in IE. Typical.^
Mario,
Can you please send me the URL, so that i can see it live and suggest you the best go.
Can you please send me the URL, so that i can see it live and suggest you the best go.
Noi,
Can you please send me the URL, so that i can see it live and suggest you the best go.
Can you please send me the URL, so that i can see it live and suggest you the best go.
Sorry, the host just shut down. Can I have your email address?
Okay, I decided to rewrite the CSS, and the problems gone. I started from the plain tabs, and wrote. And wrote. And wrote. Away from a computer, and now it works!
>> Is it just me or are there simpler ways to do this?
There is always simpler ways ! I like this menu. It is small, simple and clean.
There is always simpler ways ! I like this menu. It is small, simple and clean.
Great Design.
