兼容ie7的导航下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery导航菜单二级菜单slide滑动渐隐显示</title>
<meta name="description" content="jquery导航菜单制作一个二级菜单导航条，鼠标滑过导航条二级菜单slide滑动展示且带有渐隐效果展示比较柔和的二级菜单目录。jQuery下载" />
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#333;text-decoration:underline;}
body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
/* navbox */
.navbox,.nav li,.nav li.current a,.nav li.selected a span,.nav li a.selected,.nav li a.selected span{background:#f60;}
.navbox{height:39px;background-position:0 -138px;background-repeat:repeat-x;position:relative;z-index:9;}
.nav{width:960px;margin:0 auto;}
.nav li{float:left;height:39px;background-position:100% -99px;padding:0 3px 0 2px;position:relative;}
.nav li.last{background:none;}
.nav li a{float:left;display:block;padding:0 0 0 4px;height:39px;overflow:hidden;}
.nav li a span{float:left;display:block;padding:0 4px 0 0;line-height:39px;font-size:14px;color:#fff;font-weight:800;cursor:pointer;width:142px;text-align:center;}
.nav li.selected a,.nav li a.selected{background-position:0 -60px;text-decoration:none;}
.nav li.selected a span,.nav li a.selected span{background-position:100% -60px;color:#ff7e00;}
.nav li.selected .submenu{display:block;}
.nav li .submenu{display:none;position:absolute;top:39px;left:6px;}
.nav li .submenu{border-style:solid;border-width:0px 1px 1px 1px;border-color:#ddd;padding:0 5px 5px 5px;width:132px;background:#fff;}
.nav li .submenu{-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-moz-box-shadow:0 5px 5px #D3D3D3;-webkit-box-shadow:0 5px 5px #D3D3D3;box-shadow:0 5px 5px #D3D3D3;}
.nav li .submenu li{float:none;padding:0;background:none;height:auto;border-bottom:dotted 1px #BEBEBE;}
.nav li .submenu li.last{border:none;}
.nav li .submenu li a{float:none;padding:0;text-align:center;height:28px;line-height:28px;background:none;}
.nav li .submenu li a:hover{background:#ddd;font-weight:800;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function dropMenu(obj){
$(obj).each(function(){
var theSpan = $(this);
var theMenu = theSpan.find(".submenu");
var tarHeight = theMenu.height();
theMenu.css({height:0,opacity:0});
theSpan.hover(
function(){
$(this).addClass("selected");
theMenu.stop().show().animate({height:tarHeight,opacity:1},400);
},
function(){
$(this).removeClass("selected");
theMenu.stop().animate({height:0,opacity:0},400,function(){
$(this).css({display:"none"});
});
}
);
});
}
$(document).ready(function(){
dropMenu(".drop-menu-effect");
});
</script>
<div class="navbox">
<div class="nav">
<ul class="clearfix">
<li><a class="selected" target="_blank" href="http://www.17sucai.com/"><span>网站首页</span></a></li>
<li class="drop-menu-effect">
<a target="_blank" href="http://www.17sucai.com/"><span>jquery代码</span></a>
<ul class="submenu">
<li><a href="http://www.17sucai.com/">jquery图片特效</a></li>
<li><a href="http://www.17sucai.com/">jquery导航菜单</a></li>
<li><a href="http://www.17sucai.com/">jquery选项卡特效</a></li>
<li><a href="http://www.17sucai.com/">jquery文字特效</a></li>
</ul>
</li>
<li class="drop-menu-effect">
<a target="_blank" href="http://www.17sucai.com/"><span>jquery图片特效</span></a>
<ul class="submenu">
<li><a href="http://www.17sucai.com/">jquery图片切换</a></li>
<li><a href="http://www.17sucai.com/">jquery幻灯片</a></li>
<li><a href="http://www.17sucai.com/">jquery图片滚动</a></li>
<li><a href="http://www.17sucai.com/">jquery图片放大镜</a></li>
<li><a href="http://www.17sucai.com/">jquery广告</a></li>
<li><a href="http://www.17sucai.com/">jquery更多特效</a></li>
</ul>
</li>
<li class="drop-menu-effect">
<a target="_blank" href="http://www.17sucai.com/"><span>jquery导航菜单</span></a>
<ul class="submenu">
<li><a href="http://www.17sucai.com/">jquery动画菜单</a></li>
<li><a href="http://www.17sucai.com/">jquery树形菜单</a></li>
<li><a href="http://www.17sucai.com/">jquery下拉菜单</a></li>
<li><a href="http://www.17sucai.com/">jquery右键菜单</a></li>
<li><a href="http://www.17sucai.com/">jquery更多特效</a></li>
</ul>
</li>
<li class="drop-menu-effect">
<a target="_blank" href="http://www.17sucai.com/"><span>jquery选项卡特效</span></a>
<ul class="submenu">
<li><a href="http://www.17sucai.com/">jquery选项卡切换</a></li>
<li><a href="http://www.17sucai.com/">jquery滑动选项卡</a></li>
<li><a href="http://www.17sucai.com/">jquery更多特效</a></li>
</ul>
</li>
<li class="drop-menu-effect">
<a target="_blank" href="http://www.17sucai.com/"><span>jquery文字特效</span></a>
<ul class="submenu">
<li><a href="http://www.17sucai.com/">jquery文字滚动</a></li>
<li><a href="http://www.17sucai.com/">jquery文字闪烁</a></li>
<li><a href="http://www.17sucai.com/">jquery文字切换</a></li>
<li><a href="http://www.17sucai.com/">jquery文字数量</a></li>
<li><a href="http://www.17sucai.com/">jquery文字改变</a></li>
<li><a href="http://www.17sucai.com/">jquery更多特效</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
兼容ie7的导航下拉菜单的更多相关文章
- 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- jq+css+html简单实现导航下拉菜单
相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...
- HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；
1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...
- MDNavBarView下拉导航菜单（仿美团导航下拉菜单）
说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...
- 一款多浏览器兼容的javascript多级下拉菜单
这个多级下拉菜单的脚本大小不到2K,带有动画效果,可以方便地支持多个实例,并且能良好兼容WordPress系统wp_list_cats和wp_list_pages生成的多级列表.要初始化一个菜单,只需 ...
- bootstrap：导航下拉菜单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- js导航下拉菜单
使用定时器.鼠标移动事件 var img = $('#user_head'); var menu = $('.nav_list'); var i=0; var timer; img.mouseente ...
- js二级导航下拉菜单
<!DOCTYPE html> <html> <head> <title>导航列表</title> <meta http-equiv= ...
随机推荐
- ASP.NET MVC4 WebAPI若干要点
本文仅仅是将一些可以运行无误的WebAPI示例的要点,记录下来,供自己查阅,也供刚刚学习WebAPI的读者参考之. 1.默认的API是不会过滤到action这个级别的,如果要过滤到这个级别,必须在路由 ...
- I2C协议(转)
1.I2C协议 2条双向串行线,一条数据线SDA,一条时钟线SCL. SDA传输数据是大端传输,每次传输8bit,即一字节. 支持多主控(multimastering),任何时间点只能有一 ...
- 使用spark访问elasticsearch的数据
使用spark访问elasticsearch的数据,前提是spark能访问hive,hive能访问es http://blog.csdn.net/ggz631047367/article/detail ...
- (转).NET代码混淆实践
今天突然对反编译.混淆感兴趣,在网上查了一些资料,文章大部分内容来源http://www.cnblogs.com/hsapphire/archive/2010/11/21/1883514.html. ...
- C# 位域[flags] 转
C# 位域[flags] .NET中的枚举我们一般有两种用法,一是表示唯一的元素序列,例如一周里的各天:还有就是用来表示多种复合的状态.这个时候一般需要为枚举加上[Flags]特性标记为位域,例如: ...
- 移植ok6410
tftp u-boot.bin http://blog.csdn.net/link_hui/article/details/5593518 LED driver http://blog.csdn.ne ...
- oracle 事务测试
此文章是根据官方改变 模拟帐户转账流程 1.JOHN帐户扣除-DAVID帐户增加-记录日志-事务提交 三个操作必须全部完成此事务才完成,否则失败 创建帐户余额表自增字段自增序列: ; 创建支票表 ...
- HDU 4770 Lights Against Dudely
Lights Against Dudely Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- C# OpenFileDialog
OpenFileDialog 用于浏览并打开文件,在Windows Forms中使用,表现为标准的Windows对话框. 实例: 1.新建Windows Form Application 2.添加Op ...
- NAT学习笔记
NAT介绍 NAT, 全称网络地址转换(Network Address Translation),是一种在IP封包通过路由器或防火墙时重写来源IP地址或目的IP地址的技术. NAT的分类及介绍 NAT ...