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

]但在《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> | 
<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属性值。在这里就不多介绍了,完整的源代码如下所示:

通用的二级菜单

#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;
}

//显示层
function showDiv(divName)
{
document.getElementById(divName).style.display = "block";
}
//隐藏层
function hiddenDiv(divName)
{
document.getElementById(divName).style.display = "none";
}

菜单一
 | 
菜单二
 | 
菜单三
 | 
菜单四

子菜单一

子菜单一
子菜单二

子菜单一
子菜单二
子菜单三

子菜单一
子菜单二
子菜单三
子菜单四

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

以上代码在IE 7、Opera 9.6、Firefox 3、Flock 2下运行正常,源代码下载
http://xiazai.jb51.net/200906/yuanma/js_erjicaidan.rar

(0)

相关推荐

  • JavaScript调试技巧之console.log()详解

    一.什么是console.log()?除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能:即使没有调试功能,也可以通过安装插件来进行补充.比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来添加调试功能.在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台.通过调用该console对象的log()函数,可以在控制台中打印信息.比如,以下代码将在控制台中打印"Sample log": 复制代

  • javascript:history.go()和History.back()的区别及应用

    复制代码 代码如下: <input type=button value=刷新 onclick="window.location.reload()"> <input type=button value=前进 onclick="window.history.go(1)"> <input type=button value=后退 onclick="window.history.go(-1)"> <input t

  • JavaScript中json对象和string对象之间相互转化

    json对象 复制代码 代码如下: var json = {aa:true,bb:true}; var json1 = {aa:'b',bb:{cc:true,dd:true}}; 1:js操作json对象 复制代码 代码如下: for(var item in json){ alert(item); //结果是 aa,bb, 类型是 string alert(typeof(item)); alert(eval("json."+item)); //结果是true,true类型是boole

  • Javascript 普通函数和构造函数的区别

    普通函数和构造函数的区别 在命名规则上,构造函数一般是首字母大写,普通函数遵照小驼峰式命名法. 在函数调用的时候: function fn() { }    构造函数:1. new fn( )                      2 .构造函数内部会创建一个新的对象,即f的实例                      3. 函数内部的this指向 新创建的f的实例                      4. 默认的返回值是f的实例     普通函数:1. fn( )         

  • javascript jQuery $.post $.ajax用法

    jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示. callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法). type (String) : (可选)官方的说明是:Type o

  • JavaScript 下拉菜单实现代码

    JavaScript下拉菜单 * { padding:0; margin:0; } body { font-family:verdana, sans-serif; font-size:small; } #navigation, #navigation li ul { list-style-type:none; } #navigation { margin:20px; } #navigation li { float:left; text-align:center; position:relati

  • JavaScript 获取当前时间戳的代码

    JavaScript 获取当前时间戳: 第一种方法: 复制代码 代码如下: var timestamp = Date.parse(new Date()); 结果:1280977330000 第二种方法: 复制代码 代码如下: var timestamp = (new Date()).valueOf(); 结果:1280977330748 以上代码将获取从 1970年1月1日午夜开始的毫秒数.二者的区别是,第一种方法的毫秒位上为全零,即只是精确到秒的毫秒数 如题所示,返回unix时间戳所对应的具体

  • JavaScript中的普通函数与构造函数比较

    问题 什么是构造函数? 构造函数与普通函数区别是什么? 用new关键字的时候到底做了什么? 构造函数有返回值怎么办? 构造函数能当普通函数调用吗? 以下是我的一些理解,理解错误的地方恳请大家帮忙指正,谢谢! this this永远指向当前正在被执行的函数或方法的owner.例如: function test(){ console.log(this); } test(); //Window {top: Window, window: Window, location: Location, exte

  • javascript中onclick(this)用法介绍

    this指触发事件的对象 复制代码 代码如下: <input id="myinput" type="text" value="javascript中onclick中的this" onclick="javascript:test(this);"/> 复制代码 代码如下: function test(obj){ alert(obj); //[object HTMLInputElement] alert(obj.id);

  • eval(function(p,a,c,k,e,d)系列解密javascript程序

    步骤:1.新建html页面,把以下代码考进去,运行. 2.把加密的代码粘进文本域,点击解密,OK! 核心代码: 复制代码 代码如下: <script> a=62; function encode() { var code = document.getElementById('code').value; code = code.replace(/[\r\n]+/g, ''); code = code.replace(/'/g, "\\'"); var tmp = code.m

  • javascript getElementById 使用方法及用法

    document.getElementById("link").href; document.getElementById("link").target; document.getElementById("img").src; document.getElementById("img").width; document.getElementById("img").height; document.getEl

随机推荐