用jquery制作一个二级导航下拉菜单
1使用$(function(){...})获取到想要作用的HTML元素。
2通过使用children()方法寻找子元素。
3通过使用show()方法来显示HTML元素。
4通过使用hide()方法来隐藏HTML元素。
5jQuery库引用方法:将jQuery库下载到电脑上,然后引用。
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
body部分
<
div
id
=
"nav"
class
=
"nav"
>
<
ul
>
<
li
><
a
href
=
"#"
>一级导航</
a
></
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
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
>
</
ul
>
</
div
>
*{
margin
:
0
;
padding
:
0
;
}
.nav{
background-color
:
#EEEEEE
;
height
:
40px
;
width
:
450px
;
margin
:
0
auto
;
}
ul{
list-style
:
none
;
}
ul li{
float
:
left
;
line-height
:
40px
;
text-align
:
center
;
}
a{
text-decoration
:
none
;
color
:
#000000
;
display
:
block
;
width
:
90px
;
height
:
40px
;
}
a:hover{
background-color
:
#666666
;
color
:
#FFFFFF
;
}
ul li ul li{
float
:
none
;
background-color
:
#EEEEEE
;
}
ul li ul{
display
:
none
;
}
ul li ul li a:hover{
background-color
:
#009933
;
}
/*:hover 选择器用于选择鼠标指针浮动在上面的元素。*/
$(
function
(){
$(
".navmenu"
).mouseover(
function
(){
$(
this
).children(
"ul"
).show();
})
$(
".navmenu"
).mouseout(
function
(){
$(
this
).children(
"ul"
).hide();
})
})
用jquery制作一个二级导航下拉菜单的更多相关文章
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- jQuery实现一个淡入淡出下拉菜单 非常简易
前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...
- js二级导航下拉菜单
<!DOCTYPE html> <html> <head> <title>导航列表</title> <meta http-equiv= ...
- (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类: 前端技术 ...
- 用原生JS实现的一个导航下拉菜单,下拉菜单的宽度与浏览器视口的宽度一样(js+html+css)
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
- MDNavBarView下拉导航菜单(仿美团导航下拉菜单)
说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...
- jQuery插件:模拟select下拉菜单
没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...
- 兼容ie7的导航下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于jQuery带图标的多级下拉菜单
之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...
随机推荐
- 自定义标签tld的使用
在JSP中使用标签是很平常的事情,在制作自定义标签时,通常都需要写tld文件来定义标签的各种属性,对应的Java类,前缀等等.标签与tld文件紧紧相连,那么,到底应该怎么放置tld文件?在web.xm ...
- C++中stl的map
总结: 在map中插入数据有三种方法: 1.用insert插入pair数据: mapstudent.insert(pair<int,string>(1,"studentone&q ...
- PAT 1021 个位数统计 (15)(C++&Java&Python)
1021 个位数统计 (15)(15 分) 给定一个k位整数N = d~k-1~*10^k-1^ + ... + d~1~*10^1^ + d~0~ (0<=d~i~<=9, i=0,.. ...
- holiday(假期)_题解
holiday(假期) —— 一道妙题(codevs3622) Description 经过几个月辛勤的工作,FJ 决定让奶牛放假.假期可以在1…N 天内任意选择一段(需要连续),每一天都有一个享 ...
- 还没有写完准备弡上cpickle 还有字典
#!/usr/bin/python #Filename: cpickle.py import cPickle as p import os shoplistfile="shoplist.da ...
- 让eclipse调试和豌豆荚并存
豌豆荚有一个设置 设置->高级设置->开发者模式 勾上开发者模式 确定. 你什么手机的驱动都不用安装了. 就可以直接使用豌豆荚,也可以使用eclipse进行调试.
- Eigen中的map
Map类用于通过C++中普通的连续指针或者数组 (raw C/C++ arrays)来构造Eigen里的Matrix类,这就好比Eigen里的Matrix类的数据和raw C++array 共享了一片 ...
- EditText输入小数
edtValue.setInputType(InputType.TYPE_CLASS_NUMBER | InputType.TYPE_NUMBER_FLAG_DECIMAL);
- 【转】先说IEnumerable,我们每天用的foreach你真的懂它吗?
[转]先说IEnumerable,我们每天用的foreach你真的懂它吗? 我们先思考几个问题: 为什么在foreach中不能修改item的值? 要实现foreach需要满足什么条件? 为什么Linq ...
- 解疑网络监控卡壳 视觉体验400ms延时
http://security.zol.com.cn/413/4130220.html 我的眼睛可以轻松判断出400ms延时误差,你可以吗?很多用户都反映手机移动监控.PC远程监控视频会卡顿,抛开设备 ...