用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开发 ...
随机推荐
- git 分支的创建和切换
每次提交,GIT 都会将他们串成一个时间线,截止到目前,只有一个时间线,GIT里叫这个分支为主分支,叫master,HEAD指向master,master指向提交,HEAD指向当前的分支. 一开始的时 ...
- RoCE vs iWARP
两种以太网 RDMA 协议: iWARP 和 RoCE 转载 2017年03月08日 16:10:09 1510 http://weibo.com/p/1001603936363903889917?m ...
- Linux内核哈希表分析与应用
目录(?)[+] Linux内核哈希表分析与应用 Author:tiger-johnTime:2012-12-20mail:jibo.tiger@gmail.comBlog:http:// ...
- RPG难题
/* 人称“AC女之杀手”的超级偶像LELE最近忽然玩起了深沉,这可急坏了众多“Cole”(LELE的粉丝,即"可乐"),经过多方打探,某资深Cole终于知道了原因,原来,LELE ...
- iOS.Location-Based Service
基于位置区域的服务 1. 背景 Ref[1] 在iOS设备锁屏的状态下,App的icon会出现在屏幕的左下角. iOS 8 Feature: Location-based Lockscreen App ...
- linux中的设备类型
loop设备 loop设备 一.参考命令[root@localhost a]# losetup usage: losetup loop_device ...
- c sharp multithreading
1. 静态方法 using System; using System.Threading; namespace PlusThread { class Program { static void Ma ...
- 我的MVP呢?
Ladies and gentelmen, welcome the MVP of NBA 16-2017 Season:... 呃,等下,好像哪里不对.那是因为,我要说的MVP根本就不是Most Va ...
- c++11 时间相关操作练习
博客和书籍资料 来自该地址 https://www.cnblogs.com/qicosmos/category/490693.html 自行编写相应代码进行学习 // TimeTest.cpp: 定义 ...
- 移动端300ms延迟由来及解决方案
1.300ms延迟由来 300 毫秒延迟的主要原因是解决双击缩放(double tap to zoom).双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页 ...