基于 jQuery 的旗帜效果纵向多级导航菜单
Written on 五月 10, 2009 – 12:55 下午 | by paopao
最近看了一些基于 jQuery 的好玩的导航菜单，然后就想到了这样一个效果的菜单，其实我也不知道该叫它什么效果，就叫旗帜效果 (flag style) 吧。
先来看看最终效果是什么样的： 演示(Demo)
一个导航菜单，最重要的是可访问性，其他的效果都是为了锦上添花的，所以首先我们要做一个纯 CSS 的纵向导航菜单，这样即使用户关闭了 JavaScript 也能无障碍的访问。
第一步： 一个语义化的 HTML 结构
<h2>Flag Navigation</h2>
<ul id="nav" class="nav">
<li><a href="#">1 HTML</a></li>
<li><a href="#">2 CSS</a>
<ul>
<li><a href="#">2.1 CSS 2</a></li>
<li><a href="#">2.2 CSS 3</a></li>
</ul>
</li>
<li><a href="#">3 JavaScript</a>
<ul>
<li><a href="#">3.1 jQuery</a>
<ul>
<li><a href="#">3.1.1 Download</a></li>
<li><a href="#">3.1.2 Tutorial</a></li>
</ul>
</li>
<li><a href="#">3.2 Mootools</a></li>
<li><a href="#">3.3 Prototype</a></li>
</ul>
</li>
</ul>
一般来说，我们都使用一个嵌套的无序列表来表示一个多级导航菜单。
第二步： 给这段 HTML 加上一些样式
body {font: 15px "Arial"}
h2 {font: 18px "Arial"; font-weight: bold; }
.nav, .nav ul{
width:140px; /* 定义每级菜单的宽度 */
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative; /* 采用相对定位，为子菜单的绝对定位提供基准元素 */
line-height:30px; /* 定义每条菜单的行高 */
}
.nav a:link, .nav a:visited{ /* 定义链接的基本样式 */
display:block;
width:130px; /* 这里的宽度和下面的 padding 加起来是 140px */
padding:0px 5px;
color:#fff;
text-decoration:none;
background:url(bg.png) no-repeat -261px 0px; /* 背景图片定位，采用 CSS Sprites 技术 */
}
.nav a:hover,a:active{ /* 定义链接的悬停和点击时的样式 */
background-position:-79px 0px; /* 修改背景图片定位 */
color:#333;
}
.nav li{ /* 每条菜单的定位方式为相对定位 */
position:relative;
}
.nav ul { /* 子菜单的样式 */
position:absolute; /* 采用绝对定位 */
top:0px; /* 子菜单和上一级菜单上部平齐 */
left:140px; /* 子菜单显示在上一级菜单右侧 */
display:none; /* 子菜单不显示 */
}
.nav li:hover>ul{
display:block; /* 当 list 悬停时，显示它的下一级子菜单 */
}
在 “ul” 的样式中使用 line-height 是为了让菜单文字能纵向居中，同时这个值在我们后面的 jQuery flagNav 插件中有使用到。
这样我们就得到了一个纯 CSS 的纵向多级导航菜单，具体效果可以看看 Demo 页面的第一个菜单。
*这个菜单的效果在 IE6 及其之前的浏览器中是表现不出来的，因为 IE6 不支持 “a” 元素之外的其他元素的 hover 伪类，这个可以通过一些复杂的 CSS Hack 来进行兼容，不过我这里就不管它了，感兴趣的同学可以自行 Google 之。
第三步： 用 jQuery 来添加我们的旗帜动画效果
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easing.1.3.min.js"></script> <script type="text/javascript" src="jquery.flagNav.min.js"></script>
我们将 jQuery 库和 jQuery Easing 插件载入，并载入自己的 jQuery flagNav 插件。
<script type="text/javascript">
$(document).ready(function(){
$("#nav1").flagNav({bgposout:"-261px 0px", bgposover:"-79px 0px"});
$("#nav2").flagNav({bgposout:"-261px 0px", bgposover:"-79px 0px", rollback:true});
});
</script>
再在页面载入后对我们的菜单进行初始化，其中 flagNav 函数的参数中 bgposout 和 bgposover 的值分别和前面 CSS 中 “a:link” 和 “a:hover” 的 background-position 值相对应，rollback 参数则表示在菜单消失时是否使用动画效果，默认值是不使用。
这样我们就完成了一个带旗帜动画效果的纵向多级导航菜单，是不是挺简单的？
这个菜单在所有我使用的浏览器上都测试通过了，如果你有任何问题或建议，欢迎给我留言。
Popularity: 4% [?]
Tags: easing, jQuery, menu, multi-level, navigation, plugin
