一、案例描述

鼠标经过导航栏出现下拉菜单。

二、案例效果演示

三、案例局部代码

css代码：

<style>* {margin: 0;padding: 0;}a {text-decoration: none;color: #000;}ul {list-style: none;}.nav {text-align: center;overflow: hidden;}.nav>li {float: left;}.nav>li>a {border: 1px solid rgb(199, 186, 6);display: block;width: 130px;}.nav ul {background-color: rgb(199, 186, 6);line-height: 30px;display: none;}.nav ul>li:hover {background-color: yellow;}
</style>

html代码：

<div id="content"><ul class="nav"><li><a href="#">动漫</a><ul><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><ul><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><ul><li><a href="#">《少年的你》</a></li><li><a href="#">《奇迹笨小孩》</a></li><li><a href="#">《长津湖》</a></li></ul></li></ul>
</div>

js代码：

<script>// 获取元素var nav = document.querySelector('.nav');var lis = nav.children;console.log(nav);// 循环注册事件for (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function() {this.children[1].style.display = 'block'; //里面的ul是他的第二个孩子}lis[i].onmouseleave = function() {this.children[1].style.display = 'none'; //里面的ul是他的第二个孩子}}
</script>

四、案例整体代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新浪微博下拉菜单</title><style>* {margin: 0;padding: 0;}a {text-decoration: none;color: #000;}ul {list-style: none;}.nav {text-align: center;overflow: hidden;}.nav>li {float: left;}.nav>li>a {border: 1px solid rgb(199, 186, 6);display: block;width: 130px;}.nav ul {background-color: rgb(199, 186, 6);line-height: 30px;display: none;}.nav ul>li:hover {background-color: yellow;}</style>
</head><body><div id="content"><ul class="nav"><li><a href="#">动漫</a><ul><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><ul><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><ul><li><a href="#">《少年的你》</a></li><li><a href="#">《奇迹笨小孩》</a></li><li><a href="#">《长津湖》</a></li></ul></li></ul></div><script>// 获取元素var nav = document.querySelector('.nav');var lis = nav.children;console.log(nav);// 循环注册事件for (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function() {this.children[1].style.display = 'block'; //里面的ul是他的第二个孩子}lis[i].onmouseleave = function() {this.children[1].style.display = 'none'; //里面的ul是他的第二个孩子}}</script>
</body></html>

五、总结

索引值都是从0开始，所以children[1]代表的是第二个孩子。

javascript案例10——下拉菜单相关推荐

JavaScript案例——实现下拉菜单
可以利用键盘上下键进行选取,回车键进行选中思路: 1.获取网页元素 2.输入框获取焦点时显示下拉菜单 3.输入框失去焦点时隐藏下拉菜单 4.键盘上下方向键选择下拉菜单 5.回车键把当前选中菜单文字写 ...
JavaScript实现select下拉菜单省份和城市的级联菜单
使用JavaScript中变量定义省份及对应的城市,应用select标签对象,实现二级级联的下拉菜单选中效果.即在省份下拉菜单中选中一个省份时,在城市下拉菜单中出现该省份对应的城市. HTML代码: ...
javascript 二级动态下拉菜单选项
</tr> <script language = "JavaScript"> var onecount2; subcat2 = new Array(); o ...
JavaScript操作select下拉菜单全集合
// 1.判断select选项中是否存在Value="paraValue"的Item function jsSelectIsExitItem(objSelect, objItem ...
【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例
展开&收起动画&案例 HTML DOM overflow 属性展开 slideDown(毫秒, 完成回调函数) 收起 slideUp(毫秒, 完成回调函数) 切换 slideTogg ...
简单下拉菜单html,JavaScript简单下拉菜单实例代码
本文实例讲述了JavaScript简单下拉菜单实例代码.分享给大家供大家参考.具体如下: 这是一款JavaScript实现的下拉菜单演示代码,带渐变效果的CSS+jQuery菜单,向下滑出型的菜单,最 ...
ASP二级联动下拉菜单
ASP+JavaScript+数据库级联下拉菜单 <!-- *********************************** ASP+JavaScript+数据库级联下拉菜单 **** ...
html语言无序下拉菜单,(4条消息)HTML语言标记详解
开发过Android的同学都知道,Android应用程序中的界面是由一个个控件组合而成的,比如说按钮控件,图片控件,文本输入框控件等.HTML语言的标记就可以理解成控件的标记,一个标记指定了一个控件, ...
html中按钮下拉菜单,Bootstrap3.0学习笔记之按钮与下拉菜单
前面的文章算是把Bootstrap CSS部分简单的学习了一遍,应该忽视了比较多的细节问题.不过大部分的内容我都过了一遍,并且用代码实现了一遍,而且看到了真实的效果.挺不错的.那么接下来的几篇文章主要 ...
Bootstrap下拉菜单
前面的话网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...

javascript案例10——下拉菜单

一、案例描述

二、案例效果演示

三、案例局部代码

css代码：

html代码：

js代码：

四、案例整体代码

五、总结

javascript案例10——下拉菜单相关推荐

最新文章

热门文章