Skip to content →

jQuery滑动背景导航插件

今天小琦问我一个滑动背影导航的效果, 看了一下貌似是用mootools实现的.
想起以前在蓝色理想上有看到过用jQuery实现的例子,就找来了.还是喜欢jQ啊 =,,=
首先下载Lavalamp, 需要的JS文件以及演示都在里边.

在<head>插入:





html部分:


lavalamp会自动加上一段html来表现当前菜单高亮部分:


css部分:

/* Styles for the entire LavaLamp menu */
.lavaLamp {
    position: relative;
    height: 29px; width: 421px;
    background: url("../image/bg.gif") no-repeat top;
    padding: 15px; margin: 10px 0;
    overflow: hidden;
}
    /* Force the list to flow horizontally */
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        /* Represents the background of the highlighted menu-item. */
        .lavaLamp li.back {
            background: url("../image/lava.gif") no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            .lavaLamp li.back .left {
                background: url("../image/lava.gif") no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        /* Styles for each menu-item. */
        .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px arial;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }

Published in 笔记

2 Comments

  1. swfit swfit

    谢谢啊
    找了好久,终于找着了!!!

发表评论