二级下拉菜单(CSS|JavaScript|JQuery)分别实现

最新推荐文章于 2024-06-24 09:00:00 发布
最新推荐文章于 2024-06-24 09:00:00 发布
阅读量2.1k 收藏 17
点赞数 2
分类专栏： 计算机 编程 开发 前端 文章标签： HTML CSS JavaScript JQuery 二级下拉菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/donglingjiu/article/details/80986118
版权
计算机 同时被 3 个专栏收录
110 篇文章 0 订阅
订阅专栏
开发
73 篇文章 0 订阅
订阅专栏
编程
17 篇文章 0 订阅
订阅专栏

二级下拉菜单

一、HTML/CSS方法实现下拉菜单

i. 思路:

1. 静态网页的制作

 

 


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

 

<style type="text/css">

*{

margin:0;

padding:0;

}

#nav{

background-color: #eee ;

width:810px;

height:45px;

margin:0 auto;

}

ul{

/*去除默认样式*/

list-style: none ;

 

}

ul li{

/*宽度自适应*/

float:left;

line-height: 45px;

text-align: center ;

/*二级菜单相对于此*/

position: relative;

 

}

a{

text-decoration: none ;

color:#000;

padding:0 10px;

display:block;

padding:0 10px;

}

a:hover{

color:#fff;

background-color: #aaa ;

}

/*二级菜单*/

ul li ul li{

float:none;

background-color: #eee ;

margin-top: 2px;

}

ul li ul{

/*

绝对定位

相对于父级 默认浏览器

 

*/

position: absolute;

left:0;

top:45px;

}

/*二级菜单的样式*/

ul li ul li a:hover{

background-color: #06F ;

}

</style>

</head>

<body>

 

<div id="nav">

<ul>

<li><a href="#">AAAAA</a>

<ul>

<li><a href="#">Java</a></li>

<li><a href="#">JavaScript</a></li>

<li><a href="#">PHP</a></li>

<li><a href="#">Mysql</a></li>

</ul>

</li>

<li><a href="#">BBBBB</a></li>

<li><a href="#">CCCCC</a></li>

<li><a href="#">DDDDD</a></li>

<li><a href="#">EEEEE</a></li>

</ul>

</div>

</body>

</html>

 

2. 动态特效的实现---下拉菜单的显示和隐藏

a) CSS方法实现

i. 思路:

1. 先让二级菜单隐藏  display:none ;

2. 父级li:hover  ul{display:block;}

 

b) JQuery方法实现

i. $(function(){})

ii. children()方法找子元素

iii. show()方法显示HTML元素

iv. hide()方法隐藏HTML元素

v. 思路：

1. 引入JQuery库文件

2. Mouseover() |mouseout()

 


 

c) JavaScript方法实现

i. Onmouseover()鼠标经过事件

ii. Onmouseout()鼠标离开事件

iii. getElementsByTagName() 获得一组标签 getElementById()...

 


 

<!-- this指的是当前对象 -->

<li οnmοuseοver="showMenu(this);" οnmοuseοut="hideMenu(this)"><a href="#">AAAAA</a>

<ul>

<li><a href="#">Java</a></li>

<li><a href="#">JavaScript</a></li>

<li><a href="#">PHP</a></li>

<li><a href="#">Mysql</a></li>

</ul>

</li>

 

<script type="text/javascript">

/*鼠标经过当前对象事件*/

function showMenu(li)

{

//当前对象下面的二级 显示

li.getElementsByTagName('ul')[0].style.display="block" ;

}

/*鼠标离开当前对象样式*/

function hideMenu(li)

{

li.getElementsByTagName('ul')[0].style.display="none" ;

}

</script>

 

3. 浏览器兼容

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

 

<style type="text/css">

*{

margin:0;

padding:0;

}

#nav{

background-color: #eee ;

width:810px;

height:45px;

margin:0 auto;

}

ul{

/*去除默认样式*/

list-style: none ;

 

}

ul li{

/*宽度自适应*/

float:left;

line-height: 45px;

text-align: center ;

/*二级菜单相对于此*/

position: relative;

 

}

a{

text-decoration: none ;

color:#000;

padding:0 10px;

display:block;

padding:0 10px;

}

a:hover{

color:#fff;

background-color: #aaa ;

}

/*二级菜单*/

ul li ul li{

float:none;

background-color: #eee ;

margin-top: 2px;

}

