CSS 悬浮盒菜单

达拉斯・卢 4/27/09, 9:59 PM

看完史密斯的《CSS 悬浮画廊》之后，我觉得利用这办法也可以用来搞个拉风的菜单。鼠标悬浮其上时，菜单项会变得很大，盖住附近的菜单项或者其他元素。

原始的悬浮盒代码使用了两个 img 元素，一个是缩略图，另一个大一点儿。菜单应该避免复制本身的链接，我也想用 CSS 来控制图片而不是用 img 。所以得改改代码了。

HTML

&lt;div id="menu"&gt;
&lt;ul&gt;
&lt;li id="home"&gt;&lt;a href="/"&gt;&lt;span&gt;&lt;em&gt;News&lt;/em&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li id="about"&gt;&lt;a href="/about/"&gt;&lt;span&gt;&lt;em&gt;About&lt;/em&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li id="sketches"&gt;&lt;a href="/sketchbook/"&gt;&lt;span&gt;&lt;em&gt;Sketches&lt;/em&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li id="videos"&gt;&lt;a href="/videos/"&gt;&lt;span&gt;&lt;em&gt;Videos&lt;/em&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li id="store"&gt;&lt;a href="/store/"&gt;&lt;span&gt;&lt;em&gt;Store&lt;/em&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li id="links"&gt;&lt;a href="/links/"&gt;&lt;span&gt;&lt;em&gt;Links&lt;/em&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

用 span 标签来控制菜单条目的样式，最里面又套了个 em 则是为了需要时把它藏起来。

图片（可选）

大幅

http://www.designmeme.com/articles/hoverboxmenu/

CSS 悬浮盒菜单

https://dallas.lu/hover-box-menu-with-css/

Author

达拉斯・卢

Published At

4/27/2009

License

CC-BY-NC-SA-4.0

Cite

APA

达拉斯・卢. (2009-04-27). Dallas Lu. CSS 悬浮盒菜单 [Blog post]. https://dallas.lu/hover-box-menu-with-css/

MLA

达拉斯・卢. "CSS 悬浮盒菜单." Dallas Lu, 2009-04-27 https://dallas.lu/hover-box-menu-with-css/. Accessed 2024-05-03

Chicago (CMS)

达拉斯・卢. "CSS 悬浮盒菜单." Dallas Lu (Blog), 2009-04-27 https://dallas.lu/hover-box-menu-with-css/

Harvard

达拉斯・卢. (2009). CSS 悬浮盒菜单. Dallas Lu. https://dallas.lu/hover-box-menu-with-css/

Vancouver

达拉斯・卢. CSS 悬浮盒菜单. Dallas Lu [Internet]. 2009-04-27; Available from: https://dallas.lu/hover-box-menu-with-css/

Bibtex

@online{达拉斯・卢_2009_CSS 悬浮盒菜单,
author  = {达拉斯・卢},
title   = {{CSS 悬浮盒菜单}},
journal = {Dallas Lu},
type    = {Blog},
doi     = {https://dallas.lu/hover-box-menu-with-css/},
urldate = {2024-05-03},
date    = {2009-04-27},
year    = {2009},
month   = {3},
day     = {27}
}

CFF

CITATION.cff

Internet

CSS 悬浮盒菜单

HTML

图片（可选）

Discussion

Webmention

Comment Form

CSS 悬浮盒菜单

HTML

图片（可选）

Related

4/26/24 网页的打印样式应该怎么写

4/14/24 “茴字的四种写法”之 IP 与域名

4/8/24 供大众交流的论坛和其它替代产品还是不好用

3/18/24 在 OpenWRT 23 中使用 nftset 配置 Shadowsocks 规则

2/16/24 手动建立自己的 IPv6 Tunnel 服务

Discussion

Webmention

Comment Form