快捷搜索:

用CSS快速定制下拉菜单

造访过 Microsoft 中文主页的很多人都不会忘怀它别致的下拉式菜单吧. 它切实着实给我们带来一股清新的网风, 它实现了网页高低拉菜单, 不仅剩去了很多点击的麻烦, 并创始了一个网页设计的未来之路.

我们知道, 经由过程 CSS 可以确切地定义一个 HTML 元素的样式,包括它的颜色、字体、边框、3D效果、滤镜等等,我们在斟酌制作下拉菜单时,首先是想到 CSS 的定位技巧,它正确的定位能力可以使我们宁神的以致是在三维空间设置位置和可见性。

CSS 定位应用"position"属性的两种措施定位 HTML 元素,这便是相对定位(relative)和绝对定位(absolute),相关的定位属性有9个:

position、left、top、width、height、clip、overflow、z-index、visibility

当应用"absolute(绝对)"定位元素时,该元素就被算作一个矩形覆盖物来款式化,款式化后的矩形区域就变成了一个可以放置其他 HTML 元素的容器,这个容器可以高出于 HTML 文档的结构之上,区域下面的翰墨和图形永世也无法萦绕和透过该容器显示出来。这样被绝对定位了的元素我们称之为块级元素,在块级元素内放置的 HTML元素我们称之为子元素。

别的,当我们在移动鼠标时,具有对 HTML 元素有感应的 JAVA 动作是 onmouseup、onMouseOver、onMouseOut.

onmouseup 为鼠标点击之后的开释动作

onMouseOver 为鼠标颠末时的动作

onMouseOut 为鼠标脱离某区域时的动作.

除此之外,我们建立菜单都是为了表达必然的快捷的操作,平日是超级连接(URL).菜单上的每一条敕令都应该对鼠标的行踪、点击有感应。以是,必须建立菜单对鼠标行径的多级捕获。首先是容器本身(块级元素)对鼠标颠末时和脱离时建立捕获,其次是菜单上各条敕令对鼠标行径的捕获。也便是鼠标颠末时,菜单打开相应,鼠标离别是菜单关闭。

由于菜单都是在网页调入时动态建立的,为了减轻浏览器的运行包袱,加快速率,以是各个菜单只初始化一次,今后的打开和关闭操作仅仅是容器本身(块级元素)的可视与暗藏而已。

菜单的动态建立用 document.write 语句完成。 ---- 也由于是应用 CSS,是以每个菜单的第一句开首应该如斯:

document.write ('...后跟菜单定位语法,根据浏览器的不合一样平常而言,Netscape 用相对定位, IE 用绝对定位要好一些。

然后是建立容器(块级元素) 对鼠标 onMouseOver 、 onMouseOut 的捕获。可以这样写: document.write('...

其次,以如下要领层层建立菜单及捕获行径。必要留意的是菜单项定义是和鼠标感应操作定义在一块的。

第一条敕令

第二条敕令

第三条敕令

...

假如要把菜单加上边框的话,只须在菜单(块级元素)属性里加上 border:即可。例如:

...{padding: 2pt} #TestMenu1{border:thin soild outset; position:absolute;... 就成为一个立体的细边菜单。

以下是原代码 6KB,载入浏览器时,鼠标在“下拉菜单演示”、“编译器”和“许可阐明” 停靠时,便会呈现下拉式菜单。

您可能还会对下面的文章感兴趣: