DIV+CSS实例:收缩展开效果_CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程

第一例缩展菜单的显示/隐藏效果：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html lang="us-en"> <head> <title> 收缩效果,展开效果--http://www.csschina.net</title> <script type="text/javascript"> function showElement(layer){ var myLayer = document.getElementById(layer); if(myLayer.style.display=="none"){ myLayer.style.display="block"; myLayer.backgroundPosition="top"; } else { myLayer.style.display="none"; } } window.addEvent('domready', function(){ var myMenu= new Fx.Slide('v-menu2'); myMenu.hide(); $('toggle').addEvent('click', function(e){ e = new Event(e); myMenu.toggle(); e.stop(); }); }); </script> </head> <body> <a href="#" _fcksavedurl="#" class="button" onclick_fckprotectedatt="%20onclick%3D%22javascript%3AshowElement('v-menu')%22"> <span>CSS中国点击这里</span> </a> <ul id="v-menu" class="v-menu" style="display:none;"> <li><a href="http://www.csschina.net" _fcksavedurl="http://www.csschina.net">Ximicc</a></li> <li><a href=" http://www.csschina.net " _fcksavedurl=" http://www.csschina.net ">CSS Design</a></li> <li><a href="p3.html" _fcksavedurl="p3.html">Css Gallery</a></li> <li><a href="p4.html" _fcksavedurl="p4.html">Entertainment</a></li> <li><a href="p5.html" _fcksavedurl="p5.html">Programming</a></li> </ul> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

这个效果有点生硬。大家有空可以加一些过渡效果。

本文由CSS中国整理

CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程 - CSS中国

搜索

热门标签

DIV+CSS实例:收缩展开效果