使用jQuery完成下拉菜单

开发工具与关键技术：Adobe Dreamweaver CC 2017 jQuery
作者：孙水兵
撰写时间：2019年2月21

用jQuery实现下拉菜单是一件很简单的事，主要是进行css的编写，将要隐藏的菜单设置display：none；再用jQuery将其进行显示与隐藏。
首先：引入jQuery文件

<script src="jquery/jquery-3.2.1.min.js"></script>

HTML部分
用ul标签来包裹要显示与隐藏的内容，再到li标签中用ul标签包裹要隐藏的内容。再要隐藏的内容上面显示的内容附加一个相同的内，用来进行鼠标移入移出事件。要进行页面跳转的内容用a标签包裹。

<div id="menu"><ul><li><a href="#">首页</a></li><li class="navmenu"><a href="#">内容</a><ul>  <li><a href="#">内容1</a></li><li><a href="#">内容2</a></li></ul></li><li class="navmenu"><a href="#">标题</a><ul><li><a href="#">标题1</a></li><li><a href="#">标题2</a></li><li><a href="#">标题3</a></li></ul></li> </ul>
</div>

CSS部分
设置菜单的背景颜色，宽度高度，让其水平居中。去除ul标签的固定样式设置要显示内容的样式，主要是让ul li ul中的内容为display：none；。

*{ margin:0px;padding:0px;}
#menu{ background-color:#eee;width:300px;height:40px;margin:0 auto;}
ul{list-style:none;}
ul li{float:left;  line-height:40px; text-align:center;position:relative;}
a{ text-decoration:none;color:#000;display:block;width:90px;}
a:hover{ color:#FFF; background-color:#666;}
ul li ul li{float:none; border-left:none;margin-top:2px;background-color:#eee;}
ul li ul{  width:90px; position:absolute; left:0px; top:40px; display:none;}

jQuery部分
根据类选择鼠标移入要显示移出隐藏的类，给其添加鼠标移入，鼠标移出事件，然后选择这元素的子元素的ul标签设置显示与隐藏事件。

 $(function(){$(".navmenu").mouseover(function(){$(this).children("ul").show(); })$(".navmenu").mouseout(function(){ $(this).children("ul").hide(); }) })

使用jQuery完成下拉菜单相关推荐

jquery php下拉列表,JQuery三级下拉菜单
摘要: jQuery三级下拉菜单首页内容动画动画2 3级菜单→ 我是3级菜单我是3级菜单我是3级菜单动画2 3级菜单→ 我是3级菜单我是3级菜单 4级菜单→ 我是4级菜单我是4级菜单 ...
html下拉菜单插件,简单的jQuery大型下拉菜单插件
booNavigation是一款简单的jQuery大型下拉菜单插件.通过该插件可以制作3列大型下拉菜单,并带有平滑过渡效果,以及鼠标滑过菜单项时的动画效果. 使用方法在页面中引入jquery和boo ...
jQuery实现下拉菜单(点击显示/隐藏)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...
用jQuery实现下拉菜单效果
用jQuery实现下拉菜单效果下拉菜单效果展示代码 <!DOCTYPE html> <html><head>`在这里插入代码片`<meta charset ...
jQuery练习——下拉菜单
哈喽大家好,本次是jQuery案例练习系列第一期,本期是用jQuery实现下拉菜单. 笔者还是前端的菜鸟,还请大家多多指教呀~ 欢迎大佬指正,一起学习,一起加油! 第一期--下拉菜单的实现文章目录 ...
jquery 下拉菜单 html,jQuery实现下拉菜单的实例代码
基本效果是这样的~~ * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width: 330px; height: 30px; ...
jquery 实现下拉菜单
为什么80%的码农都做不了架构师?>>> 该文章属于原创:转载注明出处:http://www.pm-road.com/index.php/2014/12/09/276/ Jqu ...
Jquery实现下拉菜单滑动效果
关于下拉菜单的布局以及原始采用jquery的写法详见这篇博客:(1条消息) Jquery案例-下拉菜单_setTimeout()的博客-CSDN博客_jquery下拉菜单案例上面这篇博客的下拉菜单案 ...
jQuery获取下拉菜单列表的值
在表单提交的网页中,我们经常使用下拉菜单列表,这篇文章解释了如何获取下拉列表选择的值. 在jQuery中,我们通过使用.val()方法获得下拉列表的选定值. .val()方法主要用于获取表单元素的值, ...

使用jQuery完成下拉菜单

使用jQuery完成下拉菜单相关推荐

最新文章

热门文章