看到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)这个函数。