关闭

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

791人阅读 评论(0) 收藏 举报
其实,无论是什么样的二级菜单,原理都是一样的: 
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> | 
<a href="#">菜单二</a> | 
</div>

第三步,在menu层里添加二级菜单层,如下所示。 
复制代码代码如下:

<div id="menu"> 
<a href="#">菜单一</a> | 
<a href="#">菜单二</a> | 
<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> | 
<a href="#">菜单二</a> | 
<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"> 
<a href="#" onmouseover="showDiv('div1')" onmouseout="hiddenDiv('div1')">菜单一</a> 
 |  
<a href="#" onmouseover="showDiv('div2')" onmouseout="hiddenDiv('div2')">菜单二</a> 
 |  
<a href="#" onmouseover="showDiv('div3')" onmouseout="hiddenDiv('div3')">菜单三</a> 
 |  
<a href="#" onmouseover="showDiv('div4')" onmouseout="hiddenDiv('div4')">菜单四</a> 
<div id="div1" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)"> 
<a href="#">子菜单一</a> 
</div> 
<div id="div2" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)"> 
<a href="#">子菜单一</a> 
<a href="#">子菜单二</a> 
</div> 
<div id="div3" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)"> 
<a href="#">子菜单一</a> 
<a href="#">子菜单二</a> 
<a href="#">子菜单三</a> 
</div> 
<div id="div4" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)"> 
<a href="#">子菜单一</a> 
<a href="#">子菜单二</a> 
<a href="#">子菜单三</a> 
<a href="#">子菜单四</a> 
</div> 
</div> 
</body> 
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:370943次
    • 积分:3901
    • 等级:
    • 排名:第8411名
    • 原创:50篇
    • 转载:54篇
    • 译文:0篇
    • 评论:42条
    文章分类
    最新评论