兼容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= ...
随机推荐
- 立体匹配：关于OpenCV读写middlebury网站的给定的视差并恢复三维场景的代码
Middlebury是每个研究立体匹配算法的人不可能不使用的网站,Middlebury提供了许多标准的测试库,这极大地推进了立体匹配算法的进展.Middlebury提供的标准库,其计算出的视差保存在后 ...
- java流布局管理器
public class FlowLayoutPosition extends JFrame{ public FlowLayoutPosition() { setTitle( ...
- Object的toString决定了重写equals
默认的toString结果public String toString(){ return getClass().getName()+"@"+Integer.toHexStr ...
- OC基础(2)
类与对象 类的设计 第一个OC类 对象方法的声明和实现 类方法的声明和实现 *:first-child { margin-top: 0 !important; } body > *:last-c ...
- Android开发-API指南-<data>
<data> 英文原文:http://developer.android.com/guide/topics/manifest/data-element.html 采集(更新)日期:2014 ...
- Rational Functional Tester 对象文件（rftdef）合并
Rational Functional Tester (RFT) 是一款集成在Eclipse上的自动化测试工具.而自动化测试最麻烦的维护部分,一大部分也是指的是对象库文件的管理维护. 之前的项目里,经 ...
- linux配置tns
.三个配置文件都是放在$ORACLE_HOME\network\admin目录下. .sqlnet.ora确定解析方式 .listener.ora上设SID_NAME,通常用于JDBC访问,对应的错误 ...
- yii中rights安装
具体安装程序可参考:http://www.focalhot.com/blog/5.html 我在安装过程中一直存在问题,提示表auth_assignment不存在 由于我是将项目中已有的代码复制过来, ...
- 学习总结 for循环语句的应用
for(初始值:条件表达式:状态改变) { } \n 表示换行 \ttab键 \\写出一个斜杠 例题解释 // 输出一个数,打印一到n出来 int n = int.Parse(Console. ...
- 【spring 7】spring和Hibernate的整合：声明式事务
一.声明式事务简介 Spring 的声明式事务管理在底层是建立在 AOP 的基础之上的.其本质是对方法前后进行拦截,然后在目标方法开始之前创建或者加入一个事务,在执行完目标方法之后根据执行情况提交或者 ...