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

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

<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. Tarjan+树形DP【洛谷P2515】[HAOI2010]软件安装

    [洛谷P2515][HAOI2010]软件安装 题目描述 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得 ...

  2. luogu2486 [SDOI2011]染色

    link 题目大意:给定一个N个点的树,每个点有一个颜色 有M次操作,每次可以修改树某条链所有点变成一个颜色,查询某条链上点的颜色段数 树剖,线段树维护区间合并 我的代码记录的是某个区间左端点颜色.右 ...

  3. luogu4151 最大XOR和路径

    然后呢这道题其实很简单 我们先考虑一种简单的情况,从1直接走到n(不管怎么走的,反正就是走) 然后就能找到一个路径了 这个走的过程用各种zmj算法都能过 然后呢我们发现如果直接走基本不会得到最优解,考 ...

  4. linux进程池模型

    static int nchildren;static pid_t* pids;int main(int argc,char**argv){ int listenfd,i; socklen_t add ...

  5. asp.net core 自定视图主题 实现IViewLocationExpander接口

    新建ThemeViewLocationExpander.cs 实现IViewLocationExpander接口 /// <summary> /// 自定视图主题 实现IViewLocat ...

  6. 数据结构5: 链表（单链表）的基本操作及C语言实现

    逻辑结构上一个挨一个的数据,在实际存储时,并没有像顺序表那样也相互紧挨着.恰恰相反,数据随机分布在内存中的各个位置,这种存储结构称为线性表的链式存储. 由于分散存储,为了能够体现出数据元素之间的逻辑关 ...

  7. java.sql.Date/ java.util.Date/ java.util.Calendar 用法与区别

    在 JDK API  这样解释," 在 JDK 1.1 之前,类 Date 有两个其他的函数.它允许把日期解释为年.月.日.小时.分钟和秒值.它也允许格式化和解析日期字符串.不过,这些函数的 ...

  8. Git的安装使用

    1.什么是Git Git是一个自由和开源的分布式版本管理工具,用于有效.高速的处理任何或大或小的项目.最初由Linux Torvalds编写,用于帮助管理Linux内核开发而开发的一个开放源码的版本管 ...

  9. xlrd和xlwd模块

    xlrd模块 是python中一个第三方的用于读取excle表格的模块 exlce结构分析 一个excle表格包含多个sheet 一个sheet中包含多行多列 每个单元格具备唯一的行号和列号 常用函数 ...

  10. sqlserver 事务日志

    预写式日志(Write-Ahead Logging (WAL)) --在数据写入到数据库之前,先写入到日志. 1.”Begin Tran”记录  -> 缓冲区 2. 日志             ...