技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> 我们来做一个会呼吸的菜单吧!!

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

浏览:3245次  出处信息

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

大家先可以看一下最终的效果 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的可扩展性很低..= =||

建议继续学习:

  1. 120个优秀的水平导航设计    (阅读:73808)
  2. 网站导航设计的6大分类    (阅读:7839)
  3. 递归并不一定非得是“自己调用自己的function”    (阅读:3167)
  4. 实现一个更精简的Tab    (阅读:2393)
  5. 关于网站地图    (阅读:2384)
  6. 用面包屑来简化多层的tabs    (阅读:2349)
  7. 网站导航设计模式指南    (阅读:2326)
  8. 给网站布置一个明晰的“关于”页面    (阅读:2181)
  9. 看看Gmail的新功能    (阅读:2133)
  10. 与众不同易,精益求精难 — QQ导航改版设计心得    (阅读:2445)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:HTML优化
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1