jquery-9 京东和酒仙网左侧导航如何实现
jquery-9 京东和酒仙网左侧导航如何实现
一、总结
一句话总结：布局的话多用定位，由底往上一层层的来布。
1、如何实现导航向div的平滑滑动？
右侧div和左侧的li一定要放在一起
127 <li>
128 <span>家用电器</span>
129 <div class='right'>
130 <h3>家用电器</h3>
131 <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>
132 </div>
133 </li>
二、京东和酒仙网左侧导航如何实现
酒仙网左侧导航
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
margin:0px;
padding:0px;
} .top{
width:1366px;
height:90px;
overflow: hidden;
} .top img{
margin-left:-250px;
} .nav{
height:15px;
} .menu{
height:470px;
background:url('power.jpg') -300px;
} .div1{
height:40px;
overflow: hidden;
background: #900;
color:#fff;
} .div1 ul{
width:1200px;
margin:0 auto;
list-style:none;
} .div1 ul li{
float: left;
line-height: 40px;
margin-left:30px;
cursor: pointer;
}
.banner{
background: #ce171f;
width:150px;
text-align: center;
margin-left:0px!important;
} .div2{
width:1200px;
height:470px;
margin:0 auto;
position: relative;
} .div3{
width:150px;
height:470px;
background: #b61d1d;
}
.div3 ul{
list-style:none;
} .div3 ul li{
padding-left:15px;
line-height: 30px;
} .div3 ul li span{
color:#fff;
} .div3 ul li:hover{
cursor: pointer;
} .right{
width:1020px;
height:440px;
background: #eee;
position: absolute;
top:0px;
left:150px;
padding:15px;
color:#000;
display: none;
}
.info{
width:1200px;
margin:0 auto;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div class='top'>
<img src="top.jpg" height='100%'>
</div> <div class="nav"></div> <div class="div1">
<ul>
<li class='banner'>全部商品分类</li>
<li>首页</li>
<li>葡萄酒馆</li>
<li>清仓</li>
<li>团购</li>
<li>新品发现</li>
</ul>
</div> <div class="menu">
<div class="div2">
<div class="div3">
<ul>
<li>
<span>家用电器</span>
<div class='right'>
<h3>家用电器</h3>
<p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>
</div>
</li>
<li>
<span>手机数码</span>
<div class='right'>
<h3>手机数码</h3>
<p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>
</div>
</li>
<li>
<span>电脑办公</span>
<div class='right'>
<h3>电脑办公</h3>
<p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>
</div>
</li>
<li>
<span>家居家装</span>
<div class='right'>
<h3>家居家装</h3>
<p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>
</div>
</li>
</ul>
</div>
</div>
</div> <div class="info">
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
<h1>linux is very much!</h1>
</div>
</body>
<script>
$('.div3 li').mouseenter(function(){
x=$(this).position().left+150;
y=$(this).position().top; $(this).css({'background':'#eee'});
$(this).find('span').css({'color':'#b61d1d'});
$('.div3 li').not($(this)).css({'background':'#b61d1d'}); $(this).find('.right').css({'top':y+'px','left':x+'px'}).show();
$('.right').not($(this).find('.right')).hide();
}); $('.div3 li').mouseleave(function(){
$(this).find('.right').hide();
$(this).find('span').css({'color':'#fff'});
$(this).css({'background':'#b61d1d'});
});
</script>
</html>
jquery-9 京东和酒仙网左侧导航如何实现的更多相关文章
- 仿酒仙网的一款jQuery侧栏弹出导航栏特效
仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...
- jquery模板制作左侧导航组件
/** * Created by bmk on 16-4-25. * * 用法:在自己的js里面把左侧导航的相关图标和对应的列表项名称如下编写: * 版本更新日至按需添加 * 在js中的RNA.run ...
- jquery仿天猫商城左侧导航菜单
之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...
- 简单的jquery左侧导航栏和页面选中效果
这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...
- jQuery防京东浮动网站楼层导航代码
jQuery防京东浮动网站楼层导航代码 <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml" ...
- 简单的jquery左侧导航栏和页面选中
这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...
- （转）jquery仿天猫商城左侧导航菜单
原文地址:http://www.cnblogs.com/WinKi/p/3398824.html 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...
- 在ECSHOP后台左侧导航中增加新菜单
在ECSHOP后台左侧导航中增加新菜单 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2011-11-08 有个别高级用户(懂PHP的),提到这样的问题: 在后台管 ...
- jQuery背景跟随鼠标移动的网页导航
首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search 首页 PSD模板 CSS模板 特效插件 ...
随机推荐
- Flume的可靠性
Flume的可靠性 当节点出现故障时,日志能够被传送到其他节点上而不会丢失. Flume提供了三种级别的可靠性保障,从强到弱依次分别为:end-to- end(收到数据agent首先将event写到磁 ...
- linux创建新用户并给予root权限
root比windows的系统管理员的能力更大,足以把整个系统的大部分文件删掉,导致系统完全毁坏,不能再次使用.所以,用root进行不当的操作是相当危险的,轻微的可以死机,严重的甚至不能开机.所以,在 ...
- 【例题 8-3 UVA - 1152】4 Values whose Sum is 0
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 显然中间相遇. 自己写了个hash处理一下冲突就可以了. [代码] /* 1.Shoud it use long long ? 2. ...
- [Python] Object spread operator in Python
In JS, we have object spread opreator: const x = { a: '1', b: '2' } const y = { c: '3', d: '4' } con ...
- 4lession-输入函数
接受字符串的方法 #!/usr/bin/python string = raw_input("\nplease inter you string:\n") print(string ...
- bootstrap课程13 bootstrap的官方文档中有一些控件的使用有bug，如何解决这个问题
bootstrap课程13 bootstrap的官方文档中有一些控件的使用有bug,如何解决这个问题 一.总结 一句话总结:因为演示是正常的,所以检查演示效果的代码,把那一段相关的都弄过来就可以了 ...
- 前端切图|点击按钮div变色
<!DOCTYPE html> <html> <head> <title>点击按钮div变色.html</title> <meta c ...
- 洛谷——U10223 Cx大帝远征埃及
https://www.luogu.org/problem/show?pid=U10223#sub 题目背景 众所周知,Cx是一个宇宙大犇.Cx能文善武,一直在为大一统的实现而努力奋斗着.Cx将调用他 ...
- 洛谷 P2693 [USACO1.3]号码锁 Combination Lock
P2693 [USACO1.3]号码锁 Combination Lock 题目描述 农夫约翰的奶牛不停地从他的农场中逃出来,导致了很多损害.为了防止它们再逃出来,他买了一只很大的号码锁以防止奶牛们打开 ...
- Android通过startService播放背景音乐简单演示样例
关于startService的基本使用概述及其生命周期可參见博客<Android中startService的使用及Service生命周期>. 本文通过播放背景音乐的简单演示样例,演示sta ...