jQuery弹性滑动导航菜单实现思路及代码




代码如下:

<!-- 本文参照了该作者的思路：http://runjs.cn/code/ouvvjqka，jquery代码系另外编写 -->
<!-- 本文出自：http://blog.csdn.net/liuyanzhi08 -->
<!-- 实现思路：
CSS:用一个绝对定位的div作为动画滑块,改变它的left属性来呈现动画效果
javascript：hover()触发移动鼠标到导航nav的动作，和移出导航nav的动作（即返回到current导航）
-->
<!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>

赞 (0)

相关推荐

  • 基于jquery实现导航菜单高亮显示（两种方法）

    基于jquery实现导航菜单高亮显示（两种方法）

    项目需求: 实现原理:当选中当前元素时,给当前元素添加样式,同级元素移除样式. 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 效果图如下: 示例代码一: 具体示例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

  • 纯CSS打造的导航菜单(附jquery版)

    纯CSS打造的导航菜单(附jquery版)

    方式一:直接编写代码实现 效果如下: 代码如下: 复制代码 代码如下: <html> <head> <title>无需表格的菜单</title> <style> <!-- body{ background-color:#ffdee0; } #navigation { width:200px; font-family:Arial; } #navigation ul { list-style-type:none; /* 不显示项目符号 */ m

  • jQuery渐变发光导航菜单的实例代码

    jQuery渐变发光导航菜单的实例代码

    下面和大家分享一下具体的实现过程. HTML标签结构: 复制代码 代码如下: <ul class="animation_menu">     <li class="current">         <a href="#">菜单一<span>菜单一</span></a>     </li>     <li>         <a href=&qu

  • Jquery+CSS 创建流动导航菜单 Fluid Navigation

    Jquery+CSS 创建流动导航菜单 Fluid Navigation

    那么我们应该如何实现流动导航菜单呢?一.效果图鼠标滑过Menu,即Show提示信息. 二.实现步骤 1.CSS代码 复制代码 代码如下: menuBarHolder { width: 730px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;} #menuBarHolder ul{ list-style-type:none; display:b

  • 基于jQuery的简单的列表导航菜单

    基于jQuery的简单的列表导航菜单

    下面是我做的一个简单的导航菜单,因为是新手,难免有什么不对的地方,希望大家拍砖! 好了 开始进入正题吧: 1.首先定义CSS样式表: 复制代码 代码如下: <style type="text/css"> body{font-size:13px} ul,li{list-style-type:none;padding:0px;margin:0px} .menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFD

  • jQuery实现简单漂亮的Nav导航菜单效果

    jQuery实现简单漂亮的Nav导航菜单效果

    本文实例讲述了jQuery实现简单漂亮的Nav导航菜单效果.分享给大家供大家参考,具体如下: 自己写的一个简单的导航菜单,先看效果: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项. 页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一个 div 则是底部的蓝条,需要给第一项和最后一项设置不同的 class ,样式需要用到: <div id="nav"> <div class="navItem ind

  • jQuery实现的动态伸缩导航菜单实例

    本文实例讲述了jQuery实现的动态伸缩导航菜单.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">&l

  • jQuery三级下拉列表导航菜单代码分享

    jQuery三级下拉列表导航菜单代码分享

    本文实例讲述了jQuery三级下拉列表导航菜单.分享给大家供大家参考.具体如下: jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js,可无限极分类,可智能判断是否有下级菜单,鼠标经过上次菜单显示下级菜单. 运行效果图:             -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery三级下拉列表导航菜单代码如下 <head> <meta

  • jQuery实现简洁的导航菜单效果

    jQuery实现简洁的导航菜单效果

    本文实例讲述了JavaScript实现的伸展收缩型菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项. 页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一个 div 则是底部的蓝条,需要给第一项和最后一项设置不同的 class ,样式需要用到: <div id="nav"> <div class="navItem indexNavItem&

  • JQuery 写的个性导航菜单

    JQuery 写的个性导航菜单

    (一):XHTML: 复制代码 代码如下: <div id="sidebar"> <ul> <li><a href="index.html" class="normalMenu">Home</a></li> <li><a href="services.html" class="normalMenu">Servic

  • Jquery实现带动画效果的经典二级导航菜单

    Jquery实现带动画效果的经典二级导航菜单

    导航菜单比较实用,当然还是选择经典的,代码最少的,效果最好的喽,各位童鞋请围观哦,废话不说, 效果图如下,欢迎评价: 看代码: 复制代码 代码如下: <!DOCTYPE html > <html> <head> <title>一款带动画效果的经典二级导航菜单Jquery特效</title> <meta name="author" content="Jquery" /> <meta name

  • 分享14个很酷的jQuery导航菜单插件

    分享14个很酷的jQuery导航菜单插件

    导航按钮是网站的非常重要的一部分,因其将网站的所有部分而集中一处,jQuery导航菜单插件在其中扮演重要的角色. 本文介绍了14个很酷的jQuery导航菜单插件,它们够漂亮.简单,并且完全兼容各种类型的web浏览器. 1.Facets Navigation Demo | Download 2.Rocking & Rolling Demo | Download 3.Garage Door Menu Demo | Download 4.Little Boxes Menu Demo | Downloa

  • 制作jquery遮罩层效果导航菜单代码分享

    jquery导航是一个网站必不可少的模块,当一个用户在一个网站上浏览的时候,为了某个目的而查看网站导航栏的时候,突出导航栏的效果是重中之重.因此必须要使用一个效果:jquery遮罩层.利用明暗效果来突出当前用户的操作. 复制代码 代码如下: $(function() {var $oe_menu= $('#oe_menu');var $oe_menu_items= $oe_menu.children('li');var $oe_overlay= $('#oe_overlay');         

  • jQuery实现的背景动态变化导航菜单效果

    jQuery实现的背景动态变化导航菜单效果

    本文实例讲述了jQuery实现的背景动态变化导航菜单效果.分享给大家供大家参考.具体如下: 这里介绍一款使用jQuery插件制作完成的导航菜单,一大特点是,菜单的背景有动态效果,与使用的背景图片完全变换,动态效果是在鼠标悬停时出现,也就是把鼠标放在菜单上的时候,背景即开始滚动起来,看上去漂亮极了,而且兼容性也是相当不错的,推荐给网页设计者使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-cha-menu-nav-code

随机推荐