注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery制作的可媲美FLASH的导航菜单

jQuery插件 fishcity 912浏览

这是一款代码简洁,动感可与flash媲美的jquery菜单,并且在下拉的过程中会根据下拉的高度来浮动定位,使菜单一直跟随着页面,提高了整个页面的交互性与体验性。兼容主流浏览器,可以放心使用,最好用高版本的,因为需要支持position:fix属性。下面来我们来看下源码吧。

首先引入jquery库,本例使用谷歌的cdn。

<script src="http://ajax. /ajax/libs/jquery/1.8.0/jquery.min.js"></script>

接来建立html标签,这里的标签与大众的菜单结构基本没什么区别。

<div id="nav" class="nav-side">
   <div id="nav-div">
      <ul>
          <li class="on"><a href="#" >首页</a></li>
	  <li><a href="#">jQuery特效</a></li>
	  <li><a href="#">jQuery相册</a></li>
          <li><a href="#">jQuery表单</a></li>
	  <li><a href="#">jQuery动画</a></li>
          <li><a href="#">jQuery菜单</a></li>
	  <li><a href="#" >jQuery弹窗</a></li>
	  <li><a href="#">jQuery Ajax</a></li>
       </ul>
    </div>
</div>

这里多用了一个id为nav的div,这个是为浮动定位做基础,在下拉的过程中加上浮动值,实现浮动。

css样式

body,html{ padding:0; margin:0;}
a{ text-decoration:none; color:#FFF; font-weight:bold; font-size:14px;}
div,ul,li{ padding:0; margin:0;}
#nav{width:100%; background:#06C; }
#nav-div{ width:1020px; height:42px; margin:auto; position:relative;}
ul{ width:100%; height:42px;list-style:none; cursor:pointer; background: url(images/nav_on.png) no-repeat;}
#nav-div ul li{ width:100px; height:42px; line-height:42px; text-align:center; margin:auto; float:left; color:#FFF; cursor:pointer;}
#nav-div ul li:hover a{ color: #FF6;}
.scoll_nav{position:fixed; top:0;  z-index:10000;}
#nav .nav-on { color:#F00;}

不懂就直接复制吧,不多说了,都是常用的属性。

javascript

$(document).ready(function() {
	var navLi = $("#nav-div ul li"),//获取对象
	navUl = $("#nav-div ul"),
	speed = 200; //移动速度

navLi.hover(function(){
	 n = $(this).index();//取得当前li的index值
	 navUl.stop().animate({backgroundPosition:navLi.width()*n},speed);//把navUI移动到当前li上
     },
    function(){})//鼠标移开时不做事件

$(window).scroll(function() {
     if($(window).scrollTop() >  $("#nav").height()+50) //滚动条滚动的高度大于导航条的高度加50时,添加浮动效果
    {
          $("#nav").addClass("scoll_nav")
     }
     else
    {
     $("#nav").removeClass(	"scoll_nav") //移除浮动效果
    }
});	   			   	 		    
})

ok,完成了。

转载请注明:jQ酷 » jquery制作的可媲美FLASH的导航菜单

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。