本文实例讲述了jquery实现顶部向右伸缩的导航区域代码。分享给大家供大家参考。具体如下：

这是一款类似导航的菜单，但扩展性比较强，不但可以用作菜单，更可以用作导航块效果，导航块内可以含有菜单或者是其它的一些功能，本效果基于jQuery实现，用鼠标点击浮动层左端的箭头，即可合拢与伸开此菜单。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-右-隐藏-显示-导航-样式-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题鼠标单击控制收缩和展开的窗口/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS ' * { margin :0；划水：0;} # box { position : absolutherights :0 top :0飞越：隐藏；} # arrow { color: # fff背景技术： # 000;宽度：20 px高度：90 px线高：90 pxfont-size :12 px字体系列： '宋体；文本对齐：居中；字体粗细：加粗；float : left } # col _ box { width :400 px高度：90 px背景技术# eeefloat:left}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ var oMoveBox=$(' # col _ box ')，oArr=$('#arrow ')，maxL=400oarr。单击(function(){ omovebox。animate({ ' width ' : '-=' MaxL })，600，function(){ MaxL=-MaxL；$(“# arrow”).html(maxL0 '？' : '');}) });});/script/headdydiv id=' box ' div id=' arrow '/div div id=' col _ box ' zbrzbrsbrkbry/div/div/body/html希望本文所述对大家的jquery程序设计有所帮助。