 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 纯css制作的倾斜导航菜单 |
| 来源：JavaEye 更新时间：2010/9/27 21:39:01 阅读次数： 我要投稿 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 倾斜的css导航菜单</title>
<style type="text/css">
#pad {height:150px;}
#menu {padding:0 0 0 30px; margin:0; list-style:none;}
#menu li {float:left; position:relative; margin-right:2px; display:block; height:0; width:60px; border-bottom:30px solid #069; border-left:30px dashed transparent;}
#menu li a {position:absolute; left:60px; top:0; border-top:30px solid #069; border-right:30px dotted transparent; text-decoration:none; font-family:arial, sans-serif; font-size:12px; color:#fff;}
#menu li a b {display:block; background:#069; position:absolute; top:-30px; left:-60px; width:60px; height:30px; line-height:30px; text-align:center; cursor:pointer; font-weight:normal;}
#menu li#single {width:80px;}
#menu li#single a {left:80px;}
#menu li#single a b {left:-80px; width:80px;}
#menu li a:hover {color:#000;}
.home #menu li#home,
.single #menu li#single,
.dropdown #menu li#dropdown,
.dropline #menu li#dropline,
.flyout #menu li#flyout,
.support #menu li#support,
.contact #menu li#contact
{border-bottom-color:#e70;}
.home #menu li#home a,
.single #menu li#single a,
.dropdown #menu li#dropdown a,
.dropline #menu li#dropline a,
.flyout #menu li#flyout a,
.support #menu li#support a,
.contact #menu li#contact a
{color:#000; border-top-color:#e70;}
.home #menu li#home a b,
.single #menu li#single a b,
.dropdown #menu li#dropdown a b,
.dropline #menu li#dropline a b,
.flyout #menu li#flyout a b,
.support #menu li#support a b,
.contact #menu li#contact a b
{background:#e70;}
</style>
</head>
<body>
<ul id="menu">
<li id="home"><a href="#" target="_blank"><b>Home</b></a></li>
<li id="single"><a href="#" target="_blank"><b>Menu1</b></a></li>
<li id="dropdown"><a href="#" target="_blank"><b>Menu2</b></a></li>
<li id="dropline"><a href="#" target="_blank"><b>Menu3</b></a></li>
<li id="flyout"><a href="#" target="_blank"><b>Menu4</b></a></li>
<li id="support"><a href="#" target="_blank"><b>About</b></a></li>
<li id="contact"><a href="#" target="_blank"><b>Contact</b></a></li>
</ul>
</body>
</html> |
| 特效说明： |
纯css制作的的倾斜导航菜单，更个性一些，给人耳目一新的感觉，颜色不喜欢的朋友可自己换下颜色，试着修改一些属性，会有更多效果。 |
|
| 上一篇文章： 带渐变背景和遮罩效果的弹出层下一篇文章： 简单的文件树效果 |
|
|
|
注册 登录
