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 动态添加事件代码
Nov 30 Javascript
JS高级笔记
Jul 13 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
Vue响应式原理详解
Apr 18 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
实现一个简单得数据响应系统
Nov 11 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的日期与时间函数技巧
2008/04/24 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
Python数据集切分实例
2018/12/08 Python
python statsmodel的使用
2020/12/21 Python
汽车销售求职自荐信
2013/10/01 职场文书
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
汽车维修求职信
2014/06/15 职场文书
车贷收入证明范本
2014/09/14 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
box-shadow单边阴影的实现
2023/05/21 HTML / CSS