屌炸天-css3水平导航下拉菜单

于 2014-11-29 19:49:22 发布
阅读量3.8k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： ssh框架 jsp/servlet 前端(frontend) 文章标签： css3 导航 下拉菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Cryhelyxx/article/details/41598619
本文介绍了一种自定义CSS3下拉菜单的实现方式，并提供了适合自己的CSS样式，包括如何调整样式以适应不同的需求。通过实例演示了如何在HTML/JSP文件中集成自定义下拉菜单，并展示了预览效果。
1. 简介
	参考：http://designmodo.com/css3-dropdown-menu/


 本人重新定义了css的样式， 得到了适合自己的css文件
2. 原css文件
style.css
/*

HOW TO CREATE A CSS3 DROPDOWN MENU [TUTORIAL]

"How to create a CSS3 Dropdown Menu [Tutorial]" was specially made for DesignModo by our friend Valeriu Timbuc.

Links:
http://vtimbuc.net/
https://twitter.com/vtimbuc
http://designmodo.com
http://vladimirkudinov.com

*/

/* Reset */
.menu,
.menu ul,
.menu li,
.menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

/* Menu */
.menu {	
	height: 40px;
	width: 505px;

	background: #4c4e5a;
	background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
	background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.menu li {
	position: relative;
	list-style: none;
	float: left;
	display: block;
	height: 40px;
}

/* Links */

.menu li a {
	display: block;
	padding: 0 14px;
	margin: 6px 0;
	line-height: 28px;
	text-decoration: none;
	
	border-left: 1px solid #393942;
	border-right: 1px solid #4f5058;

	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 13px;

	color: #f3f3f3;
	text-shadow: 1px 1px 1px rgba(0,0,0,.6);

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a { color: #8fde62; }

/* Sub Menu */

.menu ul {
	position: absolute;
	top: 40px;
	left: 0;

	opacity: 0;
	
	background: #1f2024;

	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;

	-webkit-transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;

	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
}

.menu li:hover > ul li {
	height: 36px;
	overflow: visible;
	padding: 0;
}

.menu ul li a {
	width: 100px;
	padding: 4px 0 4px 40px;
	margin: 0;

	border: none;
	border-bottom: 1px solid #353539;
}

.menu ul li:last-child a { border: none; }

/* Icons */

.menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }
3. 自定义适合自己的css样式
css3-dropdown-menu.css
为保证能正常显示子li元素， 故在
.css3-dropdown-menu, .css3-dropdown-menu ul, .css3-dropdown-menu li, .css3-dropdown-menu a

里添加了一个z-index: 99;
效果如下图：
/*

HOW TO CREATE A CSS3 DROPDOWN css3-dropdown-menu [TUTORIAL]

"How to create a CSS3 Dropdown css3-dropdown-menu [Tutorial]" was specially made for DesignModo by our friend Valeriu Timbuc.

Links:
http://vtimbuc.net/
https://twitter.com/vtimbuc
http://designmodo.com
http://vladimirkudinov.com

*/
/* 原文链接：http://designmodo.com/css3-dropdown-menu/ */
/* 重置 */
.css3-dropdown-menu, .css3-dropdown-menu ul, .css3-dropdown-menu li,
	.css3-dropdown-menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	z-index: 99;
}

/* css3-dropdown-menu */
.css3-dropdown-menu {
	height: 50px;
	/* width: 505px; */
	min-width: 700px;
	width: 900px;
	background: #4c4e5a;
	background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
	background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
	background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
	background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
	background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.css3-dropdown-menu li {
	position: relative;
	list-style: none;
	float: left;
	display: block;
	height: 50px;
}

/* Links */
.css3-dropdown-menu li a {
	display: block;
	padding: 0 25px;
	margin: 6px 0;
	line-height: 36px;
	text-decoration: none;
	border-left: 1px solid #393942;
	border-right: 1px solid #4f5058;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 15px;
	color: #f3f3f3;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

.css3-dropdown-menu li:first-child a {
	border-left: none;
}

.css3-dropdown-menu li:last-child a {
	border-right: none;
}

.css3-dropdown-menu li:hover>a {
	color: #8fde62;
}

/* Sub css3-dropdown-menu */
.css3-dropdown-menu ul {
	position: absolute;
	top: 50px;
	left: 0;
	opacity: 0;
	background: #1f2024;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	-webkit-transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;
}

.css3-dropdown-menu li:hover>ul {
	opacity: 1;
}

.css3-dropdown-menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;
	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
}

.css3-dropdown-menu li:hover>ul li {
	height: 40px;	/* 子li元素高度 */
	overflow: visible;
	padding: 0;
}

.css3-dropdown-menu ul li a {
	width: 150px;
	line-height: 32px;	/* 行高 = 子li元素高度 - padding-top - padding-bottom, 此处： 32px = 40px - 4px -4px */
	padding: 4px 10px 4px 10px;		/* 可知, padding-top:4px, padding-bottom:4px */
	margin: 0;
	border: none;
	font-size: 13px;
	border-bottom: 1px solid #353539;
}

.css3-dropdown-menu ul li:last-child a {
	border: none;
}
 

4. html/jsp文件
 

index.html
 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="css3-dropdown-menu.css" rel="stylesheet">
<title>强大的CSS3下拉菜单</title>
</head>
<body>
	<ul class="css3-dropdown-menu">
	    <li><a href="#">仪表盘</a></li>
	    <li><a href="#">喜 欢</a></li>
	    <li><a href="#">视 图</a>
	        <ul>
	            <li><a href="#">文 档</a></li>
	            <li><a href="#">消 息</a></li>
	            <li><a href="#">GDITC微社区论坛</a></li>
	        </ul>
	 
	    </li>
	    <li><a href="#">上 传</a>
	    	<ul>
	            <li><a href="#">文 档</a></li>
	            <li><a href="#">消 息</a></li>
	            <li><a href="#">GDITC微社区论坛</a></li>
	        </ul>
	    </li>
	    <li><a href="#">视 频</a></li>
	    <li><a href="#">文 档</a></li>
	</ul>
</body>
</html>
 

5. 预览效果
 


 导航菜单总长度为505px， 可自行加长；导航高度为50px, 父li元素高度为50px, 子li元素为40px. 子li元素内， 行高 = 子li元素高度 - padding-top - padding-bottom, 此处： 32px = 40px - 4px -4px, 还设置了导航条min-width: 700px; 可根据自己喜欢自行修改.

 



 

 

 

偷笑


                

        

    

    
  



    



            

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值