脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → DIV菜单层

DIV菜单层实现代码

 更新时间：2010年11月19日 18:35:29   作者：  
昨天我问一美工jQuery怎么样了，他说简单的还可以，复杂的就不行了，我又问是哪种程度的复杂？
他便给我截了个图是，QQ商城的分类菜单，效果如下:

我看了一下，咦！咱们这博客园也是这种呀！我自己之前也没做过这种效果，正好自己试试！（我不是做美工的，不过到js略懂罢了！）
一、分析：
1，右边大分类肯定是一个层下面用divMenuContent表示
2，左边鼠标移上去的那个应该也是个层，下面用divMenuItem表示
问题：怎么样表现过如图的样子呢？左边和右边看起来是一体的！于是想到divMenuItem的右边为none,而且z轴高于divMenuContent，让它正好压在divMenuContent的边框上！
下面是两个层的样式：
复制代码 代码如下:

#divMenuItem
{
position:absolute;
z-index:99;
width:147px;
height:25px;
border:3px solid #963;
border-right:0px;
background-color:#FC9;
display:none;
}
#divMenuContent
{
display:none;
position:absolute;
z-index:98;
width:200px;
height:505px;
border:3px solid #963;
background-color:#FC9;
}

然后布局一个页面测试用：
复制代码 代码如下:

<body>
<br />
<br />
<br />
<ul class="menu" id="menu">
<li>aaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbb</li>
<li>cccccccdccccc</li>
<li>ddddddddddddd</li>
<li>eeeeeeeeeeeee</li>
<li>fffffffffffff</li>
<li>ggggggggggggg</li>
<li>hhhhhhhhhhhhh</li>
</ul>
<div id="divMenuItem"></div>
<div id="divMenuContent"></div>
</body>

简单设置一下menu的样式：
复制代码 代码如下:

body
{
margin:0px;
padding:0px;
}
.menu
{
list-style-type:none;
float:left;
border:1px solid green;
width:150px;
}
.menu li
{
height:25px;
background-color:#CCC;
border:1px solid red;
}

主要实现：
复制代码 代码如下:

$("#menu li").mouseenter(function()
{
var offset=$(this).offset();
$("#divMenuItem")
.offset({
top:offset.top,left:offset.left
})
.html($(this).html())
.show()
$("#divMenuContent")
.offset({
top:offset.top,left:offset.left+$(this).width()-1
})
.show()
})

这里主要就是定位问题了！逻辑上是对的，可发现除一次移上去显示正常外，以后每移上的第一个都有点错位！这里也是一直没搞明白是怎么回事！后来在show()后又offset()了一下就好了，希望高人指明。
修改后的全部JS如下：
复制代码 代码如下:

$(function(){
$("#divMenuItem,#divMenuContent").mouseout(function(e)
{
if($(e.toElement).parent().attr("id")!="menu" && $(e.toElement).attr("id")!="divMenuContent")
{
$("#divMenuItem").hide();
$("#divMenuContent").hide();
}
})
$("#menu li").mouseenter(function()
{
var offset=$(this).offset();
$("#divMenuItem")
.offset({
top:offset.top,left:offset.left
})
.html($(this).html())
.show()
.offset({
top:offset.top,left:offset.left
});
$("#divMenuContent")
.offset({
top:offset.top,left:offset.left+$(this).width()-1
})
.show()
/* .offset({
top:offset.top,left:offset.left+$(this).width()-1
});*/
.offset({
top:$("#menu li").first().offset().top,left:offset.left+$(this).width()-1
});
})
})

里面有一块注释，offset()那块，它和下面的offset()是两个效果，现在的效果图：

 

注释部分换一下效果图：

 

效果已在：IE6,7,8，chrome中测试通过！
代码打包下载/201011/yuanma/menu_jquery1.rar

相关文章

  • js实现浏览器打印功能的示例代码

    js实现浏览器打印功能的示例代码

    这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-07-07
  • javascript基础知识讲解

    javascript基础知识讲解

    本篇适合javascript新手或者学了前端一段时间，对js概念不清晰的同学。本文将讲述几点对于初学者遇到的javascript的坑，相信对javascript基础薄弱的同学，可以加深对javascript的理解
    2017-01-01
  • 基于js判断浏览器是否支持webGL

    基于js判断浏览器是否支持webGL

    这篇文章主要介绍了基于js判断浏览器是否支持webGL,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • JS日期和时间选择控件升级版(自写)

    JS日期和时间选择控件升级版(自写)

    鉴于网上找到的几个日期选择程序有些问题，遂着手重写一个程序，添加了时间选择功能，截图及源码如下，有需要的朋友可以参考下
    2013-08-08
  • JavaScript初学者必看“new”

    JavaScript初学者必看“new”

    这篇文章主要为大家详细介绍了JavaScript初学者必看的“new”，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JS判断数组里是否有重复元素的方法小结

    JS判断数组里是否有重复元素的方法小结

    这篇文章主要介绍了JS判断数组里是否有重复元素的方法,结合实例形式分析了javascript针对数组重复元素判断相关的遍历、排序、递归等相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • js阻止移动端页面滚动的两种方法

    js阻止移动端页面滚动的两种方法

    本文主要介绍了js阻止移动端页面滚动的两种方法。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • 用apply让javascript函数仅执行一次的代码

    用apply让javascript函数仅执行一次的代码

    有时候我们只想要让某些脚步函数执行一次就算完成任务了。如何实现这种功能呢？简单模仿下面这段就可以轻松搞定了
    2010-06-06
  • js实现导航栏中英文切换效果

    js实现导航栏中英文切换效果

    本篇文章主要分享了javascript实现导航栏中英文切换效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • js将json格式的对象拼接成复杂的url参数方法

    js将json格式的对象拼接成复杂的url参数方法

    下面小编就为大家带来一篇js将json格式的对象拼接成复杂的url参数方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论