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

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

 

ContractedBlock.gifHTML部分的代码

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

 

 

ContractedBlock.gif ExpandedBlockStart.gif 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; }

 

 

ContractedBlock.gif ExpandedBlockStart.gif 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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值