jQuery弹性滑动导航菜单实现思路及代码
<!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弹性滑动导航菜单实现思路及代码的更多相关文章
- jquery 滑块导航菜单
带滑块的导航菜单,鼠标悬浮时,滑块会移动至鼠标位置,离开时,滑块会回到原来的位置,点击菜单之后滑块会停留在被点击菜单位置,等待下一次的鼠标悬浮事件或者点击事件,效果图: 图片效果不行,直接上代码: & ...
- JQuery 实现导航菜单的高亮显示
需求是这样的 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 网上说的思路是这样的: 在菜单层的 ...
- jQuery滑动导航菜单
js: $(function(){ $("ul.sub").parent().append("<span></span>"); $(&q ...
- jquery 树形导航菜单无限级
转自:http://www.jb51.net/article/71615.htm 侵删<!DOCTYPE html> <html lang="en"> &l ...
- jQuery之导航菜单(点击该父节点时子节点显示,同时子节点的同级隐藏,但是同级的父节点始终显示)
注:对于同一个对象不超过3个操作的,可直接写成一行,超 过3个操作的建议每行写一个操作.这样可读性较强,可提高代码的可读性和可维护性 核心代码: $(".has_children" ...
- jquery水平导航菜单展示
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery 浮动导航菜单(购物网站商品类型)
单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图 男装.女装.美妆等. 这种菜单功能分为两部分: 1.点击菜单项,网页滚动到对应位置,可简单 ...
- 30个实用的jQuery选项卡/导航教程推荐
很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
随机推荐
- BZOJ_1028_[JSOI2007]_麻将_(模拟+贪心)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1028 同一种花色的牌,序数为\(1,2,...,n\).定义"和了"为手上 ...
- [swustoj 771] 奶牛农场
奶牛农场 Description 将军有一个用栅栏围成的矩形农场和一只奶牛,在农场的一个角落放有一只矩形的箱子,有一天将军要出门,他就把奶牛用一根绳子套牢,然后将绳子的另一端绑到了那个箱子不靠栅栏的角 ...
- 【COCOS2DX-LUA 脚本开发之十二】Hybrid模式-利用AssetsManager实现在线更新脚本文件lua、js、图片等资源(免去平台审核周期)
本站文章均为李华明Himi原创,转载务必在明显处注明:(作者新浪微博:@李华明Himi) 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-c ...
- POJ 3177 Redundant Paths (桥,边双连通分量,有重边)
题意:给一个无向图,问需要补多少条边才可以让整个图变成[边双连通图],即任意两个点对之间的一条路径全垮掉,这两个点对仍可以通过其他路径而互通. 思路:POJ 3352的升级版,听说这个图会给重边.先看 ...
- apache多站点配置+多端口配置
Apache多站点配置 这种方法是配置不同的地址访问不同的文件夹的配置 1:修改本机的hosts文件,如下: 示例: 127.0.0.1 localhost 127.0.0.1 www.dede.co ...
- Azure SQL 数据库最新版本现已提供预览版
Tiffany Wissner 数据平台营销高级总监 我们之前在11月宣布将提供新的预览版,在该预览版中我们引入了接近完整的 SQL Server 引擎兼容性和更为高级的性能,这些都代表了下一代的 ...
- NPAIRS框架的理解
<The NPAIRS Computational Statistics Framework for Data Analysis in Neuroimaging> Strother. pe ...
- linux - 开机启动thunderbird、chromium
cd ~/.config/autostart/(没有autostart,自己 mkdir autostart) vim thunderbird.desktop,输入以下: [Desktop Entry ...
- 深入学习Oracle分区表及分区索引
关于分区表和分区索引(About Partitioned Tables and Indexes)对于10gR2而言,基本上可以分成几类: • Range(范围)分区 • Has ...
- POJ 1195- Mobile phones(二维BIT)
题意: 矩阵上的单点更新,范围求和 #include <map> #include <set> #include <list> #include <cmath ...