JavaScript
搜索
分类

通用的二级菜单代码(css+javascript)

时间：2024-06-09 18:35:28　

在《CSS二级菜单》中，如果一级菜单中的超链接是#，那么只要单击该一级菜单，那么与这个一级菜单对应的二级菜单就会一直显示在网页中，不能隐藏，是一个小小的bug。
后来仔细的想了一想，其实，无论是什么样的二级菜单，原理都是一样的：
1、每一个一级菜单都会对应一个层，而这个层里放着的就是该一级菜单对应的二级菜单。
2、默认情况下，二级菜单这个层是隐藏的，在CSS中将层的display属性值设为none，可以达到这一目的。
3、当鼠标放在一级菜单上时，将对应的二级菜单层显示出来，在CSS中将层的display属性值设为block，可以达到这一目的。
4、当鼠标从一级菜单中移开时，对应的二级菜单层隐藏。
5、当然，如果鼠标从一级菜单移到二级菜单上时，二级菜单也不能隐藏，因此，对二级菜单而言，也必须将其设为，当鼠标在其上时显示当前层，当鼠标移开时隐藏当前层。
好了，有了基本思路之后，我们就可以开始动手创建二级菜单了。
首先，创建一个层，这个层用于包含所有的一级菜单和二级菜单。之所以要创建这个层，是为了可以方便地对整个菜单进行设置，比较说让菜单层中显示，或让菜单居右显示等等，
代码如下所示：


<div id="menu">
</div>


然后，在menu层里添加一级菜单，这个一级菜单可以是直接的超链接，也可以是span或div。也许有人要问，一级菜单不就是超链接吗？的确可以这么说，但是你也同样可以将超链接作用在span或div上，而使用span或div还有一个好处，这个好处在后面再说，在这里，我们还是简单地添加几个超链接吧。


<div id="menu">
<a href="#">菜单一</a>&nbsp;|&nbsp;
<a href="#">菜单二</a>&nbsp;|&nbsp;
</div>


第三步，在menu层里添加二级菜单层，如下所示。


<div id="menu">
<a href="#">菜单一</a>&nbsp;|&nbsp;
<a href="#">菜单二</a>&nbsp;|&nbsp;
<div id="div1">
<a href="#">子菜单一</a>
</div>
<div id="div2">
<a href="#">子菜单一</a>
<a href="#">子菜单二</a>
</div>
</div>


为什么要将二级菜单层放在menu层中呢？因为这样做可以方便的设置二级菜单层的位置。
第四步，使用CSS设置二级菜单层的位置。通常设置一个层的位置都会使用到CSS的position属性，这个属性值常用的有relative、absolute和fixed三种。其中absolute为绝对定位，使用这种方式设置层的位置时，该层是以整个<body>为基础定位，因此，如果浏览器窗口大小改变时，层的位置是会变动的；fixed是相对定位，而这个“相对”是相对浏览器窗口的定位，假设层离浏览器窗口顶部10像素时，无论怎么拖动滚动条，这个层都会在离浏览器窗口顶部10像素的位置出现，即会一直显示在浏览器窗口中。relative也是相对定位，在这个相对定位是相对这个层的原来的位置的定位。在relative模式下，浏览器会先输出层的位置，再相对这个层的位置进行偏移，这也就是我们为什么将二级菜单层放在menu层中的原因。因为二级菜单层一旦产生，它只能相对以前的位置偏移，所以浏览器窗口再怎么变化，也不会影响到层的位置。由于二级菜单层所在位置不同，所以要为每一个二级菜单层设置不同的偏移量，如下所示。


<style type="text/css">
#div1
{
display:none;
position:relative;
left:0px;
top:0px;
width:320px;
}
#div2
{
display:none;
position:relative;
left:50px;
top:0px;
width:320px;
}
</style>
<div id="menu">
<a href="#">菜单一</a>&nbsp;|&nbsp;
<a href="#">菜单二</a>&nbsp;|&nbsp;
<div id="div1">
<a href="#">子菜单一</a>
</div>
<div id="div2">
<a href="#">子菜单一</a>
<a href="#">子菜单二</a>
</div>
</div>


在以上代码中，CSS中的display将层设为隐藏、postion将层设为相对原来位置偏移、left和top设置偏移量，width设置层的宽度。当然，只要你愿意，还可以设置其他属性，如字体大小等，这就不多介绍了。在这里，需要注意的是，二级菜单层不能离一级菜单太远。前面介绍过，当鼠标从一级菜单移到二级菜单中时，二级菜单层是不能隐藏的。如果一级菜单离二级菜单层太远，鼠标刚从一级菜单上移开时，二级菜单层就已经隐藏了，这就达不到二级菜单的目的了。因此，必须要保证鼠标从一级菜单移到二级菜单层上时，二级菜单层来不及隐藏。这就需要使用到二个技巧了：第一、二级菜单层不能离一级菜单太远，如本例所示，二级菜单层的top属性值为0px，这样鼠标从一级菜单移到二级菜单上时，二级菜单来不及隐藏。第二、将一级菜单放在<div>或<span>中，这样只要鼠标在<div>或<span>上时，二级菜单层都不会隐藏，这样看起来一级菜单和二级菜单层之间似乎挺远的，但事实二级菜单层和一级菜单层之间是十分相近，甚至有可能这两个层之间都有重叠。
第五步、设置一级菜单和二级菜单层的onmouseover和onmouseout属性，用于控制二级菜单层的显示和隐藏，这主要是设置二级菜单层的display属性值。在这里就不多介绍了，完整的源代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>通用的二级菜单</title>     <style type="text/css">     #menu     {         width:300px;         margin:auto;     } #div1 { display:none; font-size:12px; position:relative; left:0px; top:0px; background-color:White; padding:5px 10px 0px 10px; width:320px; } #div2 { display:none; font-size:12px; position:relative; left:50px; top:0px; background-color:White; padding:5px 10px 0px 10px; width:320px; } #div3 { display:none; font-size:12px; position:relative; left:120px; top:0px; background-color:White; padding:5px 10px 0px 10px; width:320px; } #div4 { display:none; font-size:12px; position:relative; left:200px; top:0px; background-color:White; padding:5px 10px 0px 10px; width:320px; }     </style>     <script language="javascript" type="text/javascript">      //显示层      function showDiv(divName)      {      document.getElementById(divName).style.display = "block";      }      //隐藏层      function hiddenDiv(divName)      {      document.getElementById(divName).style.display = "none";      }     </script> </head> <body> <div id="menu"> 菜单一 &amp;nbsp;|&amp;nbsp; 菜单二 &amp;nbsp;|&amp;nbsp; 菜单三 &amp;nbsp;|&amp;nbsp; 菜单四 <div id="div1" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)"> 子菜单一 </div> <div id="div2" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)"> 子菜单一 子菜单二 </div> <div id="div3" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)"> 子菜单一 子菜单二 子菜单三 </div> <div id="div4" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)"> 子菜单一 子菜单二 子菜单三 子菜单四 </div> </div> </body> </html>


以上代码在IE 7、Opera 9.6、Firefox 3、Flock 2下运行正常，源代码下载

标签：javascript,二级菜单
0
投稿

猜你喜欢

  • ASP保存远程图片到本地 同时取得第一张图片并创建缩略图的代码

    2011-04-19 11:07:00

  • python反转(逆序)字符串的6种方法详细

    2023-03-14 10:38:41

  • 完美兼容各大浏览器获取HTTP_REFERER方法总结

    2024-04-22 13:04:24

  • Python实现企业微信机器人每天定时发消息实例

    2023-09-04 22:08:40

  • 截字符串 去除HTML标记

    2023-07-29 17:01:08

  • Python实现SMTP发送邮件详细教程

    2021-05-10 03:01:01

  • Python中列表(list)操作方法汇总

    2023-11-12 06:16:33

  • python 追踪except信息方式

    2022-10-07 13:46:02

  • mysql 一次向表中插入多条数据实例讲解

    2024-01-14 06:34:48

  • 学习ASP.NET八天入门：第四天

    2007-08-07 13:40:00

  • 详解将DataGrip连接到MS SQL Server的方法

    2024-01-17 00:41:14

  • 如何利用python和DOS获取wifi密码

    2021-12-15 20:10:50

  • 从web到内网渗透的一次过程详解

    2023-05-20 21:23:08

  • python字典和JSON格式的转换方式

    2022-02-01 14:27:05

  • python3去掉string中的标点符号方法

    2021-06-27 01:29:45

  • 详解MySQL如何有效的存储IP地址及字符串IP和数值之间如何转换

    2024-01-28 11:10:41

  • PyQt5 界面显示无响应的实现

    2021-09-05 08:59:11

  • 为python设置socket代理的方法

    2021-09-23 16:25:34

  • 详解Selenium-webdriver绕开反爬虫机制的4种方法

    2023-09-21 03:30:46

  • PHP date()格式MySQL中插入datetime方法

    2024-05-13 09:51:39
    • asp之家 网络编程 m.aspxhome.com