用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开发 ...
随机推荐
- mySLQ数据库 练习题
MySQL 练习题1 DROP TABLE IF EXISTS `liuyan`; CREATE TABLE `liuyan` ( `id` int(11) NOT NULL AUTO_INCREME ...
- RabbitMQ消息队列(一):详细介绍
1. 历史 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然在同步消息通讯的世界里有 ...
- Luogu 2279 [HNOI2003]消防局的设立 - 贪心
Description 给定一棵树形图, 建若干个消防站, 消防站能够覆盖到距离不超过2的点, 求最少需要建几个消防站才能覆盖所有点 Solution 从深度最深的点开始, 在它的爷爷节点上建, 每建 ...
- 20172306《Java程序设计与数据结构》第十周学习总结
20172306<Java程序设计>第十周学习总结 教材学习内容总结 本章主要的讲的是集合有关的知识: 1.集合与数据结构 - 集合是一种对象,集合表示一个专用于保存元素的对象,并该对象还 ...
- Netty 源码 ChannelHandler(四)编解码技术
Netty 源码 ChannelHandler(四)编解码技术 Netty 系列目录(https://www.cnblogs.com/binarylei/p/10117436.html) 一.拆包与粘 ...
- [Hbase]Hbase章1 Hbase框架及基本概念
Hbase框架介绍 HBase是一个分布式的.面向列的开源数据库. 不同点: l 和一般的关系数据库不同,hbase是一个适合于非结构化数据存储的数据库. l Hbase是基于列而不是基于行的模式 ...
- js实现环形菜单效果
点击中间的圆点,会弹出环形菜单,效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- Java学习笔记:注解Annotation
annotation的概念 In the Java computer programming language, an annotation is a form of syntactic metada ...
- mui-手动触发下拉刷新
mui-手动触发下拉刷新 下拉刷新结束 mui官方文档中下拉刷新结束方法,不生效, 文档地址 1 mui('#refreshContainer').pullRefresh().endPulldow ...
- java数组元素倒置
package dataStructure; import java.util.Arrays; import java.util.ArrayList; public class Test1 { sta ...