jquery 下拉菜单 html,用jquery实现下拉菜单效果的代码

效果如下：

这是菜单的内容，用ul标签实现菜单：

菜单一
- 子菜单1
- 子菜单2
  - 子菜单7
- 子菜单3
菜单二
- 子菜单4
- 子菜单5
- 子菜单6

这是CSS控制代码：

ul,ol,li{list-style:none;padding:0px;margin:0px;}

#menu *{line-height:30px;}

#menu a{

text-decoration:none;

display:block;

}

#menu ul{

text-align:left;

background:#333;

}

#menu .arrow{ /* 菜单项的右侧小箭头 */

float:right;

padding-right:5px;

}

#menu>ul{height:30px;} /* 即使没有菜单项也能保持顶级菜单栏的高度。 */

/* 一级菜单 */

#menu>ul>li{

text-align:center;

display:inline-block;

width:80px;

}

#menu>ul>li>a{color:#fff;}

#menu>ul>li:hover{background:#666;}

/* 下拉的菜单栏 */

#menu>ul>li ul{

display:none;

width:150px;

position:absolute;

background:#c1cd94;

box-shadow:2px 2px 2px #000;

-webkit-box-shadow:2px 2px 2px #000;

-moz-box-shadow:2px 2px 2px #123;

}

/* 下拉菜单的菜单项 */

#menu>ul>li>ul li{padding-left:5px; position:relative;}

#menu>ul>li>ul li>a{color:#000;}

#menu>ul>li>ul li:hover{background:#d3dbb3;}

/* 三级及以下的菜单项的定位 */

#menu>ul>li>ul>li ul{left:150px; top:0px;}

[html]

这是JS的控制代码：

[code]

$(document).ready(function()

{

/* 菜单初始化 */

$('#menu>ul>li>ul').find('li:has(ul:not(:empty))>a').append(">"); // 为有子菜单的菜单项添加'>'符号

$("#menu>ul>li").bind('mouseover',function() // 顶级菜单项的鼠标移入操作

{

$(this).children('ul').slideDown('fast');

}).bind('mouseleave',function() // 顶级菜单项的鼠标移出操作

{

$(this).children('ul').slideUp('fast');

});

$('#menu>ul>li>ul li').bind('mouseover',function() // 子菜单的鼠标移入操作

{

$(this).children('ul').slideDown('fast');

}).bind('mouseleave',function() // 子菜单的鼠标移出操作

{

$(this).children('ul').slideUp('fast');

});

出处：http://www.caixw.com/archives/drop-down-menu-with-jquery.html

jquery 下拉菜单 html,用jquery实现下拉菜单效果的代码相关推荐

oracle 自动填充,jQuery 实现自动填充邮箱功能（带下拉提示）
在做这个功能时候,我参考的是网易注册(http://reg.163.com/reg/reg.jsp?product=urs)中的邮箱栏目所实现的功能与效果.这个功能的目的是使用户在填写邮箱栏目的过程中 ...
漂亮大气的html导航页面,jquery+css打造位于网页顶部漂亮黄色下拉导航
jquery+css打造位于网页顶部漂亮黄色下拉导航 - www.webdm.cn $(document).ready(function(){ $(".btn-slide").cl ...
jQuery手机移动端弹出层美化下拉选项特效代码
jQuery手机移动端弹出层美化下拉选项特效代码演示地址:http://www.b4a.bid/JS/ 效果如下: 下载地址:https://download.csdn.net/download/d ...
10款菜单导航代码_jquery 导航菜单_js 导航菜单_二级导航条下拉菜单（一）
jQuery左侧下拉导航菜单后台框架模板 js侧边隐藏菜单收缩特效黑色的左侧导航管理面板ui特效企业官网tab下拉菜单特效 Facebook自定义多级导航菜单查询 jQuery圆形转盘多级菜单代码 ...
java 获取下拉框的值_Java获取下拉菜单选中的选项
提到这样一个需求"在新闻表中添加新闻分类的编号和名字",一般情况下我们将分类的ID放在下拉菜单选项的value中,此时需要获取选项的编号和名字,我们该怎么做呢?我常用的有如下两种方 ...
纯css 下拉选择,纯CSS实现的下拉菜单
实现效果实现代码 html home wordpress themes plugins tutorials web design resources links tutorials html/css ...
右边菜单_Excel – 如何始终显示下拉菜单右边的小箭头？
制作下拉菜单,不是什么高深的技巧,我在各种案例中也经常会用到. 如果要学习多级联动菜单的制作,可参见 Excel indirect 函数(2) – 制作多级联动菜单(文末彩蛋) 最近有同学提出了一个关 ...
[jQuery]使用jQuery.Validate进行客户端验证（高级篇-下）——不使用微软验证控件的理由...
2019独角兽企业重金招聘Python工程师标准>>> 引用源:http://www.cnblogs.com/kyo-yo/archive/2010/07/06/Use-jQuery ...
html 下拉框字体,怎么把select下拉菜单里的文字设置成左右滚动效果
原标题:怎么把select下拉菜单里的文字设置成左右滚动效果希望用marquee标签来设置字体滚动,代码是下面这样写的,但是没有效果,字体还是不会滚动,应该怎么来写,才会实现这个效果呢? " ...
不使用输入框如何实现下拉_如何利用Axure实现下拉子菜单？
Axure RP是一款专业的快速原型设计工具,让我们能够快速设计并创建出应用软件或Web页面的具备高保真和交互能力的原型.通过原型设计,不但能更好地与客户进行交流确认,也能明确地给开发人员以成品效果作 ...

jquery 下拉菜单 html,用jquery实现下拉菜单效果的代码

jquery 下拉菜单 html,用jquery实现下拉菜单效果的代码相关推荐

最新文章

热门文章