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

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

<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. window.performance

    利用window.performance查看网页性能 一般我们可以通过浏览器的调试工具-网络面板,或者代理工具查看网页加载过程中的各个阶段的耗时.而利用window.performance属性则可以获 ...

  2. 河南省第十一届ACM程序设计竞赛 修路

    Problem C: 修路 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 63  Solved: 22[Submit][Status][Web Boar ...

  3. sql 日期对比

    来自这里

  4. 页面布局常用，让子级div排排坐

    画页面的时候经常遇到页面布局的问题,父级div包裹多个子div很常见,代码如下: <div> <div style='width:100px;height: 100px;backgr ...

  5. IIS Express被局域网访问

    在 文件夹 C:\Users\administrator\Documents\IISExpress\config 下面 applicationhost.config 文件里 找到相应的项目 如 < ...

  6. redis备份恢复

    redis的几种数据导入导出方式[转]   环境说明:202.102.221.11 redis源实例202.102.221.12 redis目标实例202.102.221.13 任意linux系统 一 ...

  7. 技巧：Ubuntu踩坑记之网络配置哪里找

    今天在虚拟机中遇到一个关于网络配置的坑,在此记录下来. 我们都知道虚拟机系统(此处指的是vmware)中,虚拟网络主要由三个方式实现: 桥接网络 NAT转换 主机共享网络 在这三种方式下,一般我们使用 ...

  8. 通过.net core源码看下Dictionary的实现

    https://blog.csdn.net/narlon/article/details/80755386     .net core的代码位置 https://github.com/dotnet/c ...

  9. python -- Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools": http://landinghub.visualstudio.com/visual-cpp-build-tools

    用python读取hive数据,引用下面包. #!/usr/bin/env python import pyhs2 as hive 先按照它 pip install pyhs2 出现错误 Collec ...

  10. app常见测试点

    安装与卸载: ●应用是否可以在IOS不同系统版本或android不同系统版本上安装(有的系统版本过低,应用不能适配) ●软件安装后是否可以正常运行,安装后的文件夹及文件是否可以写到指定的目录里. ●安 ...