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

最新推荐文章于 2022-11-04 16:33:40 发布
最新推荐文章于 2022-11-04 16:33:40 发布
阅读量1.3k 收藏 7
点赞数 2
分类专栏： CSS HTML 文章标签： 拉勾网 菜单 鼠标滑动 二级菜单 hover
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Searchin_R/article/details/82859628
版权
HTML 同时被 2 个专栏收录
20 篇文章 0 订阅
订阅专栏
CSS
19 篇文章 0 订阅
订阅专栏

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

原网页如下：

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

1、布局分析

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

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

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

布局制作结果如下：

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>

制作效果如下：

总体效果如下：

 

源代码如下：

<!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;
	}

 

 

一只野生饭卡丘
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
DIV+CSS实现的滑动门菜单特效代码
10-30
带椭圆的滑动门效果代码，是竖排的效果代码，看代码是个很典型的实现效果，推荐大家学习
web前端期末大作业——基于HTML+CSS+JavaScript实现中国茶文化(30页)
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业...
常用文字阴影和盒子阴影效果汇总
qq_46664185的博客
10-27 1035
一、盒子阴影-----box-shadow 1.box-shadow:2px2px2px2pxrgba(0,0,0,.3); 2.box-shadow:0px8px16px0pxrgba(0,0,0,0.2); 3. box-shadow:10px 14px 32px -2pxrgba(0, 0, 0, 0.2); 二、文字阴影------text-shadow 1.text-shadow: 2px 2px 4px #000000; 2...
用js使html标签产生鼠标滑动效果,js+html+css实现鼠标移动div实例
weixin_33986223的博客
06-03 210
js：var posX;var posY;fdiv = document.getElementById("divBody");document.getElementById("divHead").onmousedown=function(e){if(!e) e = window.event; //IEposX = e.clientX - parseInt(fdiv.style.left);posY...
web前端学习（二十八）——CSS3下拉菜单的相关设置
胜天半子祁同伟
02-08 1万+
web前端学习（二十八）——CSS3下拉菜单的相关设置
【Css】Css实现div卡片【横向滑动】效果（图文+完整源代码）
【敦厚的曹操】的专栏
05-16 3665
代码： <body> <div class="box"> <div class="card">卡片1</div> <div class="card">卡片2</div> <div class="card">卡片3</div> <div class="card">卡片4</div> <di...
html导航栏可以展开的下拉菜单,html导航栏下拉菜单如何制作
weixin_42548893的博客
05-31 1万+
html导航栏下拉菜单如何制作发布时间：2020-09-26 15:29:13来源：亿速云阅读：88作者：小新小编给大家分享一下html导航栏下拉菜单如何制作，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！我们要说的是html导航栏下拉菜单的制作，先看一个完整的实例代码：.dropdown {position: relative;display: inline-block;}.drop...
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目，分析它们在实际应用中的作用。 首先，HTML（HyperText Markup Language）...
div+css实现鼠标经过背景高亮的导航菜单代码
09-24
主要为大家介绍了div+css实现鼠标经过背景高亮的导航菜单代码,涉及css样式设置的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
DIV+CSS+JS多种特效展览.zip
12-29
这个名为"DIV+CSS+JS多种特效展览.zip"的压缩包文件，显然是一个集成了多个使用这些技术实现的特效展示项目，非常适合大学生作为期末作品进行学习和参考。下面将详细解析这些知识点。 首先，`DIV`是HTML中的一个...
CSS3炫酷鼠标hover菜单动画特效
12-13
这是一款CSS3炫酷鼠标hover菜单动画特效。该特效中，当用户鼠标hover菜单项时，在菜单项底部会出现一条动画的波浪线，效果非常炫酷。
15种漂亮的纯CSS3滑动按钮特效
12-13
这是一组共15种不同效果的纯CSS3滑动按钮。这些滑动按钮通过使用“CHECKBOX HACK”技术，通过checkbox和label元素来完成这些滑动按钮的动画效果。
div 动态特效 （div翻转、div动态效果）
ls2008
05-08 1475
转载自：http://www.5180it.com/bbs/admin/1/543.html 网上找了很久，终于给我找到这个比较满意的效果，里面有多种div的动态特效 使用的是jquery.pogo-slider 做出来的，有兴趣的可以下载看看 转载自：http://www.5180it.com/bbs/admin/1/543.html ...
box-shadow用法总结
热门推荐
chenlingA的专栏
03-20 3万+
box-shadow用法总结 box-shadow：||  ?? || ：阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影边框；阴影模糊值；阴影颜色  CSS3盒阴影效果不仅支持盒外阴影，还支持内阴影，使用时增加一个inset属性即可。例如：box-shadow: inset 0 0 1px #fff;所表示的含义是没有偏移，1像素模糊的白色内阴影。
CSS 基础（020_下拉式菜单）
Google2606的博客
10-27 1114
原始地址：http://www.w3schools.com/css/css_dropdowns.asp 翻译： CSS 下拉式菜单（CSS Dropdowns） 使用 CSS 创建可悬停、下拉式菜单。 演示：下拉式菜单示例 移动鼠标至以下示例： 这里写代码片
前端-css-js，屏幕滑动效果
tl110110tl的专栏
04-07 2095
屏幕滑动效果
【前端CSS】鼠标移动到按钮加阴影特效
weixin_43444977的博客
11-04 1259
【代码】【前端CSS】鼠标移动到按钮加阴影特效
（web前端每日一练）用JavaScript制作一个跟随鼠标的小球炫彩动画 /doge/doge
Asen-coder的博客
04-30 2313
(web前端每日一练) 使用Javascript制作一个跟随鼠标特效，动态生成美丽的小球
前端特技——滑动出现菜单编辑
weixin_30911451的博客
10-12 90
效果图： 代码： <!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" xml:lan...
采用CSS+DIV实现图片鼠标经过特效
最新发布
04-22
您的问题是如何使用 CSS 和 DIV 实现图片的鼠标经过特效。可以使用 CSS 的 hover 伪类选择器和 transform 属性实现该效果。具体实现步骤包括： 1. 在 HTML 中，使用 <div> 元素包裹图片元素。 2. 在 CSS 中，为 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值