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

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

<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. C++基础学习1: C++布尔类型

    布尔类型(bool)是C++新增的一种基本数据类型.在标准的C语言中并未定义bool类型,如果需要使用bool类型, 程序员可以通过宏定义来自定义一个bool类型,定义语句如下: #define bo ...

  2. 【笔记】Django基础（一）

    ---恢复内容开始--- [笔记]Django基础(一) oldboy Django  一 关于Python框架的本质 1. HTTP协议消息的格式: 请求(request) 请求方法 路径 HTTP ...

  3. inner join、left join、right join、full join

    A表 a1 b1 c1 01 数学 95 02 语文 90 03 英语 80  B表 a2 b2 01 张三 02 李四 04 王五 SQL语句:select A.*,B.* from A inner ...

  4. java的Spring学习2--构造函数注入

    bean文件如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns:xsi=" ...

  5. Life is a journey

    Life is a journey. What we should care about is not where it's headed but what we see and how we fee ...

  6. 解决mac下ssh空闲一段时间自动断开的问题

    之前在公司就遇到过这种问题,使用ssh登录linux服务器后,在后台放置一段时间,会发现会自动断开,解决的方法很简单: vim /etc/ssh/ssh_config 添加这2句即可 ServerAl ...

  7. rhcs红帽插件及 轮循

    server1:yum install luci ricci -yecho westos | passwd -stdin  ricci/etc/init.d/ricci startchkconfig ...

  8. Go语言基础环境配置（windows）

    一.基础软件包安装 需要安装go环境包.git.IDE(VScode),安装包见下图: 1.1 安装go windows环境直接双击安装包安装即可,在cmd窗口输入go,结果如下图所示即表示安装成功: ...

  9. Java实现范围内随机数

    JDK1.7及以上 int randomNum = ThreadLocalRandom.current().nextInt(min, max + 1); // 包含max,所以要加1 JDK1.7以前 ...

  10. spring test: 配置文件优先级

    application.properties 默认 application-xxx.properties 高 systemEnvironment 高 test/main/resources/ 同名文件 ...