以下是 css3箭头菜单效果特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery箭头菜单效果</title>
<style type="text/css">
body {background: #666;font: 11px/16px Verdana, Sans-Serif;color:#444;}
a {
color: #fff;
text-decoration: none;
}
p {
margin: 0 0 2em;
}
#container {
margin: 40px auto;
width: 600px;
}
#content {
background: #ccc;
float: left;
width: 400px;
padding: 10px;
}
#side {
background: #eee;
float: right;
width: 180px;
}
ul#navigation {
margin: 10px 0;
padding: 0;
list-style: none;
}
ul#navigation li a {
display: block;
background: #999 url(linkbgtwo.gif) no-repeat top right;
height: 30px;
line-height: 30px;
padding-left: 10px;
}
ul#navigation li a:hover {
background: #333 url(linkbgtwo.gif) no-repeat bottom right;
}
#side p {
padding: 0 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div id="side">
<ul id="navigation">
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
