注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧光影工作室

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

网页导航header部分:纯CSS导航菜单  

2013-07-30 17:03:51|  分类: html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
效果图:
纯CSS导航菜单 - 米欧studio - 米欧光影工作室
 


html部分

<!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>
<link rel="stylesheet" href="css.css">
</head>

<body>

<div id=nav>
<ul>
<li><a href="#">Home</a></li>

<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>

<li><a href="#">Illustrator</a></li>

<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">JSON</a></li>
<li><a href="#">jQury</a></li>
</ul>

</li>
</ul>
</li>

</ul>
</li>

<li><a href="#">Articles</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>

<li><a href="#">Inspiration</a></li>

</ul>

</div>



</body>
</html>


css部分

html,body,a,p{ border:0; padding:0;}
/*
% First hide the sub menus by targeting any UL’s within a UL with
the display:none; declaration.
%In order to make these menus reappear they need to be converted back
to block elements on hover of the LI. The > child selector makes sure only the child UL of the LI being hovered is targeted, rather than all sub menus appearing at once.
from:http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
*/
#nav ul ul {
display: none;
}

#nav ul li:hover > ul {
display: block;
}




#nav ul {
background: #efefef;

/*CSS3 properties such as gradients, box shadows and border radius. */
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
border-radius: 10px; /*圆角*/

padding: 0 20px;
list-style: none; /*取消前面的圆点*/
position: relative; /*?*/

display: inline-table;/*显示为非整行,控制触点面积较少为菜单部分*/
}
/*Adding position:relative; will allow us to absolutely position the sub menus according
to this main nav bar, then display:inline-table will condense the width of the menu to fit.
*/

#nav ul:after {
content: ""; clear: both; display: block;
}
/*The clearfix style rule will clear the floats used on the subsequent list items without the
use of overflow:hidden, which would hide the sub menus and prevent them from appearing.*/





#nav ul li {
float: left;/*使菜单横向显示*/
}


#nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#nav ul li:hover a {
color: #fff;
}

#nav ul li a {
display: block;
padding: 20px 30px;/**/
color: #757575;
text-decoration: none;
}



#nav ul ul{
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}

#nav ul ul li{
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
#nav ul ul li a:hover {
background: #4b545f;
}


/*以上主菜单结束,下面一句修饰 子菜单 竖排排列*/
#nav ul ul ul {
position: absolute; left: 100%; top:0;
}






refer:

2. 30+ Pure CSS Menu Tutorials For Web Developers 


  评论这张
 
阅读(147)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017