jquery 功能强大的下拉菜单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang=en dir=ltr xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>测试类别</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<style>
BODY {
FONT-SIZE: 11px; MARGIN: 0px; FONT-FAMILY: Verdana,Geneva,sans-serif
}
#menubox {
CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND:#336699; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 0px; HEIGHT: 43px
}
#menubox .menu {
MARGIN: 0px auto; WIDTH: 960px
}
#menubox .menu UL.topNav {
Z-INDEX: 999; FLOAT: left; POSITION: relative; HEIGHT: 30px
}
#menubox .menu UL.topNav LI.item {
DISPLAY: inline; FONT-SIZE: 12px; BACKGROUND: url(images/esbg.png) no-repeat -676px -138px; FLOAT: left; FONT-FAMILY: Arial; HEIGHT: 35px; TEXT-ALIGN: center
}
#menubox .menu UL.topNav LI.item A {
PADDING-RIGHT: 15px; DISPLAY: inline; PADDING-LEFT: 3px; FONT-SIZE: 12px; Z-INDEX: 5; FLOAT: left; WIDTH: 75px; COLOR: #fff; PADDING-TOP: 3px; TEXT-ALIGN: center
}
#menubox .menu UL.topNav LI.item A.menulink_text {
LINE-HEIGHT: 28px
}
#menubox .menu UL.topNav LI.item A:hover {
PADDING-RIGHT: 15px; DISPLAY: inline; PADDING-LEFT: 3px; FONT-SIZE: 12px; BACKGROUND: url(images/m02.gif) #0092db no-repeat right top; FLOAT: left; WIDTH: 75px; COLOR: #fff; HEIGHT: 35px; TEXT-DECORATION: none
}
#menubox .menu UL.topNav LI.item A.classA {
PADDING-RIGHT: 15px; DISPLAY: inline; PADDING-LEFT: 3px; FONT-SIZE: 12px; BACKGROUND: url(images/m02.gif) #0092db no-repeat right top; FLOAT: left; WIDTH: 75px; COLOR: #fff; HEIGHT: 35px; TEXT-DECORATION: none
}
#menubox .menu UL.topNav LI.item .subNaviCon {
BORDER-RIGHT: #0092db 5px solid; PADDING-RIGHT: 5px; BORDER-TOP: #0092db 5px solid; DISPLAY: none; PADDING-LEFT: 5px; Z-INDEX: 1; BACKGROUND: #fff; LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 10px; OVERFLOW: hidden; BORDER-LEFT: #0092db 5px solid; WIDTH: 940px; PADDING-TOP: 10px; BORDER-BOTTOM: #0092db 5px solid; POSITION: absolute; TOP: 38px; TEXT-ALIGN: left
}
#menubox .menu UL.topNav LI.item .subNaviCon .cataBox {
FLOAT: left; WIDTH: 185px
}
#menubox .menu UL.topNav LI.item .subNaviCon .cataBox DT {
FONT-WEIGHT: bold; FONT-SIZE: 12px; FLOAT: left; OVERFLOW: hidden; WIDTH: 185px; COLOR: #3f84c5; LINE-HEIGHT: 26px; BORDER-BOTTOM: #eee 1px solid
}
#menubox .menu UL.topNav LI.item .subNaviCon .cataBox DT A {
FONT-WEIGHT: bold; FONT-SIZE: 12px; FLOAT: left; WIDTH: 185px; COLOR: #3f84c5; LINE-HEIGHT: 26px; TEXT-ALIGN: left
}
#menubox .menu UL.topNav LI.item .subNaviCon .cataBox DT A:hover {
FONT-SIZE: 12px; BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: left; WIDTH: 185px; COLOR: #3f84c5; LINE-HEIGHT: 26px; HEIGHT: 26px; TEXT-DECORATION: underline
}
#menubox .menu UL.topNav LI.item .subNaviCon .cataBox DD {
DISPLAY: inline; FONT-SIZE: 11px; BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: left; WIDTH: 150px; COLOR: #000; TEXT-ALIGN: left
}
#menubox .menu UL.topNav LI.item .subNaviCon .cataBox DD A {
PADDING-RIGHT: 2px; DISPLAY: inline; PADDING-LEFT: 2px; FONT-WEIGHT: normal; FONT-SIZE: 11px; BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: left; PADDING-BOTTOM: 2px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 150px; COLOR: #000; PADDING-TOP: 2px; HEIGHT: 15px; TEXT-ALIGN: left
}
#menubox .menu UL.topNav LI.item .subNaviCon .cataBox DD A:hover {
PADDING-RIGHT: 2px; DISPLAY: inline; PADDING-LEFT: 2px; FONT-SIZE: 11px; BACKGROUND: #eaeef5; PADDING-BOTTOM: 2px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 150px; COLOR: #1d70c0; PADDING-TOP: 2px; HEIGHT: 15px; TEXT-ALIGN: left; TEXT-DECORATION: underline
}
#menubox .menu UL.topNav LI.itemR {
DISPLAY: block; FONT-SIZE: 12px; FLOAT: right; FONT-FAMILY: Arial; HEIGHT: 35px
}
#menubox .menu UL.topNav LI.itemR .subNaviConR {
DISPLAY: none
}
.subNaviConR {
Z-INDEX: 999; RIGHT: 0px; BACKGROUND: #fff; FLOAT: left; WIDTH: 220px; POSITION: absolute; TOP: 37px
}
.subNaviConR DIV {
BORDER-RIGHT: #d15400 3px solid; BORDER-TOP: #d15400 3px solid; BACKGROUND: #fff; FLOAT: left; BORDER-LEFT: #d15400 3px solid; WIDTH: 214px; BORDER-BOTTOM: #d15400 3px solid
}
.subNaviConR DD {
FONT-SIZE: 12px; FLOAT: left; WIDTH: 214px; COLOR: #333; LINE-HEIGHT: 20px; FONT-FAMILY: Arial
}
.subNaviConR DD A {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: left; PADDING-BOTTOM: 2px; WIDTH: 214px; COLOR: #333; TEXT-INDENT: 1em; PADDING-TOP: 2px; FONT-FAMILY: Arial
}
.subNaviConR DD A:hover {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #fdf2e8; FLOAT: left; PADDING-BOTTOM: 2px; WIDTH: 214px; COLOR: #d15400; PADDING-TOP: 2px; FONT-FAMILY: Arial
}
#menuimg {
MARGIN-TOP: -6px; FLOAT: left; WIDTH: 960px
}
</style>
<SCRIPT src="http://www.codefans.net/ajaxjs/jquery1.3.2.js" type=text/javascript></SCRIPT>
</HEAD>
<BODY>
<!--menu start-->
<DIV id=menubox>
<DIV class=menu>
<UL class=topNav id=topNav>
<LI class=item><A class=menulink_text href="#">测试大类一</A>
<DIV class=subNaviCon><!--这里可以变为subNaviCon1-->
<DIV class=cataBox><!--或者这里可以变为cataBox1-->
<DT><A href="#">一级子类</A></DT>
<DD><A href="#">二级子类一</A></DD>
<DD><A href="#">二级子类二</A></DD>
</DIV></DIV>
<DIV class=clear></DIV>
</LI>
<LI class=item><A class=menulink_text href="#">测试大类二</A>
<DIV class=subNaviCon><!---这里可以变为subNaviCon2-->
<DIV class=cataBox><!--或者这里可以变为cataBox2-->
<DT><A href="#">一级子类</A></DT>
<DD><A href="#">二级子类一</A></DD>
<DD><A href="#">二级子类二</A></DD>
</DIV></DIV>
<DIV class=clear></DIV>
</LI>
<LI class=item><A class=menulink_text href="#">测试大类三</A>
<DIV class=subNaviCon><!--这里可以变为subNaviCon3-->
<DIV class=cataBox><!--或者这里可以变为cataBox3-->
<DT><A href="#">一级子类</A></DT>
<DD><A href="#">二级子类1</A></DD>
<DD><A href="#">二级子类2</A></DD>
<DD><A href="#">二级子类12</A></DD>
<DD><A href="#">二级子类13</A></DD>
<DT><A href="#">二级子类</A></DT>
<DD><A href="#">二级子类1</A></DD>
<DD><A href="#">二级子类2</A></DD>
<DT><A href="#">三级子类</A></DT>
<DD><A href="#">三级子类11</A></DD>
<DD><A href="#">三级子类12</A></DD>
<DD><A href="#">三级子类13</A></DD>
</DIV></DIV>
<DIV class=clear></DIV>
</LI>
</UL>
</div>
</div>
<!--menu end-->
<script type="text/javascript">
var HOST="",firstTagLeft=$("ul#topNav li.item:first").offset().left,naviTimer,tags=[],rowNum=20,verticalNum=5; //offset() 方法返回或设置匹配元素相对于文档的偏移（位置）
for(i=0;i<$("ul#topNav li.item").length;tags[i++]="");
$("ul#topNav li.item").hover(function(){$(this).addClass("focus");
$(this).children("a").addClass("classA");
var a=$(this).children("div.subNaviCon");
a.attr("id","nav_focus");
naviTimer=setTimeout("showSubNav();",50)},
function(){$(this).removeClass("focus");
$(this).children("a").removeClass("classA");
clearTimeout(naviTimer);
$("#nav_focus").attr("id","");
$(this).children("div.subNaviCon").stop(true,true).slideUp("fast")});
function showSubNav()
{$("#nav_focus").stop(true,true).slideDown("fast")} //slideDown() 方法通过使用滑动效果，显示隐藏的被选元素
</script>
</body>
</html>
jquery 功能强大的下拉菜单的更多相关文章
- jQuery cxSelect 多级联动下拉菜单
随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...
- jquery插件制作，下拉菜单
要求输入框点击出现下拉菜单,并实现以下功能: 1.首先点击地点标签页,选择好地点: 2.自动显示相应节点标签页显示节点信息,选择好节点 3.自动显示相应的连接点,选择连接点,连接点被选中并被传送的输入 ...
- jQuery/CSS3大屏下拉菜单 自定义子菜单内容
这是一款样式很酷的jQuery/CSS3下拉菜单,首先这款CSS3菜单是宽屏的,主要是下拉菜单非常大气,更重要的是,下拉菜单的内容可以自己定义,也就是说,下拉菜单中可以定义菜单.图片等HTML元素,是 ...
- jQuery制作水平多级下拉菜单
本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...
- 禁用jQuery chosen的选择下拉菜单
想法是启用被勾掉之后,左侧下拉框禁用.这是chosen()的 disabled之后需要更新一下.就这样,还有别的方法的话请分享,O(∩_∩)O哈哈~
- jQuery制作一个多彩下拉菜单按钮
最终效果图: html代码: <div id="list"> <div id="btn"> <div class="ic ...
- JQuery设置获取下拉菜单选项的值 多实例
分享下JQuery如何设置获取下拉菜单某个选项的值,多种方法,值得收藏. JQuery获取和设置Select选项 获取Select :获取select 选中的 text :$(“#ddlRegType ...
- 从下拉菜单拖拽一个元素 出来，插入到页面中的app 列表中
1,实现功能:从下拉菜单拖拽一个元素 出来,插入到页面中的app 列表中 并实现app向后移动一个元素的位置: 2.实现思路: 01.遍历下拉菜单,添加拖拽方法,实现位置移动功能: 02.遍历app列 ...
- 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
随机推荐
- 1.javaOOP_Part1_抽象和封装
javaOOP_Part1_抽象和封装 javaOOP_Part1_抽象和封装 1.1 面向对象 1.1.1 为什么使用面向对象 1.一切皆对象 2.现实世界就是"面向对象的" 3 ...
- ElasticSearch(3)-原理
参考文档: http://learnes.net/distributed_crud/bulk_requests.html 一.分布式集群 1.1 空集群 单台机器,其中没有数据,也没有索引. 集群中一 ...
- 大数据除法（Large data division）
题目描述 Description 除法是计算中的基础运算,虽然规则简单,但是位数太多了,也难免会出错.现在的问题是:给定任意位数(足够大就可以啦O(∩_∩)O)的一个被除数,再给定一个long lon ...
- ejabberd组成模块
转自:http://blog.sina.com.cn/u/1776260990 mod_adhoc 特定命令 (XEP-0050) mod_announce 管理公告推荐 mod_adhoc mod_ ...
- iOS页面间传值的六种方式
一般ios页面间的传值方式分为6种:1.属性传值:2.block:3.delegate:4.UserDefault:5.单例:6.通知. 0&1.block 先说我最常用的block吧,属性传 ...
- ADO.NET 完整修改、删除、防字符串攻击
首先,我先把昨天所做的人事管理系统进行了优化,将其完善成为了一个更符合实际的系统.将修改及删除数据的数据库操作前面添加了一个查询语句,这样,在实际操作时,如果数据库中没有该条数据,则程序不会执行接下来 ...
- GitHub使用指导
GitHub 用过Git的小伙伴想必都知道GitHub是个什么东东,我这里就简单介绍一下吧.Git是一个分布式的版本控制系统,而GitHub可以托管各种Git库,并提供一个Web界面,方便查看Git库 ...
- 总结的git操作命令小抄集
.gitignore 本地仓库主目录下,用于定义提交时忽略的文件 git add <file-name> 将修改或新增的文件存入暂存区 git reset HEAD <fil ...
- 【3】docker命令集
root@xcc-VirtualBox:/home/xcc# docker --helpUsage: docker [OPTIONS] COMMAND [arg...] docker [ ...
- 缺少对象 WScript 问题解决方法
方法一: 先把脚本保存起来(保证你的脚本能正确运行),例如命名为test.vbs 然后在QTP写以下脚本就可以正确运行了! Dim oShell Set oShell =CreateObject (& ...