Jquery学习系列-制作Menu

这里仿照GANESH的例子利用JQuery和一些第三方的库做了一个Lavalamp的效果,苦恼的是由于要引用第三方的js,没有办法在博客里给大家直接秀出效果来!只能辛苦大家去GANESH查看lavalamp的效果,这里先给大家展示一个截图:

 

 

当鼠标移动的时候,阴影会随着移动并显示动态的效果,具体实现方法如下:

 

首先,我们构建基本的HTML元素:

 

<ul class="lavaLamp">

            <li><a href="#">Home</a></li>

            <li><a href="#">Plant a tree</a></li>

            <li><a href="#">Travel</a></li>

            <li><a href="#">Ride an elephant</a></li>

 </ul>

<ul>与<li>是通常构建菜单的方式,<ul>用来代表一个菜单,<li>用来代表具体的菜单项,事实上我们还有另外一个<li>用来表示当前菜单项,这个我们会通过后台的javascript脚本来添加。
<li class="back"><div class="left"></div></li>

其次,现在我们要添加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;

        }

 这段代码可以直接放在html画面里或者单独的CSS文件里,我们首先使用background: url("../image/bg.gif") no-repeat top;给菜单<ul>添加背景,并设置了一些其他的基本属性,比如height, width, padding, margin等等。
接着,设置<li>的样式,通过float: left,我们可以控制菜单项横向显示而不是竖向显示,紧接着设置了显示当前项的<li>的CSS,这里使用了一种叫做SlidingDoors的CSS技术,之后的文章里我会给大家详细解释。
最后,我们针对锚点的样式进行了设置
第三项,我们开始添加Javascript脚本,这里的诀窍是基于Jquery之上,我们使用了两个第三方的library,lavalamp以及Easing,你只需要添加一行代码就可以实现动态的menu的效果:
<script type="text/javascript">

    $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});

</script>

你可能感兴趣的:(jquery)