首页>>导航菜单>>点击显示和隐藏的菜单(2013-08-25)

点击显示和隐藏的菜单

默认是显示一部分，大部分内容是隐藏的，点击后可以展开，注意本例非jquery代码.

点击显示和隐藏的菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code复制内容到剪贴板
  1.  
  2. <div id="main_demo">  
  3. <div style="height:120px;"></div>   
  4. <DIV class="sideMenu haveBanner">   
  5. <BR>   
  6. <SCRIPT language=javascript type=text/javascript>   
  7.   
  8. var zConfig={   
  9. showConfig:{   
  10. width: {to: 532},   
  11. opacity: {to: 1 }   
  12. },   
  13. hiddenConfig:{   
  14. width: {to: 0},   
  15. opacity: {to: 0 }   
  16. },   
  17. showTime:1,   
  18. hiddenTime:1,   
  19. sFireEvent:"click",   
  20. oAppliedFunction:YAHOO.util.Easing.easeOutStrong   
  21. }   
  22. var showAllCategory=new floatDiv();   
  23.   
  24. YUE.on(window,"load",function(){   
  25. if(get('MiniMPTitem')){   
  26. var fixHeight = get('MiniMPTitem').offsetHeight;   
  27.   
  28. if(fixHeight<320){fixHeight=320;}   
  29. get('MinimoreProductTeam').style.height=fixHeight+"px";   
  30. get('moreProductTeam').style.height=fixHeight+"px";   
  31. get('MinimoreProductMaskIframe').style.height=fixHeight+"px";   
  32. get('moreProductTeam').style.display="none";   
  33.   
  34. var xy = [-128,-135];   
  35. if(!AE.browse.isIE){xy = [-128,-108]}   
  36.   
  37.   
  38. var targetXY = YUD.getXY('moreProductTeamBtn');   
  39.   
  40. var midW = YUD.getViewportWidth()/2;   
  41. var isLeft = targetXY[0] < midW;   
  42. var standX ;   
  43. if(isLeft){   
  44. standX = YUD.getX(YUD.getElementsByClassName('customGroup','div',get('mainContent'))[0]);   
  45. xy[0] = standX - targetXY[0];   
  46. }else{   
  47. standX = YUD.getX(get('mainContent')) + get('mainContent').offsetWidth;   
  48. xy[0] = standX - targetXY[0] - 30;   
  49. }   
  50.   
  51. showAllCategory.init('moreProductTeamBtn','moreProductTeam',xy,zConfig);   
  52.   
  53. }   
  54. }   
  55. );   
  56.   
  57. </SCRIPT>   
  58.   
  59.   
  60.   
  61. <DIV class=customGroup>   
  62. <H3><A href="http://www.freejs.net">www.freejs.net</A></H3>   
  63. <UL>   
  64. <li><a href="daohangcaidan.html" title="各种下拉菜单,导航,多级菜单,右侧展开,左侧展开">导航菜单</a></li>  
  65.            <li><a href="tabbiaoqian.html" title="tab标签,选项卡">TAB标签</a></li>  
  66.            <li><a href="jiaodiantu.html" title="焦点图,相册">焦点图</a></li>  
  67.            <li><a href="jquerytupiantexiao.html" title="Jquery图片特效">Jquery图片特效</a></li>  
  68.            <li><a href="fenye.html" title="翻页,分页">分页</a></li>  
  69.            <li><a href="biaodan.html" title="表单">表单</a></li>  
  70.   
  71.   
  72. </UL>   
  73. <DIV class=customGroupfooter><A class=more id=moreProductTeamBtn   
  74. href="javascript:void(0)">显示更多</A> </DIV>   
  75. </DIV>   
  76.   
  77. <DIV class=customGroupMore id=MinimoreProductTeam>   
  78. <DIV class=MiniMPTcontainer id=moreProductTeam><IFRAME   
  79. class=MinimoreProductMaskIframe id=MinimoreProductMaskIframe   
  80. style="HEIGHT: 200px" src="about:blank" frameBorder=0></IFRAME><SPAN   
  81. class=MiniMPTclosebtn><A onclick=showAllCategory.hiddenContentForce()   
  82. href="javascript:void(0);"><IMG height=17   
  83. src="freejs/close_more_product_team.gif"   
  84. width=42 border=0></A></SPAN>   
  85. <DIV class=MiniMPTitem id=MiniMPTitem><BR>   
  86. <UL>   
  87. <LI class=column><A   
  88. href="">1</A> </LI>   
  89. <LI class=column><A   
  90. href="">2</A> </LI>   
  91. <LI class=column><A   
  92. href="">3</A> </LI>   
  93. <LI class=column><A   
  94. href="">4</A> </LI>   
  95. <LI class=column><A   
  96. href="">5</A> </LI>   
  97.   
  98. </UL></DIV></DIV></DIV>   
  99. </DIV>   
  100.  

 


原文地址:http://www.freejs.net/article_daohangcaidan_3.html