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 相关文章推荐
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 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
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php正则表达式(regar expression)
2011/09/10 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
理解javascript async的用法
2017/08/22 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
详细解析Python当中的数据类型和变量
2015/04/25 Python
Python实现简单多线程任务队列
2016/02/27 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python版中国省市经纬度
2020/02/11 Python
python 实现批量图片识别并翻译
2020/11/02 Python
Django数据库迁移常见使用方法
2020/11/12 Python
python切割图片的示例
2020/11/12 Python
JSF如何进行表格处理及取值
2012/08/06 面试题
门卫岗位职责
2013/11/15 职场文书
保洁主管岗位职责
2013/11/20 职场文书
个人教师自我评价范文
2013/12/02 职场文书
教师旷工检讨书
2014/01/18 职场文书
合作意向书模板
2014/03/31 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
检讨书大全
2015/01/27 职场文书
学期个人自我总结
2015/02/13 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
关于MySQL中的 like操作符详情
2021/11/17 MySQL