下拉菜单列表

当鼠标进入时，效果如下：

鼠标离开时，下拉列表进行隐藏。效果如下：

下面展示代码

//
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{padding: 0px;margin: 0px;list-style: none;}.box{margin: 100px auto;width: 340px;height: 30px;background: url(项目J3-11/images/bg.jpg);}.box li{width: 100px;height: 30px;background: url(项目J3-11/images/libg.jpg);float: left;margin-left: 10px;text-align: center;line-height: 30px;cursor: pointer;position: relative;left: 0px;}.box li ul{text-align: center;display: none;position:absolute;top: 30px;left: 0px;}</style>
</head>
<body><ul class="box"><li>我的淘宝<ul><li>已买到的宝贝</li><li>我的足迹</li><li>购物车</li></ul></li><li>商品分类<ul><li>日化用品</li><li>精品服饰</li><li>零食百货</li></ul></li><li>卖家中心<ul><li>商品列表</li><li>销售管理</li><li>订单管理</li></ul></li></ul>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script>//jquery的代码我们通常会包裹在一个$(function(){})函数中//$(function() {}) 是$(document).ready(function()的简写$(function(){//ready事件提供页面加载事件，只需Dom元素加载完成后便可触发//“$(参数)”创建jquery实例对象，为它绑定mouseover的鼠标事件，鼠标进入触发，参数为事件的处理程序，即匿名函数//$('.box>li')层次选择器中的子元素选择器，获取类名为box下的li元素/* $('.box>li').mouseover(function(){//slideDown() 方法用于向下滑动元素。$(this).children().slideDown(500);});$('.box>li').mouseout(function(){//slideUp() 方法用于向上滑动元素。speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。$(this).children().slideUp(500);}); *//* slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它6们。该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 slideDown()，如果一个元素是可见的，则运行 slideUp() - 这会造成一种切换的效果。 */$('.box>li').hover(function(){//为导航中的每个选项注册移入移出事件//children()方法代替子元素选择器，获取指定元素的子元素。返回被选元素的所有直接子元素/* stop()方法用于停止动画效果，如元素上滑下滑，可以让动画队列后面的动画提前执行在不传递参数时，表示立即停止当前正在执行的动画，开始执行动画队列中的下一个动画 */$(this).children().stop().slideToggle(500);/* 1 链式编程：如果一直对同一个元素进行函数操作，可以使用".函数名"一直写下去2  因为jquery对象调用方法，返回值是jquery对象本身。就用 .语法调用自身方法*/});})
</script>
</html>

使用Jquery、HTML、CSS、JS实现下拉菜单列表相关推荐

js+css+html制作下拉菜单
js+css+html制作下拉菜单 1 案例需求 2 编写HTML结构代码 3 编写css样式 4 编写JavaScript部分 5 全部代码 1 案例需求使用JavaScript+css+html ...
js实现下拉菜单动画效果
js实现下拉菜单动画效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
jQuery实现一个淡入淡出下拉菜单非常简易
前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...
php下拉框css样式,纯CSS实现的下拉菜单
实现效果实现代码 html Home WordPress Themes Plugins Tutorials Web Design Resources Links Tutorials HTML/CSS ...
纯css 下拉选择,纯CSS实现的下拉菜单
实现效果实现代码 html home wordpress themes plugins tutorials web design resources links tutorials html/css ...
css表格中下拉菜单怎么设置,css如何实现下拉菜单？css实现下拉菜单的方法（完整代码）...
本篇文章给大家带来的内容是关于css如何实现下拉菜单?css实现下拉菜单的方法(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. /*盒子,相对定位*/ .dropdown{ ...
jQuery获取下拉菜单列表的值
在表单提交的网页中,我们经常使用下拉菜单列表,这篇文章解释了如何获取下拉列表选择的值. 在jQuery中,我们通过使用.val()方法获得下拉列表的选定值. .val()方法主要用于获取表单元素的值, ...
css3如何写下拉菜单,css如何实现下拉菜单超详细
首页 >web前端>css教程>正文 css如何实现下拉菜单?css实现下拉菜单的方法(完整代码) 原创2019-04- 本篇文章给大家带来的内容是关于css如何实现下拉菜单?css ...
经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单效果图: 源码: <html><head> <meta charset="utf-8"> ...

使用Jquery、HTML、CSS、JS实现下拉菜单列表

下拉菜单列表

使用Jquery、HTML、CSS、JS实现下拉菜单列表相关推荐

最新文章

热门文章