HTML+CSS+jQuery 纵向导航 && 横向导航 && 消除IE6 BUG && 感悟怎样学习

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="jquery-1.11.3.min.js">
</script>
<script type="text/javascript">
$( function(){

$("#nav ul li").hover(
					  function(){
						  $(this).children("ul").attr("style","display:block;")
						  },
                  function() {
                     $(this).children("ul").attr("style", "");
                  }
				  ) <!-- hover end-->

$("#menu ul li").hover(
					  function(){
						  $(this).children("ul").attr("style","display:block;")
						  },
                  function() {
                     $(this).children("ul").attr("style", "");
                  }
				  ) <!-- hover end-->

	});
</script>
<style type="text/css">
body{ margin:0px auto}
ul{ list-style:none}
a { text-decoration:none;color:#9E7FF9;}
a:hover{color:#238dba; }

/*横向nav导航 Begin*/
#nav ul { margin:0px auto;  }
#nav ul li { width:100px; height:28px; line-height:28px; float:left; text-align:center;  position:relative; } /*相对定位*/
#nav ul li ul { margin:0px; padding:0px; display:none; position:absolute; left:0px; top:28px;} /*绝对定位 top 的高度*/
/* 伪类 IE6 不支持，需用JS实现；很关键，鼠标经过时
#nav ul li:hover ul { display:block;}
*/
#nav ul li ul li{ width:100px;background:#fff;  } /*此处背景色很关键,否则IE6 会有BUG，hover失效*/
/*横向nav导航 End*/

/*纵向menu导航 Begin*/
#menu ul { margin:0px auto;  }
#menu ul li { width:80px; height:28px; line-height:28px; text-align:center;  position:relative; background:#FFF } /*相对定位*/
#menu ul li ul { margin:0px; padding:0px; display:none; position:absolute; left:80px; top:0px;} /*绝对定位 left 的位置*/
/* 伪类 IE6 不支持，需用JS实现；很关键，鼠标经过时
#nav ul li:hover ul { display:block;}
*/
#menu ul li ul li{ width:100px;background:#fff;  } /*此处背景色很关键,否则IE6 会有BUG，hover失效*/
/*纵向menu导航 End*/

</style>
<title>jQuery nav menu</title>
</head>
<body>

<div id="nav"  style=" float:left; width:600px; height:28px; line-height:28px; background:#d4d4d4">
<ul>
	<li><a href="#">首 页</a></li>
	<li><a href="#">介 绍</a></li>
	<li><a href="#">新 闻</a>
		<ul>
		<li><a href="#">国内新闻</a></li>
		<li><a href="#">国外新闻</a></li>
        <li><a href="#">国内新闻</a></li>
		<li><a href="#">国外新闻</a></li>
		</ul>
	</li>
	<li><a href="#">产 品</a>
		<ul>
		<li><a href="#">主打产品</a></li>
		<li><a href="#">热门产品</a></li>
        <li><a href="#">主打产品</a></li>
		<li><a href="#">热门产品</a></li>
		</ul>
	</li>
	<li><a href="#">关 于</a></li>
</ul>
	</div>

<div id="menu"  style="width:150px; height:200px; position:absolute; left:0px; top:100px;"  >
<ul>
	<li><a href="#">首 页</a></li>
	<li><a href="#">介 绍</a></li>
	<li><a href="#">新 闻</a>
		<ul>
		<li><a href="#">国内新闻</a></li>
		<li><a href="#">国外新闻</a></li>
        <li><a href="#">国内新闻</a></li>
		<li><a href="#">国外新闻</a></li>
		</ul>
	</li>
	<li><a href="#">产 品</a>
		<ul>
		<li><a href="#">主打产品</a></li>
		<li><a href="#">热门产品</a></li>
        <li><a href="#">主打产品</a></li>
		<li><a href="#">热门产品</a></li>
		</ul>
	</li>
	<li><a href="#">关 于</a></li>
</ul>
</div>

</body>
</html>

先总结：

1、IE6 不支持a标签之外的伪类；

2、IE6 做多级导航需要用到相对定位和绝对定位，用到left和top;

3、IE6 需要给 2级li 设置背景色，否则hover 往下滑动，离开1级li后，2级li 会消失；

4、jQuery 写的更少，做的更多。

为什么学习html+css+jQuery:

因为公司OA上线将近2年，断断续续的写了一些WebForm+jQuery+EasyUI+ashx的小程序，在这个时候理解了园子和坛子一些大神说的AJAX前端和后端服务器程序分离的概念，加深了对三层的理解，但是公司前端雄狮离职，美工MM找到我，改一些asp页面，我才发现很多html 的基础概念都没有理解，想想8年前我也是用ASP复制粘贴过网站的人，现在脑子里想到的是去哪里复制、粘贴。然后拿到界面效果图(产品展示，一页8个，2列4行)，才发现几句jQuery append+div就可以搞定。所以觉得非常有必要再度巩固。

感悟：

十几年前，在网吧看到有姑娘在用记事本手敲HTML代码，觉得不屑一顾，这么简单的东西，还用的着这样反复练习。现在才知道这样的姑娘才真正的掌握了学习方法，那时候的网页三剑客正大行其道... ...

而现在，golive、frontpage已经消失了。

姑娘，你现在在哪里。

HTML+CSS+jQuery 纵向导航 && 横向导航 && 消除IE6 BUG && 感悟怎样学习的更多相关文章

十天学会<div+css>横向导航菜单和纵向导航菜单
纵向导航菜单及二级弹出菜单纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...
css横向导航条
css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...
如何使用css、布局横向导航栏
使用css布局横向导航栏,css应用给网页样式的方式,就相当于,给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式.在这里我们可以适当的把值调的大一点,这样我们就可以很容易的对比. ...
利用CSS制作背景变色的横向导航栏
1.表单页面如下: <html> <head> <title>注册表单页面</title> </head> <body> &l ...
利用jquery实现百度新闻导航菜单滑动动画
前言前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...
web标准(复习)--7 横向导航菜单
今天我们开始学习html列表,包含以下内容和知识点: 横向列表菜单用图片美化的横向导航 css Sprites 一.横向列表菜单前边学习过纵向导航菜单,又学习了float属性,那么要实现横向导航菜单 ...
【Web】利用jquery实现百度新闻导航菜单滑动动画
前言前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE ...
JQUERY 插件开发——MENU（导航菜单）
JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...
Web标准：七、横向导航菜单
Web标准:七.横向导航菜单知识点: 1.横向列表菜单 2.用图片美化的横向导航 3.css Sprites 1)横向列表菜单可以在第四节课的基础上来实现横向导航菜单,只要给li一个float ...

随机推荐

实验吧之deeeeeeaaaaaadbeeeeeeeeeef-200
题目中提示说“图片是正确的吗”,赶紧打开图片,图片显示正常,没啥毛病,那就放到winhex里面,好像它的十六进制格式也蛮标准的,然后它的文本区域有个iphone,这个梗我也是百度才知道的: winhe ...
history.back返回是浏览器错误码：ERR_CACHE_MISS
解决方法: 如果访问的是php文件中添加:header("Cache-control: private"); 如果使用的是模板引擎(tp5):{php}header("C ...
用servlet进行用户名和密码校验01
用servlet进行用户名和密码校验01 编写一个servlet进行用户名和密码校验,获取登录页面的用户名密码,并显示出来 1.工作目录结构 2.首先是一个login.html,包含非常简单的登录表单 ...
centsos 查看系统版本信息
[root@hostuser gitlab]# lsb_release -a LSB Version: :core-4.1-amd64:core-4.1-noarch:cxx-4.1-amd64:cx ...
DB link的迁移
我们在做某些Schema的迁移的时候,由于用到Public的db link,然而由于不知道db link中目标端账号的密码,因此无法在新环境重新创建DB link. 本次实验的思路是将视图dba_db ...
SpringCloud---声明式服务调用---Spring Cloud Feign
1.概述 1.1 Spring Cloud Ribbon.Spring Cloud Hystrix的使用几乎是同时出现的,Spring Cloud提供了一个更高层次的封装这2个工具类框架:Spring ...
idea validation code
K71U8DBPNE-eyJsaWNlbnNlSWQiOiJLNzFVOERCUE5FIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...
记一次简单的关于SimpleDateFormat的优化
# 有一个有趣的需求: (1)预先定义每天24小时不同时间段的电价 (2) 有一个list<map<timestamp,value>>: timestamp(时间戳):valu ...
20164324王启元 Exp1 PC平台逆向破解
一.逆向及Bof基础实践说明 1.1实践目标本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 手工修 ...
DBA 需要掌握的知识框架及工作内容
知识框架 1. 数据库的工作原理以及体系结构 2. 数据库管理(管理数据库和数据库对象) 3. 数据库备份和恢复 4. 数据库故障处理 5. 数据库补丁安装及升级 6. 数据库性能工作内 ...

HTML+CSS+jQuery 纵向导航 && 横向导航 && 消除IE6 BUG && 感悟怎样学习

HTML+CSS+jQuery 纵向导航 && 横向导航 && 消除IE6 BUG && 感悟怎样学习的更多相关文章

随机推荐

热门专题