利用JavaScript+CSS+DIV实现下拉菜单源代码

最新推荐文章于 2023-02-22 13:01:52 发布
最新推荐文章于 2023-02-22 13:01:52 发布
阅读量315 收藏 3
点赞数 1
分类专栏： HBuilder 文章标签： javascript html java js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/User20190527/article/details/113547139
版权

课堂作业：利用JavaScript+CSS+DIV实现下拉菜单


源代码 


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>菜单演示</title>
		<style type="text/css">
			#con {
				width: 800px;
				height: 400px;
				margin: 100px auto;
				background-color: yellow;
			}
			
			#con ul li {
				float: left;
				width: 150px;
				height: 30px;
				line-height: 30px;
				text-decoration: none;
				text-align: left;
			}
			
			#con a{
				text-decoration: none;
				color: #FFF;
				display: block;
				width: 150px;
				height: 30px;
				background: #666;
			}
			#con a:hover{
				background: pink;
			}
			#con ul ul{
				display: none
			}
			.header{
				text-align: center;
			}
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				font-size:13px;
			}
		</style>
		
	</head>

	<body>
		<div id="con">
			<ul>
				<li id="li01">
					<a href="javascript:;" class="header">平面设计</a>
					<ul id="ul01">
						<li>
							<a href="javascript:;">&nbsp;&nbsp;CorelDRAW</a>
						</li>
						<li>
							<a href="javascript:;">&nbsp;&nbsp;Photoshop</a>
						</li>
						<li>
							<a href="javascript:;">&nbsp;&nbsp;Illustrator</a>
						</li>
						<li>
							<a href="javascript:;">&nbsp;&nbsp;Sketch</a>
						</li>
					</ul>
				</li>

				<li id="li02">
					<a href="javascript:;" class="header">网页设计</a>
					<ul id="ul02">
						<li>
							<a href="javascript:;">&nbsp;&nbsp;HTML基础</a>
						</li>
						<li>
							<a href="javascript:;">&nbsp;&nbsp;CSS层叠样式表</a>
						</li>
						<li>
							<a href="javascript:;">&nbsp;&nbsp;JavaScript</a>
						</li>
						<li>
							<a href="javascript:;">&nbsp;&nbsp;Dreamweaver</a>
						</li>
					</ul>
				</li>
				<li id="li03">
					<a href="javascript:;" class="header">影视动画</a>
					<ul id="ul03">
						<li>
							<a href="javascript:;">&nbsp;&nbsp;AF入门到精通</a>
						</li>
						<li>
							<a href="javascript:;">&nbsp;&nbsp;Premiere进阶</a>
						</li>
						<li>
							<a href="javascript:;">&nbsp;&nbsp;Edius基础到提高</a>
						</li>
						<li>
							<a href="javascript:;">&nbsp;&nbsp;ZBrush基础</a>
						</li>
					</ul>
				</li>
				<li id="li04">
					<a href="javascript:;" class="header">室内设计</a>
					<ul id="ul04">
						<li>
							<a href="javascript:;">&nbsp;&nbsp;3ds Max入门</a>
						</li>
						<li>
							<a href="javascript:;">&nbsp;&nbsp;别墅施工图现场</a>
						</li>
						<li>
							<a href="javascript:;">&nbsp;&nbsp;VR室内效果图基础</a>
						</li>
						<li>
							<a href="javascript:;">&nbsp;&nbsp;SU建模及3D渲染</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>

</html>

<script type="text/javascript">
			function myfn(param1,param2){
				var myli=document.getElementById(param1);
				var myul=document.getElementById(param2);
				myli.onmouseover=function(){
					myul.style.display='block';
				}
				myli.onmouseout=function(){
					myul.style.display='none';
				}
			}
			myfn('li01','ul01');
			myfn('li02','ul02');
			myfn('li03','ul03');
			myfn('li04','ul04');
		</script>

操作截图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

