我们来做一个会呼吸的菜单吧!!

Skiyo 2010-07-07 12:29:39 浏览 4,223 次

标签导航菜单

我看到了网上有一些例子..我就来凑个热闹..说下我自己的做法..

大家先可以看一下最终的效果 http://resume.skiyo.cn/

我的做法相对比较简单..大部分工作都是css来做的..

首先我们需要看上去差不多是下面的一张菜单图片..你可以点击之后看大图..

然后我们就来写HTML了..注意.重点就在这里..我让a在li的上面..遮盖住li..

以下是代码片段：
<div id="menu">
  <ul>
    <li id="nv_about"><a href="#about_anchor"> </a></li>
    <li id="nv_skill"><a href="#skill_anchor"> </a></li>
    <li id="nv_works"><a href="#works_anchor"> </a></li>
    <li id="nv_introduce"><a href="#introduce_anchor"> </a></li>
    <li id="nv_contact"><a href="#contact_anchor"> </a></li>
  </ul>
</div>

CSS为:

以下是代码片段：
#menu {
    margin-top:10px;
    width:800px;
    height:40px;
}
#menu li {
    list-style:none;
    float:left;
}
#menu li a{
    display:block;
}
#menu #nv_about {
    width:160px;
    height:40px;
    background:url(../images/menu.jpg) no-repeat 0px 0px;
    /* 这是li的背景统一为灰色的 */
}
#menu #nv_about a{
    width:160px;
    height:40px;
    background:url(../images/menu.jpg) no-repeat 0px -40px;
    /* li上面a的背景..是其他的颜色 */
}
#menu #nv_skill {
    width:160px;
    height:40px;
    background:url(../images/menu.jpg) no-repeat -160px 0px;
}
#menu #nv_skill a{
    width:160px;
    height:40px;
    background:url(../images/menu.jpg) no-repeat -160px -40px;
}
#menu #nv_works {
    width:160px;
    height:40px;
    background:url(../images/menu.jpg) no-repeat -320px 0px;
}
#menu #nv_works a{
    width:160px;
    height:40px;
    background:url(../images/menu.jpg) no-repeat -320px -40px;
}
#menu #nv_introduce {
    width:160px;
    height:40px;
    background:url(../images/menu.jpg) no-repeat -480px 0px;
}
#menu #nv_introduce a{
    width:160px;
    height:40px;
    background:url(../images/menu.jpg) no-repeat -480px -40px;
}
#menu #nv_contact {
    width:160px;
    height:40px;
    background:url(../images/menu.jpg) no-repeat -640px 0px;
}
#menu #nv_contact a {
    width:160px;
    height:40px;
    background:url(../images/menu.jpg) no-repeat -640px -40px;
}

然后我们就可以编写jQuery的代码了..

以下是代码片段：
$(document).ready(function (){
    if($.browser.msie && (parseInt($.browser.version) <= 7)){try {document.execCommand("BackgroundImageCache", false, true);}catch(e){}}
    var a = $(’#menu li a’);
    a.css(’opacity’, 0);   //默认的先把a弄成透明的
    a.hover(
        function() {
            $(this).stop().animate({’opacity’: 1}, "slow");
            //鼠标经过的时候 a标签慢速的显示遮盖都后面的li
        },
        function() {
            $(this).stop().animate({’opacity’: 0}, "slow");
            //鼠标移开再把a弄成透明的
        }
    );
});

好了..这个方法的好处就是js代码相对简单..

但是css的可扩展性很低..= =||

我们来做一个会呼吸的菜单吧!!

建议继续学习