超炫的jquery仿flash导航栏特效
FLASH导航现在基本上已经是过时了，但是我们可以用jQuery来实现flash效果，非常的不错。
演示地址：http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>demo01</title> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="demo.js"></script> </head> <body> <div id="main"> <div class="menu"> <div class="menu_b back1"></div> <span>测试</span> </div> <div class="menu"> <div class="menu_b back2"></div> <span>测试</span> </div> <div class="menu"> <div class="menu_b back3"></div> <span>测试</span> </div> <div class="menu"> <div class="menu_b back4"></div> <span>测试</span> </div> <div class="menu"> <div class="menu_b back5"></div> <span>测试</span> </div> <div class="menu"> <div class="menu_b back6"></div> <span>测试</span> </div> </div> </body> </html>
$(document).ready(function(){
$(".menu").mouseover(function(){
var div = $(this).children(".menu_b");
var span = $(this).children("span");
//隐藏字体，往右移动20px
span.stop(true,false).animate({opacity:'0',left:'20px'},200);
//显示背景动画
div.stop(true,false).animate({width:'100px',marginLeft:'-50px',height:'1px',opacity:'1'},300);
div.animate({height:'40px',marginTop:'-20px',opacity:'1'},300);
//显示字体，往左移动20px
span.animate({opacity:'1',left:'0px'},300);
span.css({color:'#FFF'});
});
$(".menu").mouseout(function(){
var div = $(this).children(".menu_b");
var span = $(this).children("span");
//隐藏字体，往左移动20px
span.stop(true,false).animate({opacity:'0',left:'20px'},200);
//显示背景动画
div.stop(true,false).animate({height:'1px',marginTop:'0px',opacity:'1'},300);
div.animate({width:'0px',marginLeft:'0px',opacity:'1'},300);
//显示字体，往右移动20px
span.animate({opacity:'1',left:'0px'},300);
span.css({color:'#777'});
});
});
动画效果是我根据自己的喜好来写的，喜欢的可以自己更改特效。。
/* demo01 css */
#main{
background: #EEE;
display: inline-block;
padding: 10px;
}
.menu{position: relative;
width: 100px;
height: 40px;
margin: 10px auto;
}
.menu_b{
position: absolute;
width: 0px;
height: 0px;
background: red;
z-index: 1px;
top: 50%;
left: 50%;
}
.menu span{
position: inherit;
display: block;
text-align: center;
line-height: 40px;
z-index: 3px;
font-size: 14px;
font-family: "Microsoft Yahei";
color: #777;
cursor: pointer;
}
.back1{
background: #FF0000;
}
.back2{
background: #921AFF;
}
.back3{
background: #00CACA;
}
.back4{
background: #00DB00;
}
.back5{
background: #FF5809;
}
.back6{
background: #E1E100;
}
代码很简单，使用也很简单，就包括修改都简单，小伙伴们自己看着办吧
-
主要内容：实例,导航按钮图标,实例,定位图标,激活按钮,实例,实例,更多实例导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。 默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。 使用 data-role="navbar" 属性来定义导航栏： 实例 <div data-role="header"> <div data-role="navbar"> <ul> <li><a href="#anylink">首页</a></li>
-
导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。 默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。 使用 data-role="navbar" 属性来定义导航栏： <div data-role="header"> <div data-role="navbar"> <ul> <li><a href="#anylink">首页</a></li>
-
导航栏是一个将商标、导航以及别的元素简单放置到一个简洁导航页头的的包裹。它很容易扩展，而且，在折叠板插件的帮助下，它可以轻松与幕后内容整合。 基础 这些是你开始使用导航条之前需要知道的东西： 导航条要求一个包裹的.navbar以及一个配色方案类（可以是.navbar-default或者.navbar-inverse）。 当在一个导航条中使用多个组件时，必须用一些 对齐类 。 导航条以及它们的内容默
-
导航栏是一个固定区域 （在固定和穿透布局类型中） 。它位于屏幕顶部，包含页面标题和导航元素。 导航栏包含3个部分：左、中、右。每个部分都可以包含任意的HTML内容，但推荐按照如下方式使用： 左部 用来放置返回链接、图标以及单独的文字链接。 中部 用来显示页面标题和标签链接（即按钮控制）。 右部 和左部一样。 导航栏布局 导航栏布局相当简单，根据字面意思即可理解： <div class="navba
-
navigation-bar 属性 类型 默认值 必填 说明 最低版本 title string 否 导航条标题 2.5.1 loading boolean false 否 是否在导航条显示 loading 加载提示 2.5.1 front-color string 否 导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000 2.5.1 background-c
-
简易的导航栏 Simple navbar Jquery Mobile 提供了一个基本的导航栏组件，每一行可以最多放5个按钮，通常在顶部或者底部 导航栏的代码为一个ul列表，被一个容器包裹，这个容器需要有data-role="navbar"属性。要设定某一个链接为活动（selected）状态，给链接增加class="ui-btn-active" 即可。我们给尾部栏设置了一个导航栏，把one项设置为活