下拉菜单先直接来看效果是怎样:
当鼠标移到选单之后,下方会展开并有其它说明内容,我这边是把展开的部份加上图片内容,让它有其它不同的变化。因为这样的动作就像人家庙会时会有舞狮从嘴里丢下贺联一样,所以我才取名为"贺联式选单"。
这样的效果其实只需要 HTML 及 CSS 配合就能做出来了,我们先来看 HTML 的部份:
检视原始码 HTML
XML/HTML Code复制内容到剪贴板
梅干桑
自我介绍Photoshop
上课囉!!Q & A
问题讨论男丁格尔
人材
丁丁是人材格言
好话大家说WOWGame
使用 UL 及 LI 来做选单的项目,每一个 LI 中的 A 连结是我们主要的选单内容,而其 DIV 是更进阶的描述内容,若不需要的话则可以不用加。因为我要让每个选单都有不同的背景图,所以还需要帮 A 连结都加一个独立的 class。
然后,我有 7 个 LI 选单项目,因此我还请