..


赞助商链接

jQuery的：一个下拉菜单的幻灯片效果

由Max博西写文章
第1 2

在这短短的文章中，我提出我的jQuery插件创建一个简单的，但不错，下拉菜单 （下拉菜单）的幻灯片效果。 事实上，我必须诚实，是不是所有的我自己的工作... ... 我的工作，其实，实际上是改造这个插件是我允许优化和加入事实上，扩大，效果幻灯片（平仓）。

让我们来看看如何实现下拉菜单

首先，当然，我们需要包括在我们的网页jQuery的 ： 

 



 <script type="text/javascript" src="jquery.js"> </ SCRIPT>

如果没有这一点，我们必须建立在文档的正文（<BODY> ...</ BODY>），这是我们的菜单项目符号列表，其中有（代表肌腱即“展开”其他组成名单关于该项目的母亲悬停）。 这里是一个示例代码： 






 <ul id="mrwddm">



  



 <LI> <a href="/"> bua-beads.com </ A> </ LI>



  



 <LI>的<a href="#">的JavaScript </ A>



    



 <UL>



      



 <LI> <a href="/javascript/guide/">指南</ a> </ LI>



      



 <LI> <a href="/javascript/articoli/">文章</ A> </ LI>



      



 <LI> <a href="/javascript/faq/">常见问题</ A> </ LI>



    



 </ UL>



  



 </ LI>



  



 <LI>的<a href="#">经文</ A>



    



 <UL>



      



 <LI> <a href="/script/applet-java/"> Java小程序</ A> </ LI>



      



 <LI> <a href="/script/javascript/">的JavaScript </ A> </ LI>



      



 <LI> <a href="/script/script-php/"> PHP </ A> </ LI>



      



 <LI> <a href="/script/script-aspnet/"> ASP.Net </ A> </ LI>



    



 </ UL>



  



 </ LI>



  



 <LI> <a href="http://forum.bua-beads.com/">论坛</ a> </ LI>



  



 <LI> <a href="http://blog.bua-beads.com/">博客</ a> </ LI>



  



 <LI> <a href="http://tool​​s.bua-beads.com/">工具</ a> </ LI>







 </ UL>

我们的菜单是，当然，适当的程式化。 要做到这一点只需添加CSS样式表中的这些代码行： 






 UL＃mrwddm {保证金：40px 0px 0px 20像素，填充：0px;}







 ＃Mrwddm李{浮动：左;显示：内联，列表样式：无;}







 ＃Mrwddm他们{显示：块;填充：3px 10px;保证金：0px;文字装饰：无;空白：nowrap;背景：＃EEEEEE;}







 ＃Mrwddm他们：悬停{背景：＃CCCCCC;颜色：＃FFFFFF;}







 ＃Mrwddm他们UL {最小宽度：120px;保证金：3px 0px 0px 0px;填充：0px;位置：绝对;的z - index：999;能见度：隐藏;显示：无;}







 ＃Mrwddm他们UL李{浮动：无;显示：内联;}







 ＃Mrwddm他们UL李一{填充：5px 3px;背景：＃EEEEEE;颜色：＃666666;}







 ＃Mrwddm他们UL李答：悬停{背景：＃CCCCCC;颜色：＃FF6600}

在同一类...
电子学习
CSS（课程） CSS（课程）
网页设计和辅助功能根据W3C CSS和XHTML。 起价29€。
HTML（课程） HTML（课程）
为从29€Web标记语言。
使用Javascript（课程） 使用Javascript（课程）
完成引导客户端脚本。 从39€。
赞助商链接