DIV菜单层实现代码
他便给我截了个图是，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>
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
相关推荐
-
DIV菜单层实现代码
他便给我截了个图是,QQ商城的分类菜单,效果如下:我看了一下,咦!咱们这博客园也是这种呀!我自己之前也没做过这种效果,正好自己试试!(我不是做美工的,不过到js略懂罢了!) 一.分析: 1,右边大分类肯定是一个层下面用divMenuContent表示 2,左边鼠标移上去的那个应该也是个层,下面用divMenuItem表示 问题:怎么样表现过如图的样子呢?左边和右边看起来是一体的!于是想到divMenuItem的右边为none,而且z轴高于divMenuContent,让它正好压在divMenuC
-
jQuery实现折叠、展开的菜单组效果代码
本文实例讲述了jQuery实现折叠.展开的菜单组效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现的漂亮的竖向折叠菜单组,初次运行的时候请刷新一下页面,让jQ载入,这款菜单应用广泛,可用到后台左侧,网站前台也可以用,发现自腾讯微博开放平台,分享给大家一起研究吧.提示:如果有错误,请刷新页面. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-group-codes/ 具体代码如下:
-
vue 实现的树形菜的实例代码
下面一段代码给大家介绍vue 实现的树形菜单功能,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <l
-
基于jQuery实现Div窗口震动特效代码-代码简单
这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗等. 效果图如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=&q
-
完美的js div拖拽实例代码
本文实例为大家分享了完美的js div拖拽实例代码,供大家参考,具体内容如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head
-
jQuery实现弹出窗口弹出div层的实例代码
通过今天的jquery实例学习,我们要达到这样的效果:点击页面的链接,弹出一个div层,同时页面的其他部分变灰并且不能点击:无论是改变浏览器窗口大小还是下拉滚动条,这个弹出层都能始终保持居中:点击页面的关闭按钮,弹出层消失,页面恢复原样. 这里借鉴之前的一篇文章<基于jQuery的固定飘浮层>,使弹出窗口可以始终固定在浏览器的正中间.在这里有一个要点,就是如何使页面的其他地方在弹出窗口的同时变灰.我使用的方法就是在点击链接弹出div层的时候,给页面增加一个div层,这个层就"负责&q
-
php切割页面div内容的实现代码分享
亮点: 1.利用php也能实现对页面div的切割处理.这里的做法抛砖引玉,希望读者能够提供更加完美的解决方案. 2.切割处理方法已经封装成一个方法,可以直接引用. 3.顺便加上标签云的截取.//getWebDiv('id="taglist"','http://www.jb51.net/tag/'); 复制代码 代码如下: <?php header("Content-type: text/html; charset=utf-8"); function getWe
-
asp去掉html，保留img br p div的正则实现代码
复制代码 代码如下: '去掉html中的table代码 Function OutTable(str) dim a,re set re=new RegExp re.pattern="<(?!img|br|p|div).*?>" re.global=true a=str OutTable=re.replace(a,"") End Function
-
可以用鼠标拖动的DIV实现思路及代码
复制代码 代码如下: <html><head> <title>测试可动div</title> <script language='javascript' type='text/javascript'> var offset_x; var offset_y; function Milan_StartMove(oEvent) { var whichButton; if(document.all&&oEvent.button==1) w
-
Div+Css(+Js)菜单代码及制作工具
效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position: