DIV菜单层实现代码


Posted in Javascript onNovember 19, 2010

他便给我截了个图是,QQ商城的分类菜单,效果如下:
DIV菜单层实现代码
我看了一下,咦!咱们这博客园也是这种呀!我自己之前也没做过这种效果,正好自己试试!(我不是做美工的,不过到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()是两个效果,现在的效果图:

DIV菜单层实现代码

 

注释部分换一下效果图:

DIV菜单层实现代码

 

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

Javascript 相关文章推荐
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
vue实现节点增删改功能
Sep 26 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
js实现日历
Nov 07 Javascript
JavaScript实现优先级队列
Dec 06 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 #Javascript
基于jquery的跨域调用文件
Nov 19 #Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 #Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 #Javascript
JQuery 选择和过滤方法代码总结
Nov 19 #Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 #Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 #Javascript
You might like
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
replace()方法查找字符使用示例
2013/10/28 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
详解jQuery中的事件
2016/12/14 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python中的面向对象编程详解(下)
2015/04/13 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Pycharm安装python库的方法
2020/11/24 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
10个顶级Python实用库推荐
2021/03/04 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
一套带答案的C++笔试题
2014/01/10 面试题
医药工作岗位求职信分享
2013/12/31 职场文书
机修工工作职责
2014/02/21 职场文书
集体生日活动方案
2014/08/18 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
食堂管理制度范本
2015/08/04 职场文书
学习经验交流会总结
2015/11/02 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
PHP策略模式写法
2021/04/01 PHP