兼容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= ...
随机推荐
- 【转】SQL Server 查询表的记录数(3种方法，推荐第一种)
--SQL Server 查询表的记录数 --one: 使用系统表. SELECT object_name (i.id) TableName, rows as RowCnt FROM sysindex ...
- Error Dropping Database (Can't rmdir '.test\', errno: 17)
MySql 删除数据库出错:Can't rmdir '.\test\', errno: 17 到test数据下的所在的目前data\test目录,删除掉所有的文件后,就可以删除数据了
- POJ 1088 滑雪 记忆化DP
滑雪 Time Limit: 1000MS Memory Limit: 65536K Description Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度 ...
- mysq 因断电而导致的错误
问题来源: 昨天断电,而我没有保存,导致出现以下问题: 2015-10-12 10:48:10 7300 [Note] Plugin 'FEDERATED' is disabled. 2015-10- ...
- python修改excel文件
一.导入模块如图
- 如何激活phpstorm | phpstorm的下载
2016年7月14日 phpsotrm 推送2016.2 更新 phpstorm的下载地址 https://www.jetbrains.com/phpstorm/download/#section=w ...
- 国内外CDN服务商CNAME特征串调研
总结 此篇博文给特定需求的人群使用,通过CNAME的某些特征串,确定其使用的是哪家CDN,大多是国外的CDN,国内的CDN厂商只有几个,格式为:[来源地址]+[截图]+[猜测的特征串],整体博文较长, ...
- 将Excel中数据导入数据库（二）
在上篇文章中介绍到将Excel中数据导入到数据库中,但上篇文章例子只出现了nvachar类型,且数据量很小.今天碰到将Excel中数据导入数据库中的Excel有6419行,其中每行均有48个字段,有i ...
- python的文件操作方法
python中的文件对象:文件对象不仅可以用来访问普通的磁盘文件, 而且也可以访问任何其它类型抽象层面上的"文件". 一旦设置了合适的"钩子", 你就可以访问具 ...
- 保护企业的Word文档
保护企业的Word文档 通常,我们可以对Word文件进行加密码.设置为只读.禁止复制甚至是将内容变成图片加以保护,但这仅限于个人少量文档,如果是企业每天生产大量的word文档好用这种方法就不行,今天为 ...