用JS制作水平下拉菜单

最新推荐文章于 2020-08-22 13:52:08 发布

七里香777

最新推荐文章于 2020-08-22 13:52:08 发布

阅读量394

点赞数

分类专栏：笔记 # CSS 文章标签： html js

本文链接：https://blog.csdn.net/weixin_44286392/article/details/107773978

版权

笔记同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

CSS

15 篇文章 0 订阅

订阅专栏

水平下拉菜单。一般用于网页中的导航栏。
效果图：
在这里插入图片描述

源码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用JS制作水平下拉菜单</title>
	<style>
	*{padding:0px;margin:0px;}
	header{background:#8f0;
		   width:100%;
		   height:100px;
		   margin-bottom:3px;
		   position:relative;
		   }
	 section{
		   width:100%;
		   height:600px;
		}
	#a1{background:cyan;
		width:30%;
		height:600px;
		float:left;
		margin-right:5px;
	    }
	#a2{background:#d45;
		width:39.5%;
		height:600px;
		float:left;
	}
	aside{background: purple;
		  width:29.5%;
		  height:600px;
		  float:right;
		}
	footer{background:#a50;
		   width:100%;
		   height:100px;
		   clear:both;
		   margin-top:5px;
		}
	nav{position:absolute;
		left:200px;
		top:55px;
	}

	ul{list-style: none;}
	ul li{float:left;}
	ul li a{text-align:center;
		display:block;
		text-decoration: none;
			background:#05f;
			color:#fff;
			font-weight: bold;
			height:40px;
			line-height:40px;
			margin-right: 1px;
			padding:0px 10px; 
	}
	ul li a:hover{background:#f90;}
	ul li ul{margin-top:1px;display:none;}
	ul li ul li{float:none;}
	ul li ul li a{border-bottom:1px solid white;}
	/*ul li:hover ul{display:block;}*/
	</style>
</head>
<body>
	
	<header>
		<nav>
			<ul>
				<li><a href="#">学校概况</a></li>
				<li><a href="#">管理机构</a></li>
				<li onmouseover=showmenu(this) onmouseout=hidemenu(this)><a href="#">院系设置</a>
					<ul >
						<li><a href="#">电气学院</a></li>
						<li><a href="#">安全学院</a></li>
						<li><a href="#">材料学院</a></li>
						<li><a href="#">能源学院</a></li>
						<li><a href="#">计算机学院</a></li>
						<li><a href="#">资环学院</a></li>
					</ul>
				</li>
				<li><a href="#">招生就业</a></li>
				<li><a href="#">科学研究</a></li>
			</ul>
		</nav>
	</header>
	
	<section>
		<article id="a1"></article>
		<article id="a2"></article>
		<aside></aside>
	</section>
	<footer></footer>

	<script >
		function showmenu(obj){
			var submenu=obj.getElementsByTagName("ul")[0];
			submenu.style.display="block";
		}

		function hidemenu(obj){
			var submenu=obj.getElementsByTagName("ul")[0];
			submenu.style.display="none";
		}
	</script>
</body>
</html>

要点：注意ul与li的关系；及其网页每一部分的划分，是否浮动，是相对定位还是绝对定位。

七里香777

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
用JS制作水平下拉菜单

水平下拉菜单。一般用于网页中的导航栏。效果图：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用JS制作水平下拉菜单</title> <style> *{padding:0px;margin:0px;} header{background:#8f0; width:100%; height:
复制链接

扫一扫