兼容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= ...
随机推荐
- PYTHON ASYNCIO: FUTURE, TASK AND THE EVENT LOOP
from :http://masnun.com/2015/11/20/python-asyncio-future-task-and-the-event-loop.html Event Loop On ...
- cocos2d-x 在xcode IOS模拟器中 开启IOS多点触控
在初始化代码中,开启当前层接受触摸 this->setTouchEnabled(true); 在AppController.mm文件中,设置开启多点触控 在- (BOOL)application ...
- css3实现小米商城鼠标移动图片上浮阴影效果
今天在编程爱好者编码库看见一个好玩的程序,代码如下. <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- JavaScript == VS ===
引用自 http://fxk2006.iteye.com/blog/768260 == equality 等同,两边值类型不同的时候,要先进行类型转换,再比较. === identity 恒等, ...
- Jmeter如何设置断言
1.打开飞机订票网站,登录后,确定要查找的关键字为reservation :2.在录制的登录脚本里,添加察看结果树监听器:3.运行一遍脚本:4.在察看结果树里查找reservation文本,并定位页面 ...
- Begin using git (Part1) - Git的安装与配置
Git提供了适用于Linux, Windows, OSX的客户端, 本节以Windows为例介绍基本安装与配置. 所需工具:msysgit, kdiff3. Get windows installer ...
- 【SET】ORACLE SET 命令
set colsep' '; //-域输出分隔符 set echo off; //显示start启动的脚本中的每个sql命令,缺省为on set echo on ...
- MyEclipse开发JAX-RS架构WebServices收发JSON数据格式
最近因项目需求,开始学习WebServices. 1.开发环境: MyEclipse2013 2.客户端发送的JSON数据格式为 {persons:[{"name":"a ...
- Java EXCEL导入的两种方式JXL和POI
Excel导入有两个方法:JXL 和POI 1.JXL解析Excel public class JxlReadExcel { /** * JXL解析Excel * @author Da ...
- log4net按等级多种方式记录日志
log4net.config <?xml version="1.0"?> <configuration> <configSections> &l ...