一个未完成版的导航栏效果

看到http://www.dibusoft.com/上有个导航，觉得挺不错的，就想模仿它自己写个。可惜，画虎不成反类犬。搞了个很不满意的东西出来。代码如下：

 

HTML部分的代码

<div id="menu">
    <div id="botonera">
        <ul>
            <li id="menu_home"><a href="#">Inicio</a></li>
            <li id="menu_about" class="current"><a href="#">Nosotros</a></li>
            <li id="menu_services"><a href="#">Servicios</a></li>
            <li id="menu_portfolio"><a href="#">Portfolio</a></li>
            <li id="menu_contact"><a href="#">Contacto</a></li>
            <li id="menu_blog"><a href="#">Blog</a></li>
            <li id="menu_background" class="background">
                <div class="left">
                </div>
            </li>
        </ul>
    </div>
</div>

 

 

CSS部分的代码
#menu { float: right; margin: 14px 0 0; padding: 0; width: 450px; height:auto;  }
#botonera { height: 30px; margin: 0; overflow: hidden; padding: 0; position: relative; width:450px; }
#botonera ul { margin: 0; padding: 0; }
#botonera ul li { float: left; list-style-image: none; list-style-position: outside; list-style-type: none; margin: 0; }
#botonera ul li a { display: block; float: left; height: 30px; overflow: hidden; position: relative; text-indent: -500em; z-index: 100; }
#menu_home a { background: transparent url(../images/inicio.gif) no-repeat scroll center center; width: 58px; }
#menu_about a { background: transparent url(../images/nosotros.gif) no-repeat scroll center center; width: 84px; }
#menu_services a { background: transparent url(../images/servicios.gif) no-repeat scroll center center; width: 86px; }
#menu_portfolio a { background: transparent url(../images/portfolio.gif) no-repeat scroll center center; width: 81px; }
#menu_contact a { background: transparent url(../images/contacto.gif) no-repeat scroll center center; width: 84px; }
#menu_blog a { background: transparent url(../images/blog.gif) no-repeat scroll center center; width: 48px; }
#botonera li.background { background: transparent url(../images/bg_menu_right.gif) no-repeat scroll right top; position: absolute; visibility: hidden; z-index: 8; left: 0px; width: 58px; opacity: 1; }
#botonera .background .left { background: transparent url(../images/bg_menu.gif) no-repeat scroll left top; height: 30px; margin-right: 9px; }

 

 

JS部分的代码
$(function() {
    $('#textmouseout').mouseleave(function() { alert('out'); });
    $('#menu_background').css('left', $('#botonera>ul>li.current').attr('offsetLeft'))
    .css('width', $('#botonera>ul>li.current').attr('offsetWidth'))
    .css('visibility', 'visible');
    $('#botonera>ul>li').mouseover(function() {
        $('#menu_background').animate({ left: $(this).attr('offsetLeft'), width: $(this).attr('offsetWidth') }, 'fast');
    });
    $('#botonera').mouseleave(function() {
        $('#menu_background').animate({ left: $('#botonera>ul>li.current').attr('offsetLeft'), width: $('#botonera>ul>li.current').attr('offsetWidth') }, 'fast');
    });
});

 

附件：源文件

今天晚上接着修改。昨晚查了一下，早就有人写出了里面所需要的效果了，好像还引用了其它的插件完成的。

此外还有个很疑惑的地方是jQuery的mouseout和mouseleave事件。 我原以为这两个事件是一致的，没想到mouseout连对象包含的子对象也会有这个事件，而mouseleave则不会把事件绑定给子对象。

 原来jQuery里面还有hover(over,out)这个函数。

 

 

 

转载于:https://www.cnblogs.com/deafcat/archive/2009/03/24/1420895.html