ul li ul{

/*

绝对定位

相对于父级 默认浏览器

 

*/

position: absolute;

left:0;

top:45px;

display:none;

}

/*二级菜单的样式*/

ul li ul li a:hover{

background-color: #06F ;

}

/*二级 ul隐藏  父级li hover*/

/*ul li:hover ul{

display:block;

}*/

</style>

</head>

<body>

 

<div id="nav">

<ul>

<!-- this指的是当前对象 -->

<li  class="navMenu"><a href="#">AAAAA</a>

<ul>

<li><a href="#">Java</a></li>

<li><a href="#">JavaScript</a></li>

<li><a href="#">PHP</a></li>

<li><a href="#">Mysql</a></li>

</ul>

</li>

<li><a href="#">BBBBB</a></li>

<li class="navMenu"><a href="#">CCCCC</a>

<ul>

<li><a href="#">Java</a></li>

<li><a href="#">JavaScript</a></li>

<li><a href="#">PHP</a></li>

<li><a href="#">Mysql</a></li>

</ul>

</li>

<li><a href="#">DDDDD</a></li>

<li><a href="#">EEEEE</a></li>

</ul>

</div>

 

<!--引入JQuery库  -->

<script  src="/static/index/js/jquery-1.8.1.min.js"></script>

<script>

$(function() {

$('.navMenu').mouseover(function() {

// 当前对象

$(this).children('ul').show() ;

}) ;

$('.navMenu').mouseout(function() {

// 当前对象

$(this).children('ul').hide() ;

}) ;

}) ;

</script>

</body>

</html>

 

 

 

东陵十三
关注
  • 2
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Jquery、HTML、CSS、JS实现下拉菜单列表
weixin_56296642的博客
10-04 1022
使用Jquery、HTML、CSS、Javascript实现下拉菜单列表效果
用ul和li来制作菜单下拉框
DiegoBrother的博客
08-05 1万+
  鼠标触碰该区域   因为我为了网页的更好布局我首先用一个div将ul括起来，ul里有li，li里嵌套一个ul，若是想制作多级菜单，便可再第二个ul的li里再嵌套一个ul便可制作出多级菜单。 部分代码实现如下：  html代码 &lt;div class="selectProperty"&gt;               &lt;ul&gt;                 &...
