登陆 注册

html实现滑动门特效

守望者 2020-04-12 248人围观 ,发现0个评论 htmlcss

     所谓滑动门特效就是指当鼠标悬浮在菜单栏或导航栏上的某项时显示对应的div块, 本文仅用html,css实现滑动门特效。

  

    本文效果图如下:

    QQ截图20200412123152.png


    

html部分:

   用<ul>,<li>元素搭起我们的主体框架,其中<li>元素中包含两个关键元素:

  1. <a>元素:就是菜单项;

  2. <div>元素:菜单项对应显示的包含框;


CSS部分:


定义一组导航栏,并设置平铺显示样式:

           ul{
			
		         list-style: none;
		        
			 height: 55px;				  
		         background: rgba(0,0,0,.6);
		
		         position: relative;
				
		     }
		     ul li{
		         height: 55px;
		         line-height: 55px;
			 padding: 0 20px;
			  margin: 0;
		         /* margin-left: 20px; */
		         display: inline-block;
			text-align: center;
			 /* padding: 20px 10px; */
		     }


定义div包含框的公共样式,并隐藏起来:

 ul li div{
					 
				  height: 900px;
			          width: 100%;
			         
			          position: absolute;
			          top:55px;
			          left:0;
			          display: none;
			      }


当鼠标悬浮至第一个<li>元素时,定义对应的div包含框样式,并令其显示出来,其他<li>元素以此类推:

ul li:hover .div1{
					  background: red;
			          display: block;
			      
			      }


本文所有实例代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
		    
			body{
				margin:0;
				padding:0;
			
			}
			div.bg{
				
				margin: 200px;
			}
			
		     ul{
			
		         list-style: none;
		        
			 height: 55px;				  
		         background: rgba(0,0,0,.6);
		
		         position: relative;
				
		     }
		     ul li{
		         height: 55px;
		         line-height: 55px;
			 padding: 0 20px;
			  margin: 0;
		         /* margin-left: 20px; */
		         display: inline-block;
				 text-align: center;
				 /* padding: 20px 10px; */
		     }
		     ul li:hover{
		         background: #ff6700;
		     }
		    .bg ul li a{
				
		         color: #fff;
		         text-decoration: none;
		         font-size: 14px;
		     }
			 
			
			      ul li div{
					 
				  height: 900px;
			          width: 100%;
			         
			          position: absolute;
			          top:55px;
			          left:0;
			          display: none;
			      }
				 
				  
			      ul li:hover .div1{
					  background: red;
			          display: block;
			      
			      }
			      ul li:hover .div2{
					  background: orange;
			          display: block;
			         
					 
			      }
				  ul li:hover .div3{
					  background: green;
				      display: block;
				     
				  }
				  ul li:hover .div4{
					  background: royalblue;
				      display: block;				      
				     
				  }
				  ul li:hover .div5{
				  	 background-color: blueviolet;
				      display: block;				      
				      
				  }
				  
				  
		
		 </style>
	</head>
	
	<body>
		<div class="bg">
		     <ul>
		         <li>
		             <a href="#">菜单一</a>
		             <div class="div1">
		               	  
		             </div>
		         </li>
		         <li>
		             <a href="#">菜单二</a>
		             <div class="div2"></div>
		         </li>
		         <li>
		             <a href="#">菜单三</a>
		             <div class="div3"></div>
		         </li>
		         <li>
		             <a href="#">菜单四</a>
		             <div class="div4"></div>
		         </li>
				 <li>
				     <a href="#">菜单五</a>
				     <div class="div5"></div>
				 </li>
		     </ul>
		 </div>
		 
	</body>
</html>


    转发请附上本文链接:https://tufeng.xyz/htmlcss/47.html,谢谢合作!

请发表您的评论
请关注微信公众号
微信二维码