help in Vertical CSS Menu
What I'm trying to do to design a vertical CSS menu like this one . on the right of this site
. I've two problems .
How can I add an image in the menu item .
How can I MAKE the BORDER RADIUS of all the item on the top and on the bottom NOT for each one .
That's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Buttons</title>
<style>
.button {
width: 400px;
height: 100px;
line-height: 100px;
color: #C0C0C0;
text-decoration: none;
font-size: 50px;
font-family: helvetica, arial;
font-weight: bold;
display: block;
text-align: center;
position: relative;
padding-bottom:1px;
/* BACKGROUND GRADIENTS */
background: #F5F3F4;
/* BORDER RADIUS */
/* -moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; */
/* TEXT SHADOW */
text-shadow: 1px 1px 1px black;
/* BOX SHADOW */
-moz-box-shadow: 0 1px 3px black;
-webkit-box-shadow: 0 1px 3px black;
box-shadow: 0 1px 3px black;
}
/* WHILE HOVERED */
.button:hover {
color: #A8A8A8;
-moz-开发者_StackOverflow社区box-shadow: 0 2px 6px black;
-webkit-box-shadow: 0 2px 6px black;
}
/* WHILE BEING CLICKED */
.button:active {
-moz-box-shadow: 0 2px 6px black;
-webkit-box-shadow: 0 2px 6px black;
}
</style>
</head>
<body>
<a href="#" class="button"> Profile </a>
<a href="#" class="button"> Privacy </a>
<a href="#" class="button"> Services </a>
<a href="#" class="button"> Avatar </a>
<a href="#" class="button"> Language </a>
</body>
</html>
First, you should adjust your html to include a list as follows (notice I also added id attributes):
<ul>
<li><a href="#" class="button" id="profile-btn"> Profile </a></li>
<li><a href="#" class="button" id="privacy-btn"> Privacy </a></li>
<li><a href="#" class="button" id="services-btn"> Services </a></li>
<li><a href="#" class="button" id="avatar-btn"> Avatar </a></li>
<li><a href="#" class="button" id="language-btn"> Language </a></li>
</ul>
Then, to add the image use the following css:
a#profile-btn {
background-image:url(/image_path/profile.png);
}
a#privacy-btn {
background-image:url(/image_path/privacy.png);
}
a#services-btn {
background-image:url(/image_path/services.png);
}
a#avatar-btn {
background-image:url(/image_path/avatar.png);
}
a#language-btn {
background-image:url(/image_path/language.png);
}
And finally the rounded borders:
ul {list-style:none;}
ul li:first-child a {
-moz-border-radius-topleft: 25px;
-moz-border-radius-topright: 25px;
-webkit-border-radius-topleft:25px;
-webkit-border-radius-topright:25px;
border-top-right-radius:25px;
border-top-left-radius:25px;
}
ul li:last-child a {
-moz-border-radius-bottomleft: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-radius-bottomleft:25px;
-webkit-border-radius-bottomright:25px;
border-bottom-right-radius:25px;
border-bottom-left-radius:25px;
}
EDIT: This code is intended to work with all your other provided css, as long as you replace the HTML as shown.
Using pseudo classes like so: (If your nav is a list and the button class is on the list element)
li.button:first-child { -moz-border-radius: 4em 4em 0 0; border-radius: 4em 4em 0 0; }
li.button:last-child { -moz-border-radius: 0 0 4em 4em; border-radius: 0 0 4em 4em; }
Use lists for that:
<ul id="main-menu">
<li><a href="" title="">Link 1</a></li>
<li><a href="" title="">Link 2</a></li>
<li><a href="" title="">Link 3</a></li>
</ul>
And the CSS:
ul li {
float: left;
display: inline;
text-decoration: none;
font-size: 20px;
font-family: helvetica, arial;
font-weight: bold;
display: block;
text-align: center;
position: relative;
margin: 0 0 0 30px;
background: #F5F3F4;
-moz-border-radius: 10px 10px 0 0; /* 10 top left, 10 top right. 0 for the rest */
-webkit-border-top-radius: 10px; /* This will select only the top part */
border-radius: 10px 10px 0 0;
text-shadow: 1px 1px 1px black;
-moz-box-shadow: 0 1px 3px black;
-webkit-box-shadow: 0 1px 3px black;
box-shadow: 0 1px 3px black;
padding: 15px 30px;
}
ul li a { color: #C0C0C0; text-decoration: none; }
Hope you get the point. You can have a preview here: http://www.jsfiddle.net/UtNA8/
You could use a containing element for the links, ideally one that can apply a semantic relationship to its contents, I've used a ul (since it's basically a non-ordered list) and style that, rather than trying to style specific instances of an otherwise non-grouped set of elements:
html
<ul>
<li><a href="#" class="button"> Profile </a></li>
<li><a href="#" class="button"> Privacy </a></li>
<li><a href="#" class="button"> Services </a></li>
<li><a href="#" class="button"> Avatar </a></li>
<li><a href="#" class="button"> Language </a></li>
</ul>
css
ul {
width: 12em;
border-radius: 1em;
overflow: hidden;
}
ul li {
padding: 0.5em;
background-color: #eee;
}
JS Fiddle demo.
If you're targeting browsers with reliable implementations of last-child you could also use the :first-child and :last-child pseudo elements:
css:
ul li {
width: 12em;
padding: 0.5em;
background-color: #eee;
}
ul li:first-child {
-webkit-border-top-radius: 1em;
-moz-border-radius: 1em 1em 0 0;
border-radius: 1em 1em 0 0;
}
ul li:last-child {
-webkit-border-bottom-radius: 1em;
-moz-border-radius: 0 0 1em 1em;
border-radius: 0 0 1em 1em;
}
JS Fiddle demo
I'd be wary of first-child, last-child pseudo selectors. Obviously they are great ideas, and you should use them because they're a part of the standard, but at the same time you'll need to make some allowances for browsers that don't properly adhere to standards - ahem MS. Same goes for the border-radius properties obviously. Oh and finally, you might want to include your icon graphics as tags inside of your links (that is, if you want them to show up on any browser that doesn't support css properly, and you feel their content is of particular note).
加载中,请稍侯......
精彩评论