Excel实用技巧——二级下拉菜单、数据验证
最新发布
铭记yu心的博客
06-24 1126
掌握Excel二级下拉选项：高效数据管理的秘诀揭秘！提升工作效率，从此告别繁琐操作。一文带你领略二级下拉选项的强大功能，助你在职场中脱颖而出，成为数据处理达人！立即阅读，开启你的Excel新篇章！
分别用html/css、javascript、jQuery实现下拉菜单的显示和隐藏
HuLuWa1997的博客
11-21 4456
一、html/css实现下拉菜单的显示和隐藏 简单来说就是通过对css样式的控制来实现下拉菜单的显示和隐藏 具体代码示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
jquery实现二级导航下拉菜单效果实例
05-20 7792
大家都知道jQuery是一个框架，它对JS进行了封装，使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。 使用JQuery实现需要用到的知识有： 1)使用$(function(){...})获取到想要作用的HTML元素。 2)通过使用children()方法寻找子元素。 3)通过使用show()方法来显示HTML元素。 4)通过使用...
点击显示二级下拉菜html,jQuery实现二级下拉菜单效果
weixin_42386511的博客
06-03 685
大家都知道jQuery是一个框架，它对JS进行了封装，使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。使用JQuery实现需要用到的知识有：1)使用$(function(){...})获取到想要作用的HTML元素。2)通过使用children()方法寻找子元素。3)通过使用show()方法来显示HTML元素。4)通过使用hide()方法来隐...
纯CSS、原生JS、jQuery实现下拉菜单功能
wendZzoo的博客
09-13 3644
一、纯CSS实现 实现下拉菜单需要用display，即改变display的block或none值。 先构建基本的HTML框架， <div id="nav"> <ul> <li><a href="#">新闻</a></li> <li><a href="#">...
Jquery实现二级下拉选择框
weixin_50813407的博客
11-15 786
【代码】Jquery实现二级下拉选择框。
Web前端开发实战1：二级下拉式菜单之CSS实现
热门推荐
life is wonderful
12-30 3万+
二级下拉式菜单在各大学校网站，电商类网站，新闻类网站等大型？网站很常见，那么它的实现原理是什么呢？ 学习了Web前端开发的知识后，我们是可以实现这样的功能的。复杂的都是从基础效果上添加做出来的，原理和流程 还是一样的，今天开始做一些简单的二级下拉式菜单。        横向一级菜单我们见到的很多，如下图所示是：        二级下拉菜单图：        二级下拉菜单是
jQuery 简单介绍，二级菜单（HTML+css；JavaScript；jQuery三种实现方式）
qq_43434300的博客
04-03 3274
jQuery简介 jQuery 库可以通过一行简单的标记被添加到网页中。 在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：HTML、CSS、JavaScript。 什么是 jQuery ？ jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： HTML 元素选取 HTML 元素操作 C...
ThinkPHP5 ---基础篇(URL和路由)
donglingjiu的博客
06-12 2万+
ThinkPHP5 ---基础篇(URL和路由)  一、入口文件i. 单入口文件:应用程序的所有http请求都由某一个文件接受并有这个文件转发到功能代码中 【public/index.php 传入不同的参数跳转到不同的控制器执行不同的方法实现不同的功能】ii. 优势:1. 只需要在入口文件做安全检测  多入口文件多次检测2. 在入口文件 过滤掉无效请求   多入口文件多次过滤iii. public...
ThinkPHP5 ---基础篇(安装)
donglingjiu的博客
06-12 2万+
一、ThinkPHP简介i. ThinkPHP是一个免费开源 快速简单 面向对象 轻量级的PHP开发框架ii. 创立于2006年初 遵循Apache2开源协议发布iii. 秉承简洁实用的设计原则 注重易用性iv. 支持composer(包管理工具)方式安装 类似于node.js里面的npmv. 5版本与之前版本不兼容 二、MVC简介i. Model(模型) View(视图) Controller(...
ThinkPHP 5.0--基础篇(视图和模版)
donglingjiu的博客
06-21 1万+
ThinkPHP 5.0--基础篇(视图和模版)一、视图viewi. 主要展示界面  可以接受用户输入等操作 通常是一个html页面ii. 助手函数 view()   如果没有对模版进行配置(没有在配置文件中修改 )默认调用 当前模块/view/当前控制器/当前方法名.html1. view() 传递一个参数之后  return view(‘a’) ; 2. 传递一个带路径的参数  return ...
ThinkPHP5--基础篇(模型)
donglingjiu的博客
06-25 1万+
ThinkPHP5--基础篇(模型)一、数据库连接i. 使用应用配置文件 conf/config.php1. app目录同级 新建conf/database.php 2. 使配置文件生效  入口文件配置路径(入口文件 安全检测|过滤请求|定义常量) 3. config()助手函数 打印数据库信息测试 4. 上述访问路径  可在Apache(或其他服务器)配置文件中配置虚拟域名 指定根目录等等简化 ...
ThinkPHP5 ---基础篇(配置)
donglingjiu的博客
06-12 7107
ThinkPHP5 ---基础篇(配置)  一、惯例配置i. 定义配置文件 public/index.php//定义配置文件目录define('CONF_PATH', __DIR__ . '/../conf/') ; ii. 在application同级新建目录conf iii. 打印当前配置   dump(config()) ; iv. 上述打印出来的内容 即为thinkphp/conventi...
ThinkPHP5 ---基础篇(请求和响应)
donglingjiu的博客
06-13 7062
一、请求对象Requesti. 单入口public/index.php  此文件接收http请求 请求中的所有参数都可以通过Request对象接收 处理ii. 三种获取request对象的方法1. 助手函数request()  2. use think\Request ; Request是单例模式  通过Request::instance() ;获取对象  3. 方法传参 request对象 --...
oracle归档 -修改归档路径
donglingjiu的博客
05-27 7021
修改归档路径为/data/arch mkdir -p /data/arch ---要修改的归档路径 archive log list; ---查看oracle归档 shutdowm immediate; startup mount; ---oracle需要 启动到mount状态 alter databa...
H5表单中时间日期控件
donglingjiu的博客
03-09 4295
<form action="doAction.php" method='post'> <input type="date" name="datetime" id="" />年/月/日 <br/> <input type="datetime" name="datetime1" id=""> &l...
jquery多个二级下拉菜单
06-03
可以使用jQuery来实现多个二级下拉菜单的效果，可以按照以下步骤进行： 1. 在HTML中定义多个下拉菜单的结构，可以使用ul和li标签来实现： ```html 菜单1<b class="caret"></b> <li><a href="#">子菜单1</a>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值