<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8" />

<meta name="author" content="Nancle" />

<title>jQuery弹性滑动导航菜单</title>

<style type="text/css">

body{ font-family:"Microsoft YaHei";}

#nav_wrapper{ position:relative; width:835px; margin:80px auto; border-bottom:2px #ddd solid;}

#nav_wrapper #nav_menu{ height:50px;}

#nav_wrapper #nav_menu a{ display:block; float:left; height:50px; padding:0 40px; line-height:50px; color:#666; font-size:16px; text-decoration:none;}

#nav_wrapper #nav_animate_block{ position:absolute; bottom:-2px; height:2px; overflow:hidden; background:#80b600;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

var $current_nav = $("#current_nav"); //current元素（当前所在导航项)

var current_nav_width = $current_nav.innerWidth();

var current_nav_left = $current_nav.position().left;

var $nav_animate_block = $("#nav_animate_block"); //动画滑块

$nav_animate_block.css({ width:current_nav_width, left:current_nav_left }); //初始状态下，动画滑块位置在current元素

// 鼠标进入a元素时触发动画事件

$("#nav_menu a").hover(function(){

var index = $(this).index();

var $a_cur = $("#nav_menu").find("a").eq(index);//鼠标移动到的a元素

//利用触发的a元素索引获取其left位置和它的宽度

var width = $a_cur.innerWidth();

var left = $a_cur.position().left;

//设置动画滑块位置

$nav_animate_block.stop().animate({

width: width,

left: left

}, 300)

}, function(){

//鼠标离开a元素时，动画滑块返回current元素位置

$nav_animate_block.stop().animate({

width: current_nav_width,

left: current_nav_left

})

})

});

</script>

</head>

<body>

<div id="nav_wrapper">

<div id="nav_menu">

<a href="#" id="current_nav">首页</a>

<a href="#">产品列表</a>

<a href="#">客户案例</a>

<a href="#">服务平台</a>

<a href="#">交流论坛</a>

<a href="#">关于我们</a>

</div>

<div id="nav_animate_block"></div>

</div>

</body>

</html>

jQuery弹性滑动导航菜单实现思路及代码的更多相关文章

  1. jquery 滑块导航菜单

    带滑块的导航菜单,鼠标悬浮时,滑块会移动至鼠标位置,离开时,滑块会回到原来的位置,点击菜单之后滑块会停留在被点击菜单位置,等待下一次的鼠标悬浮事件或者点击事件,效果图: 图片效果不行,直接上代码: & ...

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

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

  3. jQuery滑动导航菜单

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

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

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

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

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

  6. jquery水平导航菜单展示

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

  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. POJ 2112 - Optimal Milking

    原题地址:http://poj.org/problem?id=2112 题目大意:有K个挤奶机(标号为1 ~ K)和C头奶牛(编号为K + 1 ~ K + C),以邻接矩阵的方式给出它们两两之间的距离 ...

  2. bzoj1063

    仔细观察可以发现,这个规划路径很像树链剖分 树链剖分的经典定理:任意一个点到根的所经过轻边不超过logn 而这个规划路径所走公路相当于轻边,也就是说,不便利度不会很大 那么直接dp即可,设f[x,i, ...

  3. Qt之启动外部程序

    简述 QProcess可以用来启动外部程序,并与它们交互. 要启动一个进程,通过调用start()来进行,参数包含程序的名称和命令行参数,参数作为一个QStringList的单个字符串. 另外,也可以 ...

  4. 使php支持mbstring库

    多国语言并存就意味着多字节,PHP内置的字符串长度函数strlen无法正确处理中文字符串,它得到的只是字符串所占的字节数.对于GB2312的中文编码,strlen得到的值是汉字个数的2倍,而对于UTF ...

  5. 数学语言和程序语言的对比：面向过程与面向集合&命题

    共同之处:都使用字符串或数值来引用一个客观实体.当然数字和字符串也可以作为实体对象,这取决于人的解释. 不同之处:数学语句每一行都给出了一个结论, 程序语句的每一行都定义了一个过程.注意这里所指的程序 ...

  6. 学习Mongodb(一)

    图片摘录自陈彦铭出品2012.5的<10天掌握MongDB> MongoDB的特点--->面向集合存储,易于存储对象类型的数据--->模式自由--->支持动态查询---& ...

  7. css的框架——global.css

    global.css,一般这个css文件是用于装全站主要框架css样式代码. “global”翻译为全局.全部.从翻译中大家也能理解global.css用于做什么.大站常常用于装全站公共的CSS样式选 ...

  8. SharePoint 2010 列表项事件接收器 ItemAdded 的使用方法

    列表项事件处理器是继承于Microsoft.SharePoint.SPItemEventReceiver的类,Microsoft.SharePoint.SPItemEventReceiver类提供了许 ...

  9. HDU 5437 Alisha’s Party

    题意:有k个人带着价值vi的礼物来,开m次门,每次在有t个人来的时候开门放进来p个人,所有人都来了之后再开一次门把剩下的人都放进来,每次带礼物价值高的人先进,价值相同先来先进,q次询问,询问第n个进来 ...

  10. JAVA深复制(深克隆)与浅复制(浅克隆)

    1．浅复制与深复制概念⑴浅复制(浅克隆)被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不 复制它所引用的对象. 1. ...