当前位置：文档之家 › 使用js和css实现网页导航栏的下拉菜单

使用js和css实现网页导航栏的下拉菜单

  • 格式：doc
  • 大小：30.00 KB
  • 文档页数：3

下载文档原格式

  / 3

合集下载

javascript+css实现3级导航菜单

javascript+css实现3级导航菜单

javascript+css实现3级导航菜单<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> ?</title><style>body {margin: 7px;font:12px Verdana, Arial, Helvetica, sans-serif;}* {list-style-type: none;margin: 0px;padding: 0px;border: thin none;}#nav {position: absolute;font-size: 9px;opacity: 0.8;}#nav a {display: block;width: 100px;height: 15px;padding: 3px 5px 12px;background: #666; color: #fff;text-decoration: none; }#nav a:hover { background: #333;}#nav li {width: 120px; height:30px; overflow:hidden; background: #ccc; padding-bottom: 3px; }#nav ul { position: absolute; margin-left: 110px; margin-top: -30px;}html>body #nav ul { margin-left: 119px; margin-top: -39px;}#nav ul {display: none;}#nav li.show ul { display: block;}#nav li.show li ul {display: none;}#nav li li.show ul {display: block;}</style><script language="javascript" type="text/javascript">function menuFix() {var sfEls = document.getElementById("nav").getElementsByTagName("li");for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=(this.className.length>0? " ": "") + "show";}sfEls[i].onmouseout=function() {this.className=this.className.replace(newRegExp("( ?|^)show\\b"), "");}}}window.onload=menuFix;</script></head><body><ul id="nav"><li><a href="#">nav item</a>.<ul><li><a href="#">nav item1</a>.<ul><li><a href="#">nav item</a>.</li> </ul></li><li><a href="#">nav item2</a>.<ul><li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul></li><li><a href="#">nav item3</a>.<ul><li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li><li><a href="#">nav item</a></li> </ul></li><li><a href="#">nav item4</a>.<ul><li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> <li><a href="#">nav item</a></li> </ul></li></ul></li></ul></body>。

HTML下拉导航菜单的实现：CSSJs的实现方案

HTML下拉导航菜单的实现：CSSJs的实现方案

HTML下拉导航菜单的实现：CSSJs的实现⽅案熟练使⽤导航栏，对于⽹站排版⾮常重要,使⽤css，js，jq等你可以转换成好看的导航栏⽽不是枯燥的html菜单。

css实现：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="Genarator" content="Sublime Text"/><meta name="description" content="菜单的实现" /><meta name="keywords" content="CSS实现，下拉菜单"/><title>CSS实现下拉菜单</title><style type="text/css">*{ margin:0px; padding:0px;}#menu{background-color:#eee;width:600px;height:40px;margin:0 auto;}ul{ list-style:none;}ul li{float:left;line-height:40px;text-align:center;position:relative;}a{text-decoration:none;color:#000;display:block;width:90px;}a:hover{color:#FFF;background-color:#666;}ul li ul li{float:none;border-left:none;margin-top:2px;background-color:#eee;}ul li ul{display:none;width:90px;position:absolute;}ul li:hover ul{ display:block;}</style></head><body><div id="menu"><ul><li><a href="#">⾸页</a></li><li><a href="#">课程⼤厅</a><ul><li><a href="#">JavaScript</a></li><li><a href="#">jQuery</a></li></ul></li><li><a href="#">学习中⼼</a><ul><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><li><a href="#">联系我们</a></li></ul></div></body></html>js实现<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="Genarator" content="Sublime Text"/><meta name="description" content="菜单的实现" /><meta name="keywords" content="JavaScript实现，下拉菜单"/><title>JavaScript实现下拉菜单</title><style type="text/css">*{ margin:0px; padding:0px;}body{font-family:Verdana, Geneva, sans-serif;font-size:14px;}#nav{width:600px;height:40px;background-color:#eee;margin:0 auto;}ul{ list-style:none;}ul li{float:left;line-height:40px;text-align:center;width:100px;}a{text-decoration:none;color:#000;display:block;}a:hover{color:#F00;background-color:#666;}ul li ul li{float:none;background-color:#eee;margin:2px 0px;}ul li ul{ display:none;}</style><script type="text/javascript">function displaySubMenu(li) {var subMenu = li.getElementsByTagName("ul")[0];subMenu.style.display = "block";}function hideSubMenu(li) {var subMenu = li.getElementsByTagName("ul")[0];subMenu.style.display = "none";}</script></head><body><div id="nav"><ul><li><a href="#">⾸页</a></li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">课程⼤厅</a> <ul><li><a href="#">JavaScript</a></li><li><a href="#">Html/CSS</a></li></ul></li><li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">学习中⼼</a> <ul><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><li><a href="#">联系我们</a></li></ul></div></body></html>jq实现：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="Genarator" content="Sublime Text"/><meta name="description" content="菜单的实现" /><meta name="keywords" content="JQuery实现，下拉菜单"/> <title>JQuery实现下拉菜单</title><style type="text/css">*{ margin:0px; padding:0px;}#menu{background-color:#eee;width:600px;height:40px;margin:0 auto;}ul{ list-style:none;}ul li{float:left;line-height:40px;text-align:center;position:relative;}a{text-decoration:none;color:#000;display:block;width:90px;}a:hover{color:#FFF;background-color:#666;}ul li ul li{float:none;border-left:none;margin-top:2px;background-color:#eee;}ul li ul{width:90px;position:absolute;left:0px;top:40px;display:none;}</style><script src="jquery-1.12.0.min.js"></script><script type="text/javascript">$(function(){$(".navmenu").mouseover(function(){$(this).children("ul").show();})$(".navmenu").mouseout(function(){$(this).children("ul").hide();})})</script></head><body><div id="menu"><ul><li><a href="#">⾸页</a></li><li class="navmenu"><a href="#">课程⼤厅</a><ul><li><a href="#">JavaScript</a></li><li><a href="#">jQuery</a></li></ul></li><li class="navmenu"><a href="#">学习中⼼</a><ul><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> <li><a href="#">联系我们</a></li> </ul></div></body></html>。