User20190527
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript+CSS模拟出的漂亮下拉菜单
05-16
内容索引:脚本资源,Ajax/JavaScript,下拉菜单　JavaScript+CSS模拟出的漂亮下拉菜单，做的仓促，虚心接受批评。请注意代码的最后部分，添加这部分代码可以确保点击body区域的时候 也可以隐藏菜单，代码里我加有注释...
JSP+css标签页
zhuyucheng123的专栏
03-20 8254
本文转自：点击打开链接 习惯了js框架ext，jquery等。突然要用jsp+css实现标签页的效果，突然不适应了，在网上so了一下发现一个不错的实现方式，现引用一下：原版请参考：http://blog.csdn.net/uniorg/article/details/3176266， Html代码   >   html xmlns="http://w
HTML+CSS实现导航条及下拉菜单1
青梅煮酒
06-05 9271
1、效果截图 2、html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="main-menu"> <div class="logo"> <p>XXX后台管理系统</p> <
div下拉html表格,JS+DIV+CSS实现仿表单下拉列表效果
weixin_42467768的博客
06-03 197
本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果。分享给大家供大家参考。具体如下：JS+DIV+CSS实现仿表单下拉列表效果，是完全用CSS技术再配合JS实现的效果，用来代替传统的Select下拉框，虽然目前来说，此代码还有些粗糙，但对于美化列表的样式来说，可能以后会更方便，要比Select方便的多。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3...
html5中使用外链式为div标签设置属性
大数据-攻城狮
12-07 1324
Document div{ width: 300px; height: 300px; /* 背景色 */ background-color: red; /* 边框 border */ /* 边框的粗细 实线 边框颜色 */ border-top: 10px solid green; bo
下拉菜单——jQuery+div+ul实现水平下拉菜单
qq_44836633的博客
02-22 216
jQuery+div+ul实现水平下拉菜单
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
9.jquery仿google首页图标动画菜单效果实现模拟鼠标动画菜单的代码 10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的效果代码 11.jquery浮动变化的个性菜单插件floatmenu下载 12.jQuery黑色风格仿Flash版下滑...
零基础学HTML CSS源代码
05-10
第1章（源代码\第1章） 示例描述：本章演示HTML基本知识 HTML基本标记.html HTML基本标记的用法。 我的第一张网页.html 演示我的第一张网页。 第2章（源代码\第2章） ...
JavaScript完全自学宝典 源代码
12-31
1．本书1~21章所附代码的运行环境 操作系统：Windows 2003、Windows XP Professional，或者Windows 2000 开发环境：UltraEdit12.10a、eclipse-jee-europa Web浏览器：Microsoft Internet Explorer 6.0及以上版本 ...
程序天下:JavaScript实例自学手册
07-08
1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计时载入页面 1.11 定义网页的关键字 1.12 进入页面同时弹出欢迎...
javaScript+Div+css实现下拉菜单
04-26
web中下拉菜单原理，即在用JavaScript控制不同DIV的现实和隐藏！
非常优秀的下拉菜单DIV+CSS源码
10-21
1.非常优秀的下拉菜单DIV+CSS源码 2.蛮实用的，可以二次开发
JS+CSS实现DIV层的展开、收缩效果
10-22
主要介绍了JS+CSS实现DIV层的展开、收缩效果，以两个完整实例介绍了JS控制DIV层的展开、收缩效果，感兴趣的小伙伴们可以参考一下
JavaScript+CSS+DIV 实现下拉菜单
pxl20171799的博客
03-14 849
实现过程中需要注意： 表示距离的数字后面要加单位 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉菜单示例&lt;/title&gt; &lt;script language='javaScript'&gt; function show(m
JS+DIV+CSS 下拉菜单
07-16 3873
js+div+css万能下拉菜单代码
javaScript+DIV+CSS实现下拉菜单
snoopy的专栏
09-16 2241
<br /><html><br /><head><br /><title>下拉菜单示例</title><br /><script language="javascript"><br />function show(menu){<br />    document.getElementById(menu).style.visibility="visible";<br />}<br />function hide(){<br />document.getElementById("menu1").style.vi
JavaScript+CSS+DIV实现下拉菜单
i_belive_my_love的博客
09-20 992
1.层标签 : (division)是块级元素，可以包含段落，标题，表格，乃至诸如章节，摘要和备注等。由于是块级元素，在段落开始，结束出会插入一个换行。 基本语法： 语法说明： 1.position 属性主要是定义层的定义方式。 2.left和top 是用来定义层的位置，表示与其他对象的左部，顶部的相对位置。 3.width和height 用来定义层的宽度和高度 4.float
dw添加下拉菜单_怎样用dreamweaver制作网站下拉菜单
weixin_36314050的博客
01-17 4588
展开全部一、打开Dreamweaver，点击 文件-新建 菜单，创建一个HTML文件，输入网站e69da5e6ba9062616964757a686964616f31333363386664导航栏文字，并选中输入的文字，在下面的属性栏链接处加一个空链接：#。然后保存该网页文件。二、点击 窗口-行为 菜单，打开行为面板。三、选中第一步输入的文字，点行为面板上的+号，在弹出的菜单中选-显示弹出式菜单。...
利用JavaScript+DIV+CSS实现下拉菜单。当鼠标移动到菜单选项的时候显示对应的DIV：function show(menu)。当鼠标移出的时候隐藏所有的DIV：function hide(...
weixin_33720452的博客
10-07 662
<!--程序ch02_11_Menu.html--><html> <head> <title>下拉菜单实例</title> <script language="javaScript"> //当鼠标移动到菜单选项的时候显示对应的DIV function show(menu) {documen...
用javascript+css制作下拉菜单
最新发布
06-28
### 回答1： 下拉菜单是一种常见的网页菜单形式，可以通过JavaScript和CSS来制作。具体步骤如下： 1. HTML结构：在HTML中创建一个包含下拉菜单的容器，如下所示： ``` <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">菜单项1</a> <a href="#">菜单项2</a> <a href="#">菜单项3</a> </div> </div> ``` 其中，`dropdown`是整个下拉菜单的容器，`dropbtn`是触发下拉菜单的按钮，`dropdown-content`是下拉菜单的内容。 2. CSS样式：使用CSS样式来控制下拉菜单的外观和行为，如下所示： ``` /* 隐藏下拉菜单内容 */ .dropdown-content { display: none; position: absolute; z-index: 1; } /* 鼠标悬停时显示下拉菜单内容 */ .dropdown:hover .dropdown-content { display: block; } /* 下拉菜单按钮样式 */ .dropbtn { background-color: #4CAF50; color: white; padding: 12px; font-size: 16px; border: none; cursor: pointer; } /* 下拉菜单内容样式 */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* 鼠标悬停时下拉菜单内容样式 */ .dropdown-content a:hover { background-color: #f1f1f1; } ``` 其中，`display: none`用于隐藏下拉菜单内容，`display: block`用于显示下拉菜单内容，`position: absolute`和`z-index: 1`用于控制下拉菜单内容的位置和层级，`hover`伪类用于控制鼠标悬停时下拉菜单的显示和隐藏。 3. JavaScript交互：使用JavaScript来实现下拉菜单的交互效果，如下所示： ``` /* 获取下拉菜单按钮和内容 */ var dropdown = document.getElementsByClassName("dropdown"); var i; /* 遍历下拉菜单 */ for (i = ; i < dropdown.length; i++) { var dropdownBtn = dropdown[i].getElementsByClassName("dropbtn")[]; var dropdownContent = dropdown[i].getElementsByClassName("dropdown-content")[]; /* 点击按钮时显示或隐藏下拉菜单内容 */ dropdownBtn.addEventListener("click", function() { dropdownContent.classList.toggle("show"); }); /* 点击其他地方时隐藏下拉菜单内容 */ window.addEventListener("click", function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var j; for (j = ; j < dropdowns.length; j++) { var openDropdown = dropdowns[j]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }); } ``` 其中，`getElementsByClassName`用于获取下拉菜单按钮和内容，`classList.toggle`用于切换下拉菜单内容的显示和隐藏，`matches`用于判断点击的元素是否为下拉菜单按钮，`contains`用于判断下拉菜单内容是否已经显示。通过以上步骤，就可以使用JavaScript和CSS制作出一个简单的下拉菜单。 ### 回答2： 下拉菜单是Web设计中最常用的交互元素之一。下拉菜单可以添加到网站的主导航栏，用于展示网站的主导航标签，并提供访客到其它页面的链接。下拉菜单也常用于表单，用于选择选项，例如国家、城市、日期、时间等。 制作下拉菜单使用JavaScript和CSS实现的方法如下： 1. 首先需要创建一个HTML的下拉菜单框架，在HTML文件中添加一个div元素，并为其设置一个id属性。 ```html <div id="dropdownMenu"> <button class="dropbtn">下拉按钮</button> <div class="dropdown-content"> <a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a> </div> </div> ``` 2. 添加CSS样式，使下拉菜单具有所需的样式。在css文件中为下拉菜单设置样式，通过设置display属性为none，使下拉菜单在默认情况下不可见。 ```css #dropdownMenu { position: relative; display: inline-block; } .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; } .dropdown-content { display: none; position: absolute; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f1f1f1; } .show { display: block; } ``` 3. 添加JavaScript代码，使下拉菜单可见。在JavaScript文件中，为下拉按钮添加一个点击事件的监听器，通过在CSS样式中设置display属性为block，让下拉菜单可见。 ```js // 获取下拉按钮和下拉菜单 var dropbtn = document.querySelector(".dropbtn"); var dropdownContent = document.querySelector(".dropdown-content"); // 监听下拉按钮的点击事件 dropbtn.addEventListener("click", function() { // 切换下拉菜单的可见性 dropdownContent.classList.toggle("show"); }); // 在窗口外部点击，使下拉菜单消失 window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); for (var i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } ``` 通过上述步骤，我们就可以制作出一个简单的下拉菜单了。通过CSS样式可以调整下拉菜单的外观和布局，通过JavaScript代码可以使下拉菜单的可见性随用户的操作而变化，从而实现一个交互性强、易于使用的下拉菜单。 ### 回答3： 下拉菜单是网页设计中的一种常见元素，在页面中通常用于显示多个选项，便于用户进行选择。在网页开发中，可以使用JavaScript和CSS来制作下拉菜单。 一、使用CSS实现下拉菜单： 1.首先，我们需要准备一个HTML文件，如下图所示： ![image-20211208190358916](https://cdn.jsdelivr.net/gh/zd200572/img/202112091042085.png) 2.接下来，在CSS中定义一个下拉菜单的样式。样式代码如下： ```html <style> /*定义下拉菜单的样式*/ .dropdown { position: relative; display: inline-block; } /*定义下拉菜单的按钮样式*/ .dropdown-button { background-color: #4CAF50; color: white; font-size: 16px; border: none; cursor: pointer; } /*定义下拉菜单的选项样式*/ .dropdown-content { display: none; position: absolute; z-index: 1; } /*鼠标移动到下拉菜单上时，显示选项*/ .dropdown:hover .dropdown-content { display: block; } </style> ``` 3.在HTML中添加下拉菜单的按钮和选项。代码如下： ``` html <div class="dropdown"> <button class="dropdown-button">请选择</button> <div class="dropdown-content"> <a href="#">选项1</a> <a href="#">选项2</a> <a href="#">选项3</a> <a href="#">选项4</a> </div> </div> ``` 通过上面的代码，就可以实现一个简单的下拉菜单。需要注意的是，当鼠标移动到下拉菜单的按钮上时，选项才会显示。 二、使用JavaScript实现下拉菜单： 1.和上面一样，首先，我们需要准备一个HTML文件，如下图所示： ![image-20211208190358916](https://cdn.jsdelivr.net/gh/zd200572/img/202112091042085.png) 2.接下来，在CSS中定义一个下拉菜单的样式。样式代码和上面的方法一样，这里就不再赘述。 3.在HTML中添加下拉菜单的按钮和选项，并为按钮绑定一个点击事件。代码如下： ``` html <div class="dropdown"> <button class="dropdown-button" onclick="showMenu()">请选择</button> <div class="dropdown-content" id="menu"> <a href="#">选项1</a> <a href="#">选项2</a> <a href="#">选项3</a> <a href="#">选项4</a> </div> </div> ``` 需要注意的是，这里的按钮被绑定了一个`onclick`事件，点击按钮时会调用名为`showMenu()`的JavaScript函数。 4.接下来，在JavaScript中定义`showMenu()`函数的代码。这个函数用来控制下拉菜单的显示和隐藏。代码如下： ``` html <script> function showMenu() { var menu = document.getElementById("menu"); if (menu.style.display === "block") { menu.style.display = "none"; } else { menu.style.display = "block"; } } </script> ``` 通过上面的代码，我们就可以完成一个简单的JavaScript下拉菜单。 需要注意的是，在JavaScript实现下拉菜单时，我们需要为下拉菜单的选项设置一个`id`属性，这样才能够通过JavaScript获取到该选项，并控制其显示和隐藏。 总结： 无论是使用CSS还是JavaScript实现下拉菜单，在实现的过程中都需要注意以下几点： 1.下拉菜单的选项列表必须设置为隐藏状态，在需要显示时才将其设置为显示状态。 2.在CSS中通过:hover伪类来控制菜单列表的显示和隐藏。 3.在JavaScript中通过某个事件来触发菜单列表的显示和隐藏。需要注意的是，在JavaScript中获取菜单列表的方法需要根据具体情况来确定。通常情况下，菜单列表的代码需要先通过HTML中的id属性获取到，才能对其进行控制。 使用JavaScript和CSS制作下拉菜单的过程并不难，只需要熟悉HTML、CSS和JavaScript的相关语法即可。无论是在网页设计中还是在web开发中，掌握制作下拉菜单的方法都是非常有用的，可以极大地提高页面的交互性和易用性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值