<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery橙色纵向下拉导航 - 网页模板</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/superslide.2.1.js"></script>
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
body {
background:#fff;
font:normal 12px/22px 宋体;
}
img {
border:0;
}
a {
text-decoration:none;
color:#333;
}
.js {
width:90%;
margin:10px auto 0 auto;
}
.js p {
padding:5px 0;
font-weight:bold;
overflow:hidden;
}
.js p span {
float:right;
}
.js p span a {
color:#f00;
text-decoration:underline;
}
.js textarea {
height:50px;
width:98%;
padding:5px;
border:1px solid #ccc;
border-top:2px solid #aaa;
border-left:2px solid #aaa;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.navBar {
position:relative;
z-index:1;
background:#F96105;
color:#fff;
height:40px;
line-height:40px;
}
.nav {
width:980px;
margin:0 auto;
font-family:"Microsoft YaHei",SimSun,SimHei;
}
.nav .m {
float:left;
position:relative;
border:1px solid #EA4800;
border-top:0;
border-bottom:0;
margin-left:-1px;
}
.nav h3 {
float:left;
font-size:100%;
font-weight:normal;
font-size:14px;
height:40px;
overflow:hidden;
}
.nav h3 a {
display:block;
color:#fff;
padding:0 20px;
border-left:1px solid #FA6D06;
vertical-align:top;
}
.nav .on {
border:0;
}
.nav .on h3 a {
background:#fff;
color:#F96105;
font-weight:bold;
border-top:1px solid #FA6D06;
}
.nav .sub {
display:none;
width:160px;
padding:5px 10px 10px 10px;
position:absolute;
left:0;
top:40px;
background:#fff;
border:1px solid #F96105;
border-top:0;
}
.nav .sub li {
height:20px;
line-height:20px;
padding:4px 0;
float:left;
width:80px;
}
.nav .sub li a {
display:block;
padding-left:6px;
background:url(images/icon.png) 0 9px no-repeat;
color:#999;
}
.nav .sub li a:hover {
color:#FA6D06;
}
.nav #m7 .sub {
width:320px;
left:auto;
right:-1px;
}
</style>
</head>
<body>
<br />
<div class="navBar">
<ul class="nav clearfix">
<li id="m1" class="m on">
<h3><a target="_blank" href="http://www.moobnn.com/">网站首页</a></h3>
</li>
<li id="m2" class="m">
<h3><a target="_blank" href="http://www.moobnn.com/">网页模板</a></h3>
<ul class="sub" style="display: none;">
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
</ul>
</li>
<li id="m3" class="m">
<h3><a target="_blank" href="http://www.moobnn.com/">查看参数</a></h3>
<ul class="sub" style="display: none;">
<li><a href="http://www.moobnn.com">查看参数</a></li>
<li><a href="http://www.moobnn.com">查看参数</a></li>
<li><a href="http://www.moobnn.com">查看参数</a></li>
<li><a href="http://www.moobnn.com">查看参数</a></li>
</ul>
</li>
<li id="m4" class="m">
<h3><a target="_blank" href="http://www.moobnn.com/">基础效果</a></h3>
<ul class="sub" style="display: none;">
<li><a href="http://www.moobnn.com">基础效果</a></li>
<li><a href="http://www.moobnn.com">基础效果</a></li>
<li><a href="http://www.moobnn.com">基础效果</a></li>
<li><a href="http://www.moobnn.com">基础效果</a></li>
</ul>
</li>
<li id="m5" class="m">
<h3><a target="_blank" href="http://www.moobnn.com/">扩展效果</a></h3>
<ul class="sub" style="display: none;">
<li><a href="http://www.moobnn.com">扩展效果</a></li>
<li><a href="http://www.moobnn.com">扩展效果</a></li>
<li><a href="http://www.moobnn.com">扩展效果</a></li>
<li><a href="http://www.moobnn.com">扩展效果</a></li>
</ul>
</li>
<li id="m6" class="m">
<h3><a target="_blank" href="http://www.moobnn.com/">SuperSlide</a></h3>
</li>
<li id="m7" class="m">
<h3><a target="_blank" href="http://www.moobnn.com/">网页模板</a></h3>
<ul class="sub" style="display: none;">
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
<li><a href="http://www.moobnn.com">网页模板</a></li>
</ul>
</li>
</ul>
</div>
<div class="content" style="padding:100px;font-size:15px;text-align:center;">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p><br>
<p>来源：<a href="http://www.97zzw.com/" target="_blank">97站长网</a></p>
</div>
<script type="text/javascript">jQuery(".nav").slide({ type:"menu", titCell:".m", targetCell:".sub", delayTime:0, triggerTime:0,returnDefault:false }); </script>
</body>
</html>
jQuery橙色纵向下拉导航 jQuery橙色纵向下拉导航网页特效.zip
版权申诉
151 浏览量
2022-11-20
22:07:34
上传
评论
收藏 32KB ZIP 举报
jQuery橙色纵向下拉导航 jQuery橙色纵向下拉导航网页特效.zip （4个子文件） 
jQuery橙色纵向下拉导航 jQuery橙色纵向下拉导航网页特效 jiaoben1154 images 
icon.png 331B
index.html 6KB js 
superslide.2.1.js 11KB jquery.min.js 70KB资源评论
芝麻粒儿
- 粉丝: 5w+
- 资源: 2万+
最新资源
- SSCMS登录模块需要的JS文件
- JSP网络购物中心毕业设计(源代码+论文).rar
- 白盒测试报告.docx
- 基于LM5117芯片评估开发板硬件参考设计（原理图+PCB）+中英文数据手册资料.zip
- 照片批量重命名软件（文件批量修改图片文件名）
- app.apk
- 人工智能（AI）是计算机科学的一个分支，旨在开发和应用能够模拟、延伸和扩展人类智能的理论、方法和技术，包括机器人、语言识别、图像
- 嵌入式与物联网开发是当今信息技术领域的两大重要分支，它们相互交织，共同推动着智能化时代的进步 嵌入式开发主要关注在嵌入式操作
- 网络安全，这一看似高深莫测的领域，实则与我们每个人的生活息息相关
- 毕业设计基于深度学习的视觉问答系统源码+文档说明+答辩PPT.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
