Jquery学习笔记(8)--京东导航菜单(2)增加弹框
京东导航,添加中间的弹框栏,使用position定位,放在左侧栏的li标签里面,成为一个整体,保证鼠标在弹框里的时候,弹框不消失:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
*{
margin: 0;
}
#head img{
position: absolute;
left: 50%;
margin-left:-595px;
}
#head{
position: relative;
width: 100%;
height: 80px;
background-color: #f00;
}
.clear{
clear: both;
}
#nav li{
list-style: none;
float: left;
border: 1px solid #000;
font-family: 微软雅黑;
font-weight: bold;
cursor: pointer;
margin-left: 10px; }
#nav{
margin-left: 200px;
}
#left li{
list-style: none;
margin-top: 0px;
border: 1px solid #000;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 10px;
font-family: 微软雅黑;
color: #fff;
} #left ul{
background-color: #888;
width: 190px;
height: 480px;
margin-left: 50px;
margin-top: 10px;
padding-top: 10px;
padding-left: 0px;
}
#left span{
cursor: pointer;
}
#left{
float: left;
position: relative; }
#images{
margin-left: 10px;
float: left;
position: relative; }
#largeImg{
/*margin-left: 10px;*/
margin-top: 10px;
}
#smallImg{
margin-top: 10px;
/*margin-left: 10px;*/ }
#welcom{
width: 190px;
height: 480px;
background-color: #00f;
margin-top: 10px;
margin-left: 10px;
float: left;
position: relative; }
#main{
position: relative;
/*position: absolute;*/
left: 50%;
margin-left: -595px; }
.right{
position: absolute;
top: 10px;
width: 800px;
height: 480px;
margin-left: 180px;
margin-top: 0px;
border: 1px solid #000;
z-index: 3;
color: #000;
background-color: #eee;
display: none;
}
</style>
</head>
<body>
<!-- 广告 -->
<div id="head"><img src="head.jpg"></div>
<!-- main把三个div合到一起 -->
<div id="main">
<!-- 上侧导航 -->
<div id="nav">
<ul>
<li>秒杀</li>
<li>优惠券</li>
<li>闪购</li>
<li>拍卖</li>
</ul>
</div>
<div class="clear"></div>
<!-- 左侧导航 -->
<div id="left">
<ul>
<li><span>家用电器</span>
<div class="right">
<div>电视/空调/洗衣机</div>
<div>电视/空调/洗衣机</div>
<div>电视/空调/洗衣机</div>
<div>电视/空调/洗衣机</div>
<div>电视/空调/洗衣机</div>
<div>电视/空调/洗衣机</div>
</div>
</li>
<li><span>手机/数码</span>
<div class="right">
<div>手机/对讲机/数码相机</div>
</div>
</li>
<li><span>男装/女装</span>
<div class="right">
<div>羽绒服/棉服/羊毛衫</div>
</div>
</li>
<li><span>电脑/办公</span>
<div class="right">
<div>笔记本/平板/显示器</div>
</div>
</li>
</ul>
</div>
<!-- 右侧广告 -->
<div id="images">
<div id="largeImg">
<img src="1.jpg" alt="">
</div>
<!-- <div class="clear"></div> -->
<div id="smallImg">
<img src="4.jpg" alt="">
<img src="5.jpg" alt="">
</div>
</div>
<!-- 最右侧充话费 -->
<div id="welcom">
<div>注册</div>
<div>登录</div>
</div>
</div> </body>
<script>
$('#nav li').hover(
function(){
$(this).css({"color":"#f00"});
},
function(){
$(this).css({"color":"#000"});
}
);
$('#left li').hover(
function(){
$(this).css({"background-color":"#ddd"});
$(this).children('.right').show(); },
function(){
$(this).css({"background-color":"#888"});
$(this).children('.right').hide(); }
);
$('#left span').hover(
function(){
$(this).css({"color":"#f00"}); },
function(){
$(this).css({"color":"#fff"}); }
); </script>
</html>
Jquery学习笔记(8)--京东导航菜单(2)增加弹框的更多相关文章
- jquery学习笔记(4)--实现table隔行变色以及单选框选中
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery ui背景色动态渐变导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery漂亮图标的垂直导航菜单
效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- 一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
随机推荐
- [转] SSIS可靠性和扩展性—事务
本文转自:http://www.cnblogs.com/tylerdonet/archive/2011/09/23/2186579.html 在这一个随笔中将介绍在package中如何使用事务来保证数 ...
- Linux中文乱码问题终极解决方法
方法一: 修改/root/.bash_profile文件,增加export LANG=zh_CN.GB18030该文件在用户目录下,对于其他用户,也必须相应修改该文件. 使用该方法时putty能显示中 ...
- 如何查看Oracle日志
Oracle日志查看 一.Oracle日志的路径: 登录:sqlplus "/as sysdba" 查看路径:SQL> select * from v$logfile; SQ ...
- XssEncode
0x00 闲扯 好吧继上一篇文章之后,就没发文章了!(其实是一直在写但是写的很少还凑不起一篇文章而已) 但是这几天对插件进行了一定的改良了 因为在自己在实际的XSS过程中也发现了自己的插件 还不够强大 ...
- 机器学习:K-近邻算法(KNN)
机器学习:K-近邻算法(KNN) 一.KNN算法概述 KNN作为一种有监督分类算法,是最简单的机器学习算法之一,顾名思义,其算法主体思想就是根据距离相近的邻居类别,来判定自己的所属类别.算法的前提是需 ...
- SQL Server datetime数据类型设计、优化误区
一.场景 在SQL Server 2005中,有一个表TestDatetime,其中Dates这个字段的数据类型是datetime,如果你看到表的记录如下图所示,你最先想到的是什么呢? (图1:数据列 ...
- centos查看哪些包提供指定头文件
[问题]:项目迁移时,原来在suse上正常的代码在centos上报错: g++ -g -Wall -fPIC -I../include -I./ -I../src -I/share/comm_ext ...
- 教你用 google-drive-ocamlfuse 在 Linux 上挂载 Google Drive
如果你在找一个方便的方式在 Linux 机器上挂载你的 Google Drive 文件夹, Jack Wallen 将教你怎么使用 google-drive-ocamlfuse 来挂载 Google ...
- Git学习笔记三--管理修改、撤销修改、删除文件
1.管理修改 什么是修改?比如你新增了一行,这就是一个修改,删除了一行,也是一个修改,更改了某些字符,也是一个修改,删了一些又加了一些,也是一个修改,甚至创建一个新文件,也算一个修改. 为什么说Git ...
- Hibernate关系映射(二) 基于外键的双向一对一
基于外键的双向一对一关联映射 需要在一端添加<one-to-one>标签,用property-ref来指定反向属性引用. 还是通过刚才用户和地址来演示双向一对一关联. 代码演示 一.实体类 ...