您的位置: 首页  >  文章  >  前端——拉勾网菜单：CSS+div实现鼠标滑动特效制作

前端——拉勾网菜单：CSS+div实现鼠标滑动特效制作

分类: 文章 • 2023-11-03 21:08:58

昨天逛拉勾网，发现它首页菜单在鼠标移上去之后会出现二级子菜单，正好最近在整理HTML的知识，就仿照这拉勾网首页的菜单写了大体的框架。

原网页如下：

前端——拉勾网菜单：CSS+div实现鼠标滑动特效制作

如果鼠标滑过相应的区域，会出现相应的二级子菜单。

前端——拉勾网菜单：CSS+div实现鼠标滑动特效制作

1、布局分析

这个菜单的布局特别明显，就是一个大的div_leftmenu,然后再在该div中设置各类小的div。相关的属性可以在拉勾网的源代码上找到。在每个小块中，如“技术”块，又分为几个小块，分别为“技术” “java” “PHP” “C++""区块链"，以及“>”图标。

二级菜单同一级菜单类似，“后端开发”的内容分为一块，其余同等级的内容也分为一块。

不论是一级菜单还是二级菜单，只要做出其中一部分，其余的部分就都能做出来了。

布局制作结果如下：

前端——拉勾网菜单：CSS+div实现鼠标滑动特效制作

2、功能分析

分析一下主要的功能。可以看出，这个菜单最主要的功能就是鼠标滑过一级菜单的时候会出现相应的二级菜单。实现这个功能可以用javascript中的onmouseover和onmouseout，也可以用css中的hover选择器。

语法示例：

选择鼠标指针浮动在其上的元素，并设置其样式：

a:hover
{ 
background-color:yellow;
}

我用的是CSS的hover选择器。主要语句为（以“技术”一栏为例）：

.dorp_con{
	  display: none;
 	 position: absolute;
 	 background-color: #f9f9f9;
 	 min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  padding: 12px 16px;
	  	  margin-left:490px;
	}
.left_jishu:hover .dorp_con
	{
	display:block;
	}

主程序用<p></p>标签在二级菜单中写了“技术二级菜单”以做区分。

关键语句如下：

	<div class="dorp_con">
    		 			<p style="width:500px;height:300px;background-color:yellow;">技术菜单</p>

    					
  				 </div>

制作效果如下：

前端——拉勾网菜单：CSS+div实现鼠标滑动特效制作

总体效果如下：

前端——拉勾网菜单：CSS+div实现鼠标滑动特效制作

前端——拉勾网菜单：CSS+div实现鼠标滑动特效制作

前端——拉勾网菜单：CSS+div实现鼠标滑动特效制作

 

源代码如下：

<!DOCTYPE>
<html>

	<head>
		<meta http-equiv="Content-Type"content="text/html";charset="utf-8"/>
		<title><拉勾网></title>
		<link href="拉勾.css" rel="stylesheet" type="text/css"/>


	</head>

