Most websites use the image replacement technology or some javascript code for navigation.
So let's take a look at whether we can use pure css for this effect.
The answer is yes. You will find it easier to use CSS to do this. In this tutorial, the CSS border attribute is used.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation - bkjia.com</title>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<style>
#navigation {
font-size:90%
}
#navigation ul {
list-style: none;
Margin: 0;
Padding: 0;
padding-top: 1em;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
margin-right: 0.2em;
padding: 0.2em 0.6em 0.2em 0.6em;
color: #A62020;
background-color: #FCE6EA;
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
#navigation a:hover {
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>
< br / > < center > if the effect cannot be displayed, please press Ctrl + F5 to refresh this page. For more page Codes: < a href ='http://www.bkjia.com/ 'target =' [blank '> http://www.bkjia.com / < a > < center >
analysis:
Before doing this effect, first arrange the navigation horizontally (the last lesson mentioned how to make the navigation horizontal). Let's think about how to make the twist effect. First give the top and left borders a color, and then give the bottom border. And the right border. We give the top and left borders a lighter color than the right and bottom borders, so we can create a slight bevel effect.
Copy to Clipboard quote: [www.bkjia.com] #navigation a: link, #navigation a: visited {
margin-right: 0.2em;
padding: 0.2em 0.6em 0.2em 0.6em;
color: # A62020;
background-color: # FCE6EA;
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid # 717171;
border-right: 1px solid # 717171;
}
This step is to achieve the effect of button pressing. Set the border color of the hover state.
Copy to Clipboard quote: [www.bkjia.com] #navigation a: hover {
border-top: 1px solid # 717171;
border-left: 1px solid # 717171;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
final effect:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
