1、先看一下效果图
2、规划好html的结构
<!-- 放导航的容器 -->
<div id="left">
<!--一个item1是一个一级导航 -->
<div class="item1">
<!-- 一级导航标题-->
<h1>一级标题</h1>
<!-- 一个item2是一个二级导航-->
<div class="item2">
<!-- 二级导航标题-->
<h1>二级标题</h1>
<!-- 三级导航块-->
<div class="item3">
<!-- 内容-->
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
</div>
<h1>二级标题</h1>
<div class="item3">
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
</div>
<h1>二级标题</h1>
<div class="item3">
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
</div>
</div>
</div>
<div class="item1">
<h1>一级标题</h1>
<div class="item2">
<h1>二级标题</h1>
<div class="item3">
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
</div>
<h1>二级标题</h1>
<div class="item3">
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
</div>
<h1>二级标题</h1>
<div class="item3">
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
<span><a href="">三级级标题</a></span>
</div>
</div>
</div>
</div>
3、定义好他们应有的样式,等会用js调用
/*定义宽*/
#left,.item1,.item2,.item3,.item1_h1{
width:250px;
}
#left{
float:left;
border:solid 2px #D00000;
}
#left h1{
margin:0;
}
.item1,.item2{
float:left;
}
/*一级导航标题样式*/
.item1_h1{
height:40px;
background:url(bg.png);
padding:0;
font-size:14px;
text-align:center;
line-height:40px;
color:#FFF;
}
/*鼠标移出二级标题的样式*/
.item2_out{
width:230px;
height:25px;
background:#FDF1DE;
border-top:solid 1px #FDF1DE;
border-bottom:solid 1px #FDF1DE;
line-height:25px;
color:#000;
font-weight:normal;
text-align:left;
padding-left:20px;
font-size:14px;
}
/*鼠标放到二级标题的样式*/
.item2_over{
width:230px;
height:25px;
line-height:25px;
text-align:left;
padding-left:20px;
background:#FFF;
border-top:solid 1px #CC3300;
border-bottom:solid 1px #CC3300;
color:#CC0000;
font-weight:bold;
font-size:14px;
}
/*浮动栏样式*/
.item3{
height:200px;
background:#FFF;
float:left;
position:absolute;
border:solid 1px #CC3300;
padding:10px;
}
/*浮动栏上链接的样式*/
.item3 a{
color:#000;
font-size:12px;
text-decoration:none;
}
.item3 a:hover{
color:#CC0000;
text-decoration:underline;
z-index:2;
}
4、编写js控制代码
$(function(){
//先把浮动框隐藏起来
$(".item3").hide();
//定义一级标题和二级标题的样式
$(".item1>h1").addClass("item1_h1");
$(".item2>h1").addClass("item2_out");
//只有鼠标不在item2和item3上时浮动块才隐藏
var isHide1 = true;
var isHide2 = true;
//当前在哪个item2的标题上(h1)
var curItem;
//遮盖浮动框左边需要隐藏的线
var modalDiv = "<div id='lineModal' style='width:1px;height:25px;float:left;background:#FFF;position:absolute;z-index:4;'></div>";
$("body").append(modalDiv);
$("#lineModal").hide();
//把item2下的h1增加hover事件,本来想用css定义hover,可以jquery无法触发浏览器默认hover
$(".item2>h1").hover(function(){
$(this).removeClass("item2_out");
$(this).addClass("item2_over");
},function(){
$(this).removeClass("item2_over");
$(this).addClass("item2_out");
});
//鼠标移动到item2的h1上显示item3
$(".item2>h1").mouseover(function(){
var subItem = $(this).next(".item3");
if('none'==subItem.css("display")){
var pos = $(this).position();
subItem.css("top",pos.top);
subItem.css("left",pos.left+$(this).width()-20);
$("#lineModal").show();
$("#lineModal").css("top",pos.top+1);
$("#lineModal").css("left",pos.left+$(this).width()-20);
subItem.show();
curItem = $(this);
}
});
//鼠标移出到item2的h1并且也不在item3上时隐藏item3
$(".item2>h1").mouseout(function(){
isHide1 = true;
if(isHide1&&isHide2){
$(this).next(".item3").hide();
curItem.removeClass("item2_over");
curItem.addClass("item2_out");
$("#lineModal").hide();
}
});
$(".item3").mouseover(function(){
//不能够触发hover
curItem.trigger("mouseover");
if('none'==$(this).css("display")){
$(this).show();
isShow = false;
}
});
$(".item3").mouseout(function(){
isHide2 = true;
if(isHide1&&isHide2){
$(this).hide();
curItem.removeClass("item2_over");
curItem.addClass("item2_out");
$("#lineModal").hide();
}
});
});
5、需要的bg.png图片,附件有
- 大小: 5 KB
- 大小: 2.9 KB
分享到:
相关推荐
使用jQuery实现仿2010京东商城商品分类导航菜单。测试通过IE 6+, FF3.0+
jQuery商品分类导航菜单仿京东,通过JQUERY实现的
29. jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30. jquery实现图片可拖动展示的实例下载 31. jQuery实现拖动滚动条的缩略图排列插件下载 32. jQuery实现焦点图片Flash自动平滑渐变效果 33. ...
68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大插件imgBox下载 70. 一款jQuery实现漂亮精美相册插件源码 71. 一款jQuery左右箭头控制大图滚动切换的代码 ...
23.jquery实现的动感菜单导航条源码 24.jquery实用滚动下拉菜单代码 25.jquery鼠标移动出现下拉菜单及提示特效代码 26.jquery外国滚动型多级展开菜单插件(jGlideMenu)下载 27.jquery自由滚动切换 标签式...
jquery实现类似天猫、淘宝、京东等购物网站左侧二级导航
68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大插件imgBox下载 70. 一款jQuery实现漂亮精美相册插件源码 71. 一款jQuery左右箭头控制大图滚动切换的代码 ...
68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大插件imgBox下载 70. 一款jQuery实现漂亮精美相册插件源码 71. 一款jQuery左右箭头控制大图滚动切换的代码 ...
主要介绍了jQuery简单实现仿京东分类导航层效果,涉及jQuery针对鼠标事件的响应及页面元素动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
一个不用管点击效果直接通过锚点连接到导航的那个部分,一个是写了一个点击函数让他跳转过去。 我们需要记住点击也会触发滚动。他可能执行两个函数,所以选中的状态加个样式只在一个里面写,在滚动时写。
主要介绍了jQuery实现侧边栏隐藏与显示的方法,结合实例形式较为详细的分析了jQuery基于事件响应与页面元素属性动态操作实现元素显示与隐藏功能的相关操作技巧,需要的朋友可以参考下
实现效果: 仿京东商品左侧分类导航菜单JS特效代码,非常大气的导航菜单,基于jQuery实现, 支持弹出分类和品牌,品牌大家可以改造成图片显示会更加吸引点击量。
修正版js京东网站多级购物菜单,这类菜单似乎就是为购物网站打造的,上线后就有很多前端开发爱好者不停的仿写,既学习到了CSS jquery知识,也完善了自己的网站,本京东购物分类菜单,编写时已考虑到兼容性问题,因此...
【CSS源码】京东首页实现。具体可以看我在GitHub上的项目: https://github.com/smyhvae/Web
京东商城购物网站向右伸出的多级菜单,基于jquery实现。商品下拉弹出框,仿照京东商城左侧商品分类弹出详细分类。界面样式可以自己修改。注意以下两项: 1.js/new.js 实现弹出框 2.css/css.css样式文件,...
jquery实现下拉菜单效果,jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局,感兴趣的朋友可以参考下哈,希望对你有所帮助
仿京东商品左侧分类导航菜单JS特效代码,非常大气的导航菜单,基于jQuery实现, 支持弹出分类和品牌,品牌大家可以改造成图片显示会更加吸引点击量。
js返回头部代码(不是jquery),类似京东商城右侧的返回头部功能,当滚动条移出第一屏时返回top出现(涉及到读取滚动条位置)。 里面包含 js自动实时判断浏览器窗口大小(有拆分出来)的功能,灵活变通下可以变换成...
此案例为实现类似京东首页导航下面的图片轮播(Jquery实现)
今天弄了一下午终于自制成功,主要使用jQuery和CSS,实现功能基本和京东一样。 功能介绍: 1、鼠标停留导航; 2、根据子列表的高度,自动调整对齐方式(顶端对齐/父类目对齐); 3、父子类目样式一致。 功能...