jquery固定在顶部的导航菜单
体验效果:http://hovertree.com/texiao/jquery/6.htm
HTML文件代码:
<!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导航置顶 - HoverTree</title><base target="_blank" />
<link href="http://hovertree.com/texiao/jquery/6/css/base.css" rel="stylesheet" type="text/css" />
<link href="http://hovertree.com/texiao/jquery/6/css/html5s.css" rel="stylesheet" type="text/css" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<style>
body{text-align:center;}
.nav-wrap{}
/* Clearfix */
.group:after{visibility:hidden;display:block;content:"";clear:both;height:0}
*:first-child+html .group{zoom:1} /* IE7 */
/* Example One */
#example-one{margin:0 auto;list-style:none;position:relative;}
#example-one li{display:inline-block; line-height: 35px;}
#example-one a{color:#5D5D5D;font-size:16px;float:left;padding:0px 20px 15px 20px; margin-top:-3px;text-decoration:none;text-transform:uppercase}
#example-one a:hover{color: black;}
#magic-line{position:absolute;bottom:-2px;left:0;width:100px;height:2px;background:#FF0000}
.current_page_item a{}
.ie6 #example-one li, .ie7 #example-one li{display:inline}
.ie6 #magic-line {bottom:-3px}
/**右边滑动**/
.relativeall{position: fixed; right: 10px; bottom: 300px; width: 50px; height: 26px; text-align: center; border-radius: 2px; z-index: 100;}
.relativealls{position: relative;display: block;cursor: pointer;background-color: rgba(0,0,0,0.5);width: 100%;height: 40px;padding: 4px;border-bottom: 1px solid rgba(255,255,255,0.1);}
.relativeall-img{position: absolute; display: none; right: 80px; bottom: 0;}
.relativealls-top{background-color: #000;opacity: 0.5;padding: 4px;bottom: 180px;height: 40px;cursor: pointer;
position: fixed;right: 2px;width: 50px;text-align: center;z-index: 100;}
</style>
</head>
<body style="position: relative;"> <script>
$(document).ready(function(){
$(".relativealls").hover(function(){
$(this).css("background","rgba(0,0,0,0.6)");
$(this).find(".relativeall-img").fadeIn(500);
},function(){
$(this).css("background","rgba(0,0,0,0.5)");
$(this).find(".relativeall-img").fadeOut(500);
});
$(".relativealls-top").hover(function(){
$(this).css("opacity","0.6");
},function(){
$(this).css("opacity","0.5");
});
$(".imgclicks").live("click",function(){
$("html,body").animate({scrollTop:0});
});
});
</script> <div id="maintop">
<div class="tops">
<div class="maintop" style="margin:0px auto">
<div class="logo2"><a href="http://keleyi.com/"><img style="height:48px" src="http://keleyi.com/images/logo.gif" /></a></div>
<div class="tops-center">
<div class="nav-wrap">
<ul class="" id="example-one">
<li class="current_page_item"> <a href="http://hovertree.com/">首页</a></li>
<li id="jpjsw"> <a href="http://hovertree.com/shortanswer/bjae/7bd72acca3206862.htm">产品介绍</a></li>
<li id="solutions"> <a href="http://hovertree.com/menu/csharp/">互联网+</a>
</li>
<li> <a href="http://hovertree.com">商城模板</a></li>
<li> <a href="http://keleyi.com/a/bjae/bnco7hj3.htm">手机端</a></li>
<li> <a target="_blank" href="http://keleyi.com/keleyi/phtml/">定制商城</a></li> <li style="width: 72px; left: 0px; overflow: hidden;" id="magic-line"></li></ul> </div>
<div class="cpjs" id="jpjs" style="display: none;">
<ul>
<li><a href="http://tool.keleyi.com/">B2C独立商城系统</a></li>
<li><a href="http://hovertree.com">多用户商城系统</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/i1qo2kg6.htm">微分销商城系统</a></li>
<li><a href="http://hovertree.com">连锁百货商城系统</a></li> <li><a href="http://hovertree.com/guestbook/">乐云派电商 ERP</a></li>
</ul>
</div>
<div class="soluion" id="solu" style="display:none">
<dl>
<dt>业务解决方案：</dt>
<dd><a href="http://hovertree.com/hvtart/bjae/nh0pk7kc.htm">O2O电商解决方案</a></dd>
<dd><a href="http://hovertree.com">多商户平台解决方案</a></dd>
<dd><a href="http://hovertree.com/hvtart/bjae/akln9gw2.htm">全渠道营销解决方案</a></dd>
<dd><a href="http://hovertree.com"> B2B经销商报货解决方案</a></dd>
<dd><a href="http://hovertree.com/hvtimg/"> IPTV电视购物解决方案</a></dd> </dl>
<dl>
<dt>柯乐义：</dt>
<dd><a href="http://keleyi.com/a/bjae/sn78qmtf.htm">家居行业解决方案</a></dd>
<dd><a href="http://keleyi.com/ziliao/googlejavascriptstyle.htm">生鲜行业解决方案</a></dd>
<dd><a href="http://hovertree.com/hvtart/bjae/7xlu0jc6.htm">原文</a></dd>
<dd><a href="http://hovertree.com/shortanswer/"> 数码家电行业解决方案</a></dd>
<dd><a href="http://hovertree.com"> 互联网金融行业解决方案</a></dd> </dl>
</div>
</div>
<script>
$("#solutions").hover(function(){
$("#solu").css("display","block");
},function(){
$("#solu").css("display","none");
});
$("#solu").hover(function(){
$("#solu").css("display","block");
},function(){
$("#solu").css("display","none");
});
$("#jpjsw").hover(function(){
$("#jpjs").css("display","block");
},function(){
$("#jpjs").css("display","none");
});
$("#jpjs").hover(function(){
$("#jpjs").css("display","block");
},function(){
$("#jpjs").css("display","none");
});
</script>
</div> </div> </div> <p> http://keleyi.com ------------柯乐义</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>请滚动鼠标轮</p>
<p> </p>
<p> http://keleyi.com/ ------------柯乐义</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> http://keleyi.com/ ------------柯乐义</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> http://keleyi.com/ ------------柯乐义</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> http://keleyi.com/ ------------柯乐义</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> http://keleyi.com ------------柯乐义</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> http://keleyi.com ------------柯乐义</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> http://keleyi.com ------------柯乐义</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> http://keleyi.com ------------柯乐义</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> http://keleyi.com ------------柯乐义</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div style="width:100%;height:500px;"></div> </body></html>
web前端资源:http://www.cnblogs.com/jihua/p/webfront.html
jquery固定在顶部的导航菜单的更多相关文章
- 一款基于jquery固定于顶部的导航
今天给大家分享一款基于jquery固定于顶部的导航,这款导航当浏览器滚动条位于顶部时,导航高度较高,当浏览器滚动向下滚动时,导航高度自动减低,并位于顶部.效果图如下: 在线预览 源码下载 实现的代 ...
- 一款基于jquery滑动后固定于顶部的导航
之前已为大家介绍了好多css3实现的导航菜单.今天分享一款基于jquery滑动后固定于顶部的导航.这款导航的特点是初始位于顶部下面一百个像素,当鼠标滚动时到下方,导航一直处于顶部.效果图如下: 在线预 ...
- jQuery漂亮图标的垂直导航菜单
效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...
- 一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
- jQuery ui背景色动态渐变导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一款基jquery超炫的动画导航菜单
今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览 ...
- 基于jQuery动画二级下拉导航菜单
春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=" ...
- jquery仿天猫商城左侧导航菜单
之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...
- （转）jquery仿天猫商城左侧导航菜单
原文地址:http://www.cnblogs.com/WinKi/p/3398824.html 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...
随机推荐
- react-native 简述
1. RN 是什么 2. RN 与传统Hybrid框架相比的优势 3. RN的优势 4. RN的劣势 5. RN开发重点关注的问题 1 RN是什么 2 RN 与传统Hybrid框架相比的优势 传统的如 ...
- 【非愚人】重要通知：04-01 贴吧继PHP资源之后又。。。
贴吧继PHP资源之后又取消了JAVA,IOS等资源的贴,现在专注于Net,C++,Linux,平面设计.主要是为了让广大Net程序员具备全栈全平台牛人的潜力,故而取消那些干扰因素.Net的潜力和活力大 ...
- SQL Server中的窗口函数
简介 SQL Server 2012之后对窗口函数进行了极大的加强,但对于很多开发人员来说,对窗口函数却不甚了解,导致了这样强大的功能被浪费,因此本篇文章主要谈一谈SQL Server中窗口函 ...
- 实战Hybird app：内存溢出与优化
pheongap项目:http://www.nduoa.com/apk/detail/646816 主要的问题: heap过大,内存低性能差的机子上引起奔溃,直接退出 关于web app的优化,不仅仅 ...
- 【转】oracle中in和exists的区别
原文地址:http://blog.itpub.net/7478833/viewspace-441043/ 感谢作者 in 和 exists区别 in 是把外表和内表作hash join,而ex ...
- SQL 里解析 XML 格式 字段 信息
DECLARE @ItemMessage XML ),zje ),yfje ),bcje ),URL ),Remark )) SET @ItemMessage=N'<List> <i ...
- C#单例模式详解
C#要实现单例模式必须要有以下三点: 声明私有静态成员.私有化构造函数.静态函数返回实例. private static GameManager s_GameManager=null; private ...
- Attach Volume 操作（Part II） - 每天5分钟玩转 OpenStack（54）
上一节我们讨论了 attach volume 操作中 cinder-api 的工作,本节讨论 cinder-volume 和 nova-compute 如何将 volume attach 到 Inst ...
- (转)对Lucene PhraseQuery的slop的理解
所谓PhraseQuery,就是通过短语来检索,比如我想查"big car"这个短语,那么如果待匹配的document的指定项里包含了"big car"这个短语 ...
- Android随笔之——按键长按事件onKeyLongPress
现在安卓手机实体键是越来越少了,但还是有的,恰好自己就碰上了:按键的长按事件...百度了一些博客,内容都基本上是完全一样的,虽然可以捕获到长按事件,但却会和正常的单击冲突.幸好最近开个VPN,goog ...