兼容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]ASP.NET数据绑定菜单控件
public void BindMenu(Menu mn,MenuItem menu,string mainMenu,string sql) { MenuItem mitem = null; DB d ...
- (easy)LeetCode 258.Add Digits
Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. ...
- 《Code Complete》ch.15 使用条件语句
WHAT? 条件语句指if.else.case.switch,循环语句指for.while WHY? 不用条件语句你写得出代码吗? HOW? if-then 正常情况放在异常情况之前 执行频率高的情况 ...
- 在Visual Studio 2013上安装SQLite designer components
最近搞一个WinCE项目,要用到SQLite.看人家都能直接在Visual Studio上连接SQLite.我也按照他们的方法安装了最新的Setups for 32-bit Windows (.NET ...
- &&和||的那点事儿
以前一直以为&&和||的运算结果就是布尔值,但今天看到一段代码又填补的一些知识漏洞. var a = (1&&2&&5) || 3; console.l ...
- C++历史（The History of C++）
C++历史 早期C++ •1979: 首次实现引入类的C(C with Classes first implemented) 1.新特性:类.成员函数.继承类.独立编译.公共和私有访问控制.友元.函数 ...
- 8051学习笔记——AD
AD.C #include<reg52.h> #include <iic.h> #define PCF8591 0x90 //PCF8591 地址 sbit LS138A=P2 ...
- java 中的原始类型与原始封装类型
Java 提供两种不同的类型:引用类型和原始类型(或内置类型).比如:Int是java的原始数据类型,Integer是java为int提供的封装类.Java为每个原始类型提供了封装类,常见的原始与 ...
- 2016-03-24：Windows内存泄露分析工具
参考资料 100%正确的内存泄漏分析工具 ------ tMemMonitor (TMM)
- javascript 同步加载与异步加载
HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面 ...