js导航栏多项点击显示下拉菜单代码

js导航栏多项点击显示下拉菜单代码

js导航栏多项点击显⽰下拉菜单代码<!DOCTYPE html><html><head><title>Dropdown</title><!--<link rel="stylesheet" href="style.css">--><!--<script src="https:///jquery/2.1.1/jquery.min.js"></script>--><!--<script src="js/jquery.min.js"></script>--><meta charset="utf-8"/><style type="text/css">body {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;}li {float: left;}li a, .dropbtn {display: inline-block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}li a:hover, .dropdown:hover .dropbtn {background-color: #1f75cf;}li.dropdown {display: inline-block;}.dropdown-content {display: none;position: absolute;background-color: #fafafa;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);}.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;text-align: left;}.dropdown-content a:hover {color: white;background-color: #1f75cf;}.show {display: block;}</style></head><body><ul><li class="dropdown"><a id="a" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 A</a><div class="dropdown-content" id="dropdown-a"><a href="#">下拉 1</a><a href="#">下拉 2</a><a href="#">下拉 3</a></div></li><li class="dropdown"><a id="b" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 B</a><div class="dropdown-content" id="dropdown-b"><a href="#">下拉 1</a><a href="#">下拉 2</a><a href="#">下拉 3</a></div></li></ul><script type="text/javascript">function showList(o) {//1.把其他的⼆级ul都隐藏，// hideList("dropdown-content" + o.id);//把其他的⼆级ul隐藏⽅式1hideList("dropdown-" + o.id);//把其他的⼆级ul隐藏⽅式2// hideList('');//2.再切换⾃⼰的show。

CSS+div下拉菜单(js)

CSS+div下拉菜单(js)

CSS+div:下拉菜单详解之前由于没有用到下拉菜单，一直没去实践（只在刚学建站时用DW做了一个，无代码亲自操作经历），今天终于抽出时间做了一个下拉菜单，IE6、IE7、/FF 下通用不变形，其实这个很基础，但对于往标准化转变有很好的促进作用。

先把关键点和思路摘录一下：1、结构布局：在菜单版块上，下拉的菜单也是放在UL中，但必需要嵌套在其父级的LI中，如下<div id=”nav”><ul id=”nav_top”><li id=”nav_index”><a href=”/”>首页</a></li><li><a href=”#”>CSS专栏</a><ul><li><a href=”#”>CSS基础</a></li><li><a href=”#”>CSS常用代码</a></li><li><a href=”#”>CSS高级技术</a></li></ul></li>… …</div>在这样的结构中，上层的DIV等标签不能用overflow:hidden; ，否则下拉菜单会出不来。

我清晰的记得，刚学DW建站的第一个月，就用DW做了一个下拉菜单，但现在回去去看，那个更多依靠的是JS，有时定位不准会产生下拉菜单跑位。

而这样嵌套后，一会通过定位，就不会偏移。

在实际应用时，nav可以加入LOGO 等内容，而nav_top才是用于控制菜单。

2、样式继承：由于在CSS中的组合选择符，会对其下的同样子标签会赋予同样的样式特征，因此，当我们对第一层的UL和LI定义时，下拉部分也会被带上同样的样式，先不管这个，最后再去修正下拉部分的UL和LI。

原生JS实现导航下拉菜单效果

原生JS实现导航下拉菜单效果

原⽣JS实现导航下拉菜单效果这个导航下拉菜单需要实现的功能是：下拉菜单的宽度与浏览器视⼝的宽度⼀样宽；⼀级导航只有两项，当⿏标移到⼀级导航上的导航项时，相应的⼆级导航出现。

在本案例中通过改变⼆级导航的⾼度来实现⼆级导航的显⽰和消失。

为了便于理解我画了⼀个图，如下：在这个案例主要⽤到的知识有：设置定时器，清除定时器，mouseout和mouseover事件，另外还有css中position相关知识。

本案例分为两部分讲解。

第⼀部分html和css，第⼆部分js。

⼀. html和css将导航这个导航条包裹在⼀个div中，这个div的position值为relative，⾼度为50px（导航条的⾼度为50px），宽度为100%，将最外层的div的position属性设置为relative是因为⼆级导航要根据这个div来定位。

这个导航条的结构是⼆级嵌套⽆序列表。

每⼀个⼀级导航项li都嵌套了它对应的⽆序列表。

需要将嵌套的⽆序列表移除⽂档流。

所以嵌套的⽆序列表的position值为absolute，top：50px（导航条的⾼度）。

left：0；right：0；通过设置这些值可以使嵌套的⽆序列表宽度为浏览器视⼝的宽度。

通过将li的display值设置inline-block并且将外层div的text-align设置为center使得导航项居中显⽰。

注：在这个案例中⼀定要将嵌套的⽆序列表的position的值设置为absolute，使它移除⽂档流。

html和css代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>下拉菜单</title><link rel="stylesheet" type="text/css" href="index.css" rel="external nofollow" ></head><body><div class='header'><ul class='outer' id='outer'><li class='outerList' id='outerList1'><a href='#' id='link1' class='link'>产品<span></span></a><ul class='inter' id='inter1'><li><a href='#'><img src='img/01fea55541ed73000001714a430253.jpg'><strong>纳斯</strong></a></li><li><strong>纯⾊</strong></a></li><li><a href='#'><img src='img/⽩胡⼦.jpg'><strong>保温杯</strong></a></li><li><a href='#'><img src='img/宠物.jpg'><strong>设计周边</strong></a></li></ul></li><li class='outerList' id='outerList2'><a href='#' id='link2' class='link'>服务<span></span></a> <ul class='inter' id = 'inter2'><li><a href='#'><img src='img/狮⼦座.jpg'><strong>售后服务</strong></a></li><li><a href='#'><img src='img/莲花禅.jpg'><strong>设计师</strong></a></li></ul></li></ul></div><script type="text/javascript" src='index.js'></script></body></html>css代码如下：*{padding: 0;margin: 0;}.header{position: relative;width: 100%;height: 50px;background-color: #000000;text-align: center;z-index: 2;}.header .outer li{display: inline-block;list-style: none;}.outerList{height: 50px;line-height: 50px;}.outerList a{display: block;padding: 0 15px;color: #fff;text-decoration: none;}.outerList:hover a{color: #EDECEC;}.outerList .link span{display: block;height: 0;position: relative;top: -10px;left: 0;background-color: #fff;}.outerList:hover .link span{height: 1px;}.outerList .inter{position: absolute;left: 0;height: 0;overflow: hidden;top: 50px;right: 0;background-color:rgba(0,0,0,0.5);}.outerList .inter li{margin-top: 30px;}.outerList .inter strong{display:block;height: 25px;line-height: 25px;text-align: center;}⼆. js部分在js部分涉及到的知识主要有：设置定时器，清除定时器，mouseout和mouseover事件。

javascript仿京东导航左侧分类导航下拉菜单效果

javascript仿京东导航左侧分类导航下拉菜单效果

javascript仿京东导航左侧分类导航下拉菜单效果本⽂实例为⼤家分享了类似于京东、淘宝商城左侧分类导航下拉菜单，供⼤家参考，具体内容如下效果图：实现代码：<!DOCTYPE html><html><head><meta charset="gb2312"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><style>*{margin:0;padding:0;}.ul{position:relative;width:200px;height:auto;}.ul li{height:24px;line-height:24px;border-bottom:1px solid #ddd;text-align:center;font-size:12px;}.ul li a{display:block;background:#fff;color:#000;text-decoration:none;}.ul li a:hover{display:block;background:#000;color:#fff;text-decoration:none;}.ul li div{display:none;width:400px; height:auto;position:absolute;top:0;left:200px; background:#000; color:#fff;}.ul li div dl dd{float:left; width:100px;}.ul .liname div{display:block;}</style><script>window.onload=function(){var aLi=document.getElementsByTagName("li");for(var i=0;aLi.length>i;i++){aLi[i].i=i;aLi[i].onmouseover=function(){this.className="liname";var h1=this.i*25;var h2=this.getElementsByTagName("div")[0].offsetHeight;if(h2<h1){this.getElementsByTagName("div")[0].style.top=h1+'px';}}aLi[i].onmouseout=function(){this.className="";}}}</script></head><body><ul class="ul"><li><a href="">类别1</a><div class="div"><dl><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd></dl></div></li><li><a href="">类别2</a><div class="div"><dl><dd>类别2</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd></dl></div></li><li><a href="">类别3</a><div class="div"> <dl><dd>类别3</dd></dl></div></li><li><a href="">类别4</a><div class="div"> <dl><dd>类别4</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd></dl></div></li><li><a href="">类别5</a><div class="div"> <dl><dd>类别5</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd></dl></div></li><li><a href="">类别6</a><div class="div"> <dl><dd>类别6</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd></dl></div></li><li><a href="">类别7</a><div class="div"> <dl><dd>类别7</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd></dl></div></li><li><a href="">类别8</a><div class="div"><dl><dd>类别8</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd></dl></div></li></ul></body></html>希望本⽂所述对⼤家学习javascript程序设计有所帮助。

网页导航下拉菜单原理

网页导航下拉菜单原理网页导航下拉菜单是一种常见的网页导航方式，通过鼠标悬停或点击触发下拉菜单的展开和收起，方便用户快速导航到其他页面或功能模块。

下面我将详细介绍网页导航下拉菜单的原理。

1. HTML结构：网页导航下拉菜单通常使用无序列表（ul）和列表项（li）来构建。

列表项下面可以嵌套其他列表项作为二级菜单，形成多级下拉菜单。

每个列表项的文本用超链接（a标签）来表示导航链接。

2. CSS样式：通过CSS样式对导航菜单进行外观设计，包括背景颜色、字体大小和颜色、边框样式等。

可以设置列表项为浮动（float）或者行内块（display: inline-block）来实现多列的布局效果。

对于下拉菜单，可以使用绝对定位（position: absolute）将其隐藏，等到鼠标悬停或点击时再设置为显示（display: block）。

3. JavaScript交互：下拉菜单的交互效果可以使用JavaScript来实现。

当鼠标悬停或点击菜单项时，通过添加或移除CSS类来改变菜单的显示状态。

这可以通过JavaScript的事件监听机制来实现。

例如，可以监听鼠标移入（mouseover）和移出（mouseout）事件来触发菜单的显示和隐藏，或者监听点击（click）事件来实现点击展开和收起功能。

4. 下拉菜单的显示与隐藏：当鼠标悬停在一个导航菜单项上时，通过JavaScript添加一个CSS类，将下拉菜单设置为显示（display: block），从而展开下拉菜单。

当鼠标离开菜单项时，通过移除该CSS类，将下拉菜单设置为隐藏（display: none），实现收起下拉菜单的效果。

5. 多级下拉菜单的实现：对于多级下拉菜单，可以通过层级嵌套的方式来构建。

当鼠标悬停在一级菜单项上时，通过JavaScript添加一个CSS类来显示二级菜单，同时隐藏其他二级菜单。

当鼠标离开一级菜单项时，通过移除该CSS类来隐藏二级菜单。

js实现前端界面导航栏下拉列表

js实现前端界⾯导航栏下拉列表本⽂实例为⼤家分享了js实现前端界⾯导航栏下拉列表的具体代码，供⼤家参考，具体内容如下先来看成果图html代码：<nav><ul class="nav"><li class="dropDowm"><a href="javascript:;" class="dropdown-toggle">列表⼀</a><ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;"> <li><a href="#" >概述</a></li><li><a href="#" >概述</a></li><li><a href="#" >概述</a></li><li><a href="#" >概述</a></li><div class="ulbg"></div></ul></li><li class="dropDowm"><a href="javascript:;" class="dropdown-toggle">列表⼆</a><ul class="dropdown-menu" style="display: none;height: 145px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;"> <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><div class="ulbg"></div></ul></li><li class="dropDowm"><a href="javascript:;" class="dropdown-toggle">列表三</a><ul class="dropdown-menu" style="display: none;height: 145px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;"> <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><div class="ulbg"></div></ul></li><li class="dropDowm"><a href="javascript:;" class="dropdown-toggle">列表四</a><ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;"> <li><a href="#" >概述</a></li><li><a href="#" >概述</a></li><li><a href="#" >概述</a></li><li><a href="#" >概述</a></li><div class="ulbg"></div></ul></li><li class="dropDowm"><a href="javascript:;" class="dropdown-toggle">列表五</a><ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;"> <li><a href="#" >概述</a></li><li><a href="#" >概述</a></li><li><a href="#" >概述</a></li><li><a href="#" >概述</a></li><div class="ulbg"></div></ul></li><li class="dropDowm"><a href="javascript:;" class="dropdown-toggle">列表六</a><ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;"> <li><a href="#" >概述</a></li><li><a href="#" >概述</a></li><li><a href="#" >概述</a></li><li><a href="#" >概述</a></li><div class="ulbg"></div></ul></li><li class="dropDowm"><a href="javascript:;" class="dropdown-toggle">列表七</a><ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;"> <li><a href="#" >概述</a></li><li><a href="#" >概述</a></li><li><a href="#" >概述</a></li><li><a href="#" >概述</a></li><div class="ulbg"></div></ul></li></ul></nav>css代码：nav {background-color: #efe5e5;width: 77%;}.nav{height: 50px;width: 100%;display: flex;}.nav .dropDowm{float: left;width: 14%;list-style: none;}.nav .dropDowm>a{text-decoration: none;margin: 12px;line-height: 3;}.nav .dropDowm .dropdown-menu{background-color: #848d9e;}.nav .dropDowm .dropdown-menu>li{list-style: none;display: block;}.nav .dropDowm .dropdown-menu>li>a{text-decoration: none;display: block;font-size: 16px;line-height: 28px;}最重要的是js代码利⽤js代码控制$(function(){$('.nav .dropDowm').hover(function(e) {$(this).find('ul').stop().slideToggle();});});简短介绍：slideToggle() ⽅法通过使⽤滑动效果（⾼度变化）来切换元素的可见状态。

Bootstrap4导航菜单及下拉菜单制作

Bootstrap4导航菜单及下拉菜单制作Bootstrap是一个开源的前端框架，为我们提供了丰富的组件和工具，可以帮助我们快速构建现代化的网页设计。

其中，导航菜单和下拉菜单是网页中常见的元素，本文将介绍如何利用Bootstrap4来制作导航菜单及下拉菜单。

一、创建基础导航菜单在使用Bootstrap4制作导航菜单之前，我们需要先引入Bootstrap的相关资源文件，包括bootstrap.min.css和bootstrap.min.js。

接下来，我们可以利用以下代码创建一个简单的导航菜单：<div class="navbar"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">首页</a></li><li class="nav-item"><a class="nav-link" href="#">关于我们</a></li><li class="nav-item"><a class="nav-link" href="#">产品展示</a></li><li class="nav-item"><a class="nav-link" href="#">联系我们</a></li></ul></div>以上代码中，我们使用了Bootstrap提供的.navbar和.navbar-nav类来设置导航菜单的基本样式，每个菜单项使用.nav-item类，链接文字使用.nav-link类。

js+css实现三级导航菜单

js+css实现三级导航菜单本⽂实例为⼤家分享了js+css实现三级导航菜单的具体代码，供⼤家参考，具体内容如下导航菜单hover事件⽤css实现相对容易，只需要将透明度更改即可，如果想要菜单有⼀个渐变的效果，然⽽可惜的是transition并不⽀持display，所以⽤opacity实现效果完全相同。

下⾯是⽤css实现的完整代码：<!DOCTYPE html><html><head><meta charset="utf-8" /><title>三级导航菜单</title></head><style>*{margin: 0;padding: 0;}body{font-size: 16px;background-color:#EDEDED ;font-style: inherit;color:#757576 ;}.main{width: 1050px;margin: 0 auto;}.fl{float: left;}.fr{float: right;}a{text-decoration: none;outline: none;color:#757576 ;}ul,ol{list-style: none;}.clear{clear: both;}.clearfix{*zoom:1;}li{float: left;display: inline-block;width: 120px;height: 40px;text-align: center;line-height: 40px;}li a:hover{color: red;}#frist {opacity: 0;}#frist li{float: none;position: relative;}li a:hover{color: red;transition: all 0.5s;}:hover{transition: all 2s;}#second {opacity: 0;margin: -40px 0 0 80px;padding: 0px;position: absolute;}#nav_one:hover #frist{opacity:1;transition: all 2s;}#nav_two:hover #second{opacity:1;transition: all 2s;}</style><body><div class="nav main"><ul id="nav"><li id="nav_one"><a href="#" >⼀级</a><ul id="frist"><li id="nav_two" class="nav_two"><a href="#" >⼆级</a><ul id="second"><li><a href="#" >三级</a></li><li><a href="#" >三级</a></li><li><a href="#" >三级</a></li></ul></li><li class="nav_two"><a href="#" >⼆级</a></li><li class="nav_two"><a href="#" >⼆级</a></li></ul></li><li><a href="#" >⼀级</a></li><li><a href="#" >⼀级</a></li><li><a href="#" >⼀级</a></li><li><a href="#" >⼀级</a></li></ul></div></body></html>js实现的相对⿇烦⼀点，但也可以，代替了css中hover效果。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<!DOCTYPE html>
<html>
<head>
<title>JavaScript下拉菜单</title>
<style type="text/css">
body{
font-family:verdana, sans-serif;
}
#navigation{
margin:20px;
list-style-type:none; /*项目符号无*/
}
#navigation li ul{
list-style-type:none;
display:none; /*子表初始时不显示*/
position:absolute; /*绝对定位，他是参照浏览器的左上角，默认相对父元素绝对定位，绝对定位元素自然的层叠于文本流之上*/
top:40px; /*距父元素位置的高度*/
left:0; /*距父元素的左距*/
margin-left:0px; /*子表的外边距为0，是子表与父表对齐*/
padding-left:0px; /*子表的外表距为0，是子表与父表对齐*/
margin-top:1px;
width:150px; /*子表的宽度*/
}
#navigation li{
text-align:center;
float:left; /*表项自左向右排序*/
position:relative; /*参照父级的原始点为原始点进行相对定位；对象不可层叠、不脱离文档流*/
}
#navigation li a:link,#navigation li a:visited
{
display:block;
text-decoration:none; /*文本强调，无下划线*/
background:#5577ee;
color:#FFFFFF;
width:150px;
height:40px;
line-height:40px; /*行高*/
border:1px solid #fff; /*边框*/
border-width:1px 1px 0 0;
}
#navigation li a:hover
{
color:#ffffff;
background:#dd3300;
}
#navigation li ul li a:hover
{
color:#ffffff;
background:#00dd33;
}
</style>
<script type="text/javascript">
function ShowSubMenu(li)
{
var subMenu=li.getElementsByTagName("ul")[0];
subMenu.style.display="block";
}
function HideSubMenu(li)
{
var subMenu=li.getElementsByTagName("ul")[0];
subMenu.style.display="none";
}
</script>
<body>
<center>
<ul id="navigation">
<li><a href="#">菜单一</a></li>
<li onmouseover="ShowSubMenu(this)" onmouseout="HideSubMenu(this)"><a href="#">菜单二</a>
<ul>
<li><a href="#">菜单二-子菜单1</a></li>
<li><a href="#">菜单二-子菜单2</a></li>
<li><a href="#">菜单二-子菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单三</a></li>
<li onmouseover="ShowSubMenu(this)" onmouseout="HideSubMenu(this)"><a href="#">菜单
四</a>
<ul>
<li><a href="#">菜单四-子菜单1</a></li>
<li><a href="#">菜单四-子菜单2</a></li>
<li><a href="#">菜单四-子菜单3</a></li>
<li><a href="#">菜单四-子菜单4</a></li>
</ul>
</li>
</ul>
</center>
<br><br><br>
<p align="center">Hello Menu!</p>
</body>
</html>。