A colourful bubble?

基于 jQuery 的旗帜效果纵向多级导航菜单

最近看了一些基于 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