带滑块的导航菜单，鼠标悬浮时，滑块会移动至鼠标位置，离开时，滑块会回到原来的位置，点击菜单之后滑块会停留在被点击菜单位置，等待下一次的鼠标悬浮事件或者点击事件，效果图：

图片效果不行，直接上代码：

<body>

    <div class="nav">

        <span>aaa</span>

        <span>bbb</span>

        <span>ccc</span>

        <span>ddd</span>

        <div class="nav_bj"></div>

    </div>

</body>
.nav{

    width:1000px;

    text-align:center;

    background:#666666;

    margin:0 auto;

    position:relative;

}

.nav span{

    width:250px;

    height:41px;

    line-height:41px;

    display:inline-block;

    position:relative;

    z-index:;

    color:#FFF;

    cursor:pointer;

}

.nav_bj{

    background:#0099FF;

    width:250px;

    height:41px;

    position:absolute;

    top:;

    z-index:;

    left:0px;

}
$(function(){

    var x,re,nowX;

    nowX = 0;

    $(".nav span").mouseover(function(){

        x=$(this).position().left;

        $(".nav_bj").animate({left:x})

        clearTimeout(re);

    }).mouseout(function(){

        clearTimeout(re);

        re=setTimeout(function(){

        $(".nav_bj").animate({left:nowX})

        },500);

    });

    $(".nav span").click(function(){

        nowX = $(this).position().left;

        $(".nav_bj").css("left",nowX);

    });

})

需要引用 jQuery ，这种导航条和淘宝已买到的宝贝如出一辙，可用相似方式实现。

jquery 滑块导航菜单的更多相关文章

  1. jQuery弹性滑动导航菜单实现思路及代码

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...

  2. jQuery滑动导航菜单

    js: $(function(){ $("ul.sub").parent().append("<span></span>"); $(&q ...

  3. JQuery 实现导航菜单的高亮显示

    需求是这样的 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 网上说的思路是这样的: 在菜单层的 ...

  4. jquery 树形导航菜单无限级

    转自:http://www.jb51.net/article/71615.htm 侵删<!DOCTYPE html> <html lang="en"> &l ...

  5. jquery水平导航菜单展示

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery之导航菜单（点击该父节点时子节点显示，同时子节点的同级隐藏，但是同级的父节点始终显示）

    注:对于同一个对象不超过3个操作的,可直接写成一行,超 过3个操作的建议每行写一个操作.这样可读性较强,可提高代码的可读性和可维护性 核心代码: $(".has_children" ...

  7. jQuery 浮动导航菜单（购物网站商品类型）

    单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图 男装.女装.美妆等. 这种菜单功能分为两部分: 1.点击菜单项,网页滚动到对应位置,可简单 ...

  8. 30个实用的jQuery选项卡/导航教程推荐

    很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...

  9. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. Qt 学习之路 2（20）：event()

    Qt 学习之路 2(20):event() 豆子 2012年10月10日 Qt 学习之路 2 43条评论 前面的章节中我们曾经提到event()函数.事件对象创建完毕后,Qt 将这个事件对象传递给QO ...

  2. for循环删除list中多个元素出现的误区

    错误的做法是: for(int i= 0;i<list.size();i++) 因为在你删除元素的同时list.size()也在变小,这样就会照成越界. 正确做法:因为要删除list里面的多个的 ...

  3. SprimgMVC学习笔记（八）—— SpringMVC与前台json数据交互

    一.两种交互形式 可以看出,前台传过来的方式有两种,一种是传json格式的数据过来,另一种就是在url的末尾传普通的key/value串过来,针对这两种方式,在Controller类中会有不同的解析, ...

  4. Mybatis学习笔记(五) —— Mapper.xml(输入映射和输出映射）

    一.parameterType(输入类型) 1.1 传递简单类型 <!-- 根据用户id查询用户 --> <select id="queryUserById" p ...

  5. maven 发布 到 远程 tomcat

    需要修改3个地方 首先 maven setting.xml 在 servers 节点 中 添加 一个 server <server> <id>devTomcat</id& ...

  6. JavaScript权威指南--闭包讲解摘记

    不积跬步无以至千里,不积小流无以成江河. 关于闭包的解释,在<JavaScript权威指南>中讲的很透彻了.今天看了书中的一个段讲解,更加深了对闭包的理解,特此记下,以备查阅. 在同一个作 ...

  7. HDU 5934 (强连同分量+缩点)

    题意: 给出n个炸弹的信息 :坐标x , 坐标y , 爆炸半径 , 成本: 如果一个炸弹被引爆那这个范围的都爆炸 , 问最小的成本是多少? 题意:首先先来个n^2 暴力出某个炸弹爆炸波及的其他炸弹,用 ...

  8. 电量分析工具 Battery Historian 的配置及使用

    1.Building from source code(通过各种配置后从源码构建) 官方流程看似很麻烦,但一上手,很快就搞定,让我情何以堪. ps:以下均是参考官方及网友做的 copy https:/ ...

  9. Hibernate通过自编写Sql修改

    @Override public void updateTemMsg(String ticket,String time) { String sql="UPDATE INTER_TEMPTO ...

  10. C# 通过 Hessian服务调用java

    1.下载Hessiancsharp.dll 2.新建一个c#窗体程序,然后在添加一个类库 3.添加一个接口类,接口中的方法名和参数与java中的服务方法名和参数保持一致 public partial ...