• 当前位置:首页>>JavaScript教程>>JavaScript综合技巧>>用CSS 快速定制下拉菜单
  • 用CSS 快速定制下拉菜单
  •   访问过 Microsoft 中文主页的很多人都不会忘记它新奇的下拉式菜单吧. 它的确给我们带来一股清新的网风, 它不仅实现了网页下拉式菜单,省去了很多点击的麻烦,还由此展示了一种新颖的网页设计方法.那么我们是否也能在工作中或主页上实现这一美妙的效果呢?带着这一疑问,笔者在实践过程中逐渐掌握了这一方法。尽管没有Microsoft主页上的完美, 毕竟还是达到了异工同曲之妙.


      要做一个下拉式菜单,首先要定义一个格式化的可定位的对象。这个对象不仅可以具有普通对象具备的任何特征,还必须可以重叠在该网页的任何其他对象之上。

      我们知道, 如果要在网页之中的任何对象上再放置一个对象,除了使用Java小程序外,还可以使用CSS 技术。如果使用Java小程序,不外乎是建立在Panel对象和动态生成一幅Image基础之上来完成的 ,这样做不仅烦琐,增加了网页建设的难度,更重要的是延长了访问者等待的时间。我们希望网页精巧、内容丰富而又不希望它过于臃肿、加载速度快,那么CSS就是我们等待已久的利器。

      有了CSS, 网页设计即可变得轻松起来。

      我们利用 CSS 格式化模型定位一个具有填充属性的通用类:.菜单类名 {padding: 填充宽度} 然后对我们要使用的每一个菜单进行如下标记:

    #名称 {
    position: 可以是绝对定位 absolute, 相对定位 relative 和静
    态定位 static
    top: 距顶位置
    left: 距左位置
    width: 菜单宽度
    height: 菜单高度
    color: 菜单颜色
    border: 菜单体型:不画边框 none,实线 solid,双线 double,
    3D外嵌 outset
    vertical-align: 垂直调整
    visibility: 可视性: 可见(IE 为 visible, Netscape 为show)
    隐藏(IE 为 hidden, Netscape 为hide)

      注意:这里的位置和高度单位有cm(绝对单位)、px(像素单位)、em(以M或H字母的高度为比例)、%(百分比单位),读者可根据自己的需要来决定。

      有了这些“容器”,我们还得把所需的菜单项 MenuItem 填到里面去,在定义每一个菜单栏时,除了原料仅仅是 HTML 4.0 的内容外,还要把菜单栏的内容与鼠标的动作联系起来,一个是鼠标停留时onMouseover,另一个是鼠标离开时 onMouseOut。

      通用定义如下:

    <a href="../../鼠标点击到那里去" onMouseOver="显示" onMouseOver="隐藏">
    菜单栏内容</a><br>
    在菜单栏都完成之后,用 SPAN 把这些元素编组起来? 为菜单对象这个容器也要感应鼠标的停留和离开时的事件,所以在编组时也要加以考虑:
    <span id=所属菜单 onMouseOver="显示" onMouseOut="隐藏">
    <div class=菜单类>
    <font face="菜单字体" color="颜色" size=2>

      OK,一个层次分明的菜单就搞定了,我们可以用边框、字体和颜色把每个菜单都风格化,以边框为例。
      如果要把菜单立体化,只须在菜单(border)属性里加上: <粗细> <长度> <颜色> <三维效果> 即可:

         ...{padding: 2pt} #TestMenu1{border:thin soild outset; position:
       absolute;...

      就成为一个立体的细边菜单。

      最后,我们期望菜单是实时建立的,所以借助了 JavaScript 的 document.write 函数,在输出 HTML 代码时,别忘了通知浏览器你使用了CSS:

      document.write (<STYLE type="text/CSS">...

      以上是简单的单层菜单,加以适当的扩充,就可以做成一个多层的,可以在菜单栏里显示图标、音乐、滤镜效果、透明和3D样式的色彩绚丽的折叠式菜单!

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

      若不特别说明, 均为 640 X 480 的分辨率下 IE4、IE5 通过。

    [1]

  • 上一篇:超级链接小技巧
    下一篇:将层叠样式单放在何处