<body >

	<div class="dorp">
 	 	 <div class="left_list">
			<div class="left_jishu">

			<div class="jishumenu"style="width:90px;background-color:#fff;float:left;">
                   技术
                    </div>
                <div class="jishumenu1"style="width:90px;;background-color:#fff;float:left;">
                   Java
                    </div>
                                                
                    <div class="jishumenu1"style="width:90px;;background-color:#fff;float:left;">                            
                   PHP
                    </div>
                                                
                                                
                  <div class="jishumenu1"style="width:90px;;background-color:#fff;float:left;">
                   c++
                    </div>
                                                
                  <div class="jishumenu1"style="width:90px;background-color:#fff;float:left;">
                   区块链
                    </div>
					   <div class="jishumenu1"style="width:40px;background-color:#fff;float:left;margin-top:10px;">
                   <img src="2.png" style="float:left;">
                    </div>
				<div class="dorp_con">
    		 			<p style="width:500px;height:300px;background-color:yellow;">技术菜单</p>

    					
  				 </div>
					<div style="clear:both;"></div>
			</div>
			</div>
			</div>
			<div class="left_chanpin">
			<div class="jishumenu"style="width:90px;background-color:#fff;float:left;">
                   技术
                    </div>
                <div class="jishumenu1"style="width:90px;;background-color:#fff;float:left;">
                   Java
                    </div>
                                                
                    <div class="jishumenu1"style="width:90px;;background-color:#fff;float:left;">                            
                   PHP
                    </div>
                                                
                                                
                  <div class="jishumenu1"style="width:90px;;background-color:#fff;float:left;">
                   c++
                    </div>
                                                
                  <div class="jishumenu1"style="width:90px;background-color:#fff;float:left;">
                   区块链
                    </div>
					                               
                  <div class="jishumenu1"style="width:40px;background-color:#fff;float:left;margin-top:10px;">
                   <img src="2.png" style="float:left;">
                    </div>
				<div class="dorp_con2">
    		 			<p style="width:500px;height:300px;background-color:black;">产品菜单</p>
    					
  				 </div>
				 <div style="clear:both;"></div>
			</div>
			<div class="left_sheji">
				<div class="jishumenu"style="width:90px;background-color:#fff;float:left;">
                   技术
                    </div>
                <div class="jishumenu1"style="width:90px;;background-color:#fff;float:left;">
                   Java
                    </div>
                                                
                    <div class="jishumenu1"style="width:90px;;background-color:#fff;float:left;">                            
                   PHP
                    </div>
                                                
                                                
                  <div class="jishumenu1"style="width:90px;;background-color:#fff;float:left;">
                   c++
                    </div>
                                                
                  <div class="jishumenu1"style="width:90px;background-color:#fff;float:left;">
                   区块链
                    </div>
					   <div class="jishumenu1"style="width:40px;background-color:#fff;float:left;margin-top:10px;">
                   <img src="2.png" style="float:left;">
                    </div>
				 <div class="dorp_con3">
    					 <p style="width:500px;height:90px;background-color:red;">设计菜单</p>
    					 
  		 		</div>
				<div style="clear:both;"></div>
			</div>
 		
	</div>
	

	</div>

	</body>

</html>

 

拉勾.css：


	.dorp_con{
	  display: none;
 	 position: absolute;
 	 background-color: #f9f9f9;
 	 min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  padding: 12px 16px;
	  	  margin-left:490px;
	}
	.dorp_con2{
	  display: none;
 	 position: absolute;
 	 background-color: #f9f9f9;
 	 min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  padding: 12px 16px;
	  	  margin-left:490px;
	}
	.dorp_con3{
	  display: none;
 	 position: absolute;
 	 //background-color: #f9f9f9;
 	 min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  padding: 12px 16px;
	  margin-left:490px;
	}
	.left_jishu:hover .dorp_con
	{
	display:block;
	}
	.left_chanpin:hover .dorp_con2
	{
	display:block;
	}
	.left_sheji:hover .dorp_con3
	{
	display:block;
	}
	.left_list
	{
		width:500px;
		//height:600px;
		//background-color:green;
	}
	.left_jishu
	{
		width:500px;
	 display: inline-block;
    padding-left: 15px;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
	//border:1px solid #555;
	}
	.jishumenu
	{	width:60px;
		background-color:#fff;
		font-size:18px;
		float:left；
		text-align:center;
		line-height:42px;
		
	}
	.jishumenu1
	{	width:60px;
		background-color:#fff;
		font-size:10px;
		float:left；
		 text-align:center;
		line-height:42px;
	}
	.left_chanpin
	{
		width:500px;
    padding-left: 15px;
    margin-top: 0px;
    font-size: 18px;
    font-weight: 500;
	//border:1px solid #555;
	

	}
	.left_sheji
	{
		width:500px;

    padding-left: 15px;
  //  margin-top: 50px;
    font-size: 18px;
    font-weight: 500;
	//border:1px solid #555;
	}

 

 

相关推荐