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 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...
随机推荐
- 自定义函数执行动态sql语句
--函数中不能调用动态SQL,使用用存储过程吧.如果还要对函数做其他操作,换成存储过程不方便,可以考虑把其他操作一起封装在存储过程里面.如: create proc [dbo].[FUN_YSCL ...
- canvas绘图、WebGL、SVG
目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML ...
- 研究一下javascript的模块规范（CommonJs/AMD/CMD）
最近写react需要使用nodejs作为开发环境,需要通过npm安装一些第三方的依赖库,因此慢慢感觉到nodejs基础薄弱对我带来了一些不安全感,尤其是javascript模块这一块听到了很多概念,比 ...
- Trace2：创建SQL Trace
Trace是轻量级的追踪工具,几乎对系统没有任何副作用,开启Trace,经常能够帮助DBA追踪到一些非常有用的信息.Trace出现的比较早,MS推出更强大的Extended Events来取代Trac ...
- Distributed4：SQL Server 分布式数据库性能测试
我使用三台SQL Server 2012 搭建分布式数据库,将一年的1.4亿条数据大致均匀存储在这三台Server中,每台Server 存储4个月的数据,Physical Server的配置基本相同, ...
- 查看Validate Subscription 的结果
Sql Server Replication Monitor 提供一个feature,能够verify Replication的 Publication 和 Subscription 的数据同步sta ...
- Connect(); // 2015 简要整理
去年 Connect(); 2014 Visual Studio Contact(); 直播笔记 对于我个人来说,今年 Connect(); 的三个重要发布: ASP.NET 5 RC1 Entity ...
- 遍历迭代map的集中方法
public static void main(String[] args) { Map<String, String> map = new HashMap<String, Stri ...
- Java类初始化
Java类初始化 成员变量的初始化和构造器 如果类的成员变量在定义时没有进行显示的初始化赋值,Java会给每个成员变量一个默认值 对于 char.short.byte.int.long.float. ...
- 魔方渗透系统安装VMtools教程
虚拟机魔方渗透系统安装VMtools教程 1.开机登陆后,如图点击安装VMtools. 2.进入media文件夹: cd /media 查看mdia文件夹内容: ls 3.打开VMware T ...