带有描述的XP可折叠菜单

分享于 

3分钟阅读

Web开发

  繁體 雙語

Sample Image - MenuWithDescription.gif

介绍

这是我以前的文章的更新 WindowsXP样式菜单,创建了具有结构。表示和功能分离的Windows XP外观面板栏。 现在这个菜单被更新为支持每个链接 inside的透明弹出描述。

由于本文使用的是前一篇文章,我只在这里展示菜单的结构,你可以复制并粘贴菜单,而不用编写一行代码,只需编写一行代码。

结构( HTML )

完整的HTML在源代码中。

<!-- begin the menu --><divid="MainMenu"><!-- begin submenu --><span><divstyle="width:180"><tablecellpadding="1"cellspacing="0"class="Menu_Head"><tr><tdwidth="90%">ASP.NET</td><td><imgsrc="down.gif"border="0">&nbsp;</td></tr></table></div><divclass="Menu_Items"><div><div><ahref="">User Controls</a><divclass="Description"><divclass="DescTitle">User Controls articles</div> View all articles about User Controls
 </div></div><div><ahref="">Server Controls</a><divclass="Description"><divclass="DescTitle">Server Controls articles</div> Tutorials show you how to write server controls
 </div></div><div><ahref="">Custom Controls</a><divclass="Description"><divclass="DescTitle">Custom Controls articles</div> Tutorials show you how to write advanced custom controls
 </div></div><div><ahref="">Applications</a><divclass="Description"><divclass="DescTitle">Applications</div> View all demo applications like guestbook, forum...
 </div></div></div></div></span><!-- end sub menu -->. . ..

结构相当简单,菜单以第一个 <div> 标记开始,每个子菜单都是嵌套的inside <span> 标记。子菜单 header ( 标题) 是嵌套的inside <div style="宽度:180"> 所有的链接都是嵌套的inside

<divclass="Menu_Items">
在每个链接之后,你应该有一个 <div> 来包含它的描述,它将在你移动鼠标时自动显示。

这是菜单上的。 希望这对你有帮助。

历史记录

  • 19 2002年11月

    修正了扩展 Bug: 在展开/折叠按钮上单击太快将导致子菜单的额外空白。 感谢Obliterator将它的指出。


COL  DES  菜单  
相关文章