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 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...
随机推荐
- PHP 静态
类分 1 普通成员 是属于对象的 2 静态成员 是属于类的 例: class Ren { public $name; public static $zhongzu; static 就可以 ...
- Struts框架
Struts是最早的Java开源框架之一,它是MVC设计模式的一个优秀实现. Struts定义了通用的Controller(控制器),通过配置文件(通常是 Struts -config.xml) Ec ...
- CSS3 Media Queries实现响应式布局
概念我就不在这里写啦.大家可以看看以下网页: http://www.runoob.com/cssref/css3-pr-mediaquery.html http://www.w3cplus.com/c ...
- JavaScript Arguments.callee解释
Arguments.callee : 返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文.[function.]arguments.callee可选项 functio ...
- Extend Volume 操作 - 每天5分钟玩转 OpenStack（56）
前面我们讨论了 volume 的 attach 和 detach 操作,今天讨论如何扩大 volume 的容量.为了保护现有数据,cinder 不允许缩小 volume. Extend 操作用于扩大 ...
- Web APi之EntityFramework【CRUD】（三）
前言 之前我们系统学习了EntityFramework,个人觉得有些东西不能学了就算完了,必须要学以致用,在Web API上也少不了增(C).删(D).改(U).查(R).鉴于此,我们通过EF来实现W ...
- Windows Server 2008 下解析二级域名的方法
昨天去了客户那里部署网站,用的是客户那边的windows server 2008. 本文主要以总结问题点的形式来说. 问题1:本机的数据库是SQL SERVER 2008R2,客户那边的数据库是SQL ...
- JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传
主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...
- mysql权限管理
经常遇到有网友在QQ群或者论坛上问关于mysql权限的问题,今天抽空总结一下关于这几年使用MYSQL的时候关于MYSQL数据库的权限管理的经验,也希望能对使用mysql的网友有所帮助! 一.MYSQL ...
- IntelliJ IDEA 转移C盘.IntelliJIdea（索引目录）
转移原因: C盘是机械硬盘,并且容量不多的情况下,建议转移. 转移步骤: 找到索引目录 win10系统下默认路径:C:\Users\asus\.IntelliJIdea2016.2 *复制或剪切到新的 ...