<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> new document </title>
<style type="text/css">
html,body{ font-size:14px;}
a { display:block; width:120px; height:40px; line-height:40px; float:left; text-align:center;}
a span{ margin-left:60px; width:20px;}
a:link,a:visited{ color:#00f; text-decoration:none;}
a:hover,a:active{ color:#f00; text-decoration:none;}
#win,#win iframe{ clear:both; width:800px;height:400px; overflow:hidden;}
#nav { width:400px;}
.px80 { width:80px;}
.link { background:url(f2.gif) #fff repeat-x 0 5%;}
.active { background:url(f2.gif) #fff repeat-x 0 87%;}
.hidden { display:none;}
#drop { width:150px; height:40px; line-height:18px; text-align:center; float:left;}
#floatDiv a {width:150px; height:30px; line-height:30px; text-decoration:none; text-align:center; display:block; float:right;}
#floatDiv a:link,#floatDiv a:visited{ border:1px solid #fff; background-color:#fff; color:#000;}
#floatDiv a:hover,#floatDiv a:active{ border:1px solid #ff0; background-color:#dd0; color:#000;}
.dropover { background:url(f3.gif) #fff no-repeat 10% 21%; border:0;}
.dropdown { background:url(f3.gif) #fff no-repeat 10% 31%; border:0;}
.dropup { background:url(f3.gif) #fff no-repeat 10% 21%; border:0;}
.dropdefault { background:url(f3.gif) #fff no-repeat 10% 1%;}
#floatDiv { text-align:center; background:#fff; width:150px; height:90px; border:1px solid #ccc; position:absolute;left:0;top:0;display:;}
#imgmove { background:url(ico.gif) transparent no-repeat 62% 25%; width:35px; height:40px; float:left; margin-left:20px; }
.dropable { background:url(ico.gif) transparent no-repeat 41% 8%; width:70px; height:20px; text-align:left; float:left; margin:10px 20px 0 0; }
</style>
</head>
<body>
<div id="drop" class="dropdefault">
<span id="imgmove"> <!--这应该是个img的--></span><span class="dropable">移动</span>
</div>
<div id="nav">
<a href="#" id="defaultTag" οnclick="active('http://www.hao123.com/',this); return false;" class="px80 active">今日</a>
<a href="#" οnclick="active('http://www.265.com/',this);return false;" class="link">收件箱<span οnclick="hid(this.parentNode);active('http://www.hao123.com/',document.getElementById('defaultTag'));">X</span>
</a>
</div>
<div id="win"></div>
<script type="text/javascript">
//存储全局变量用的,吃饱了撑乱写的。
var S = {
'Dom' :{},
'buffer':'',
'push' : function(domID,obj){
obj = obj||'Dom';
if(domID instanceof Array){
S.push(domID.shift(),obj);
S.push((domID.length==1)?domID[0]:domID,obj);
return;
}
S[obj][domID] = document.getElementById(domID);
},
'createElement':function(elementType,par/*parent element*/,att){
var buffer = document.createElement(elementType);
for(var property in att){
buffer[property] = att[property];
}
par.appendChild(buffer);
return buffer;
}
};
//把Dom引用#win,#nav,#drop存在S.Dom里
S.push(['win','nav','drop']);
//在#win里添加一个iframe元素,并初始化它的属性name和src
S.Dom['iframe'] = S.createElement('iframe',S.Dom['win'],{'name':'winMain','src':'http://www.hao123.com/'});
//根据你的点击,激活对应的选项卡
//这就是那个什么“淘宝导航”撒,改变CSS类选择器
function active(url,obj) {
if(obj.className=='hidden')return false;//阻止事件向上冒泡的变通方法
changeURL(url);
var tagA = S.Dom['nav'].getElementsByTagName('a');
for(var i = tagA.length ;i>0;i--){
tagA[i-1].className=tagA[i-1].className.replace(/active/i,'link');
}
obj.className =obj.className.replace(/link/i,'active');
}
function changeURL (url) {
S.Dom['iframe'].src = url;
}
//关闭相应的选项
function hid(obj) {
obj.className = "hidden";
}
function floatDivClick(url) {
changeURL(url);
hid(S.Dom['div']);
S.dropDefault();
S.Dom['drop'].οnmοuseοut=S.dropDefault;
}
//由于偷懒,事件的注册没有统一规划
S.Dom['drop'].onmouseover = function(){
this.className = 'dropover';
}
S.Dom['drop'].onmouseout = S.dropDefault = function(){
S.Dom['drop'].className = 'dropdefault';
}
S.Dom['drop'].onmousedown = function(){
this.className = 'dropdown';
if(document.body.onmousedown)document.body.onmousedown =null;//阻止一些特殊情况发生
}
//显示的下拉菜单是动态生成的
//当然也可以是控制已有节点的显示于隐藏
S.Dom['drop'].onmouseup = function(){
this.className = 'dropup';
S.Dom['div'] = S.createElement('div',document.body,{'id':'floatDiv'});
S.Dom['div'].style.top =document.body.offsetTop + S.Dom['drop'].offsetTop + S.Dom['drop'].offsetHeight-5+"px";
S.Dom['div'].style.left=document.body.offsetLeft + S.Dom['drop'].offsetLeft +"px";
S.Dom['div'].innerHTML = '<a href="#" οnclick="floatDivClick(/'http://www.baidu.com//'); return false;">baidu</a>'
S.Dom['div'].innerHTML += '<a href="#" οnclick="floatDivClick(/'http://www.yahoo.com//'); return false;">yahoo</a>'
S.Dom['div'].innerHTML += '<a href="#" οnclick="floatDivClick(/'http://www.163.com//'); return false;">163</a>'
S.Dom['drop'].onmouseout = null;
document.body.onmousedown = function(){
setTimeout("hid(S.Dom['div']);S.dropDefault();",500);
document.body.onmousedown = null;
}
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> new document </title>
<style type="text/css">
html,body{ font-size:14px;}
a { display:block; width:120px; height:40px; line-height:40px; float:left; text-align:center;}
a span{ margin-left:60px; width:20px;}
a:link,a:visited{ color:#00f; text-decoration:none;}
a:hover,a:active{ color:#f00; text-decoration:none;}
#win,#win iframe{ clear:both; width:800px;height:400px; overflow:hidden;}
#nav { width:400px;}
.px80 { width:80px;}
.link { background:url(f2.gif) #fff repeat-x 0 5%;}
.active { background:url(f2.gif) #fff repeat-x 0 87%;}
.hidden { display:none;}
#drop { width:150px; height:40px; line-height:18px; text-align:center; float:left;}
#floatDiv a {width:150px; height:30px; line-height:30px; text-decoration:none; text-align:center; display:block; float:right;}
#floatDiv a:link,#floatDiv a:visited{ border:1px solid #fff; background-color:#fff; color:#000;}
#floatDiv a:hover,#floatDiv a:active{ border:1px solid #ff0; background-color:#dd0; color:#000;}
.dropover { background:url(f3.gif) #fff no-repeat 10% 21%; border:0;}
.dropdown { background:url(f3.gif) #fff no-repeat 10% 31%; border:0;}
.dropup { background:url(f3.gif) #fff no-repeat 10% 21%; border:0;}
.dropdefault { background:url(f3.gif) #fff no-repeat 10% 1%;}
#floatDiv { text-align:center; background:#fff; width:150px; height:90px; border:1px solid #ccc; position:absolute;left:0;top:0;display:;}
#imgmove { background:url(ico.gif) transparent no-repeat 62% 25%; width:35px; height:40px; float:left; margin-left:20px; }
.dropable { background:url(ico.gif) transparent no-repeat 41% 8%; width:70px; height:20px; text-align:left; float:left; margin:10px 20px 0 0; }
</style>
</head>
<body>
<div id="drop" class="dropdefault">
<span id="imgmove"> <!--这应该是个img的--></span><span class="dropable">移动</span>
</div>
<div id="nav">
<a href="#" id="defaultTag" οnclick="active('http://www.hao123.com/',this); return false;" class="px80 active">今日</a>
<a href="#" οnclick="active('http://www.265.com/',this);return false;" class="link">收件箱<span οnclick="hid(this.parentNode);active('http://www.hao123.com/',document.getElementById('defaultTag'));">X</span>
</a>
</div>
<div id="win"></div>
<script type="text/javascript">
//存储全局变量用的,吃饱了撑乱写的。
var S = {
'Dom' :{},
'buffer':'',
'push' : function(domID,obj){
obj = obj||'Dom';
if(domID instanceof Array){
S.push(domID.shift(),obj);
S.push((domID.length==1)?domID[0]:domID,obj);
return;
}
S[obj][domID] = document.getElementById(domID);
},
'createElement':function(elementType,par/*parent element*/,att){
var buffer = document.createElement(elementType);
for(var property in att){
buffer[property] = att[property];
}
par.appendChild(buffer);
return buffer;
}
};
//把Dom引用#win,#nav,#drop存在S.Dom里
S.push(['win','nav','drop']);
//在#win里添加一个iframe元素,并初始化它的属性name和src
S.Dom['iframe'] = S.createElement('iframe',S.Dom['win'],{'name':'winMain','src':'http://www.hao123.com/'});
//根据你的点击,激活对应的选项卡
//这就是那个什么“淘宝导航”撒,改变CSS类选择器
function active(url,obj) {
if(obj.className=='hidden')return false;//阻止事件向上冒泡的变通方法
changeURL(url);
var tagA = S.Dom['nav'].getElementsByTagName('a');
for(var i = tagA.length ;i>0;i--){
tagA[i-1].className=tagA[i-1].className.replace(/active/i,'link');
}
obj.className =obj.className.replace(/link/i,'active');
}
function changeURL (url) {
S.Dom['iframe'].src = url;
}
//关闭相应的选项
function hid(obj) {
obj.className = "hidden";
}
function floatDivClick(url) {
changeURL(url);
hid(S.Dom['div']);
S.dropDefault();
S.Dom['drop'].οnmοuseοut=S.dropDefault;
}
//由于偷懒,事件的注册没有统一规划
S.Dom['drop'].onmouseover = function(){
this.className = 'dropover';
}
S.Dom['drop'].onmouseout = S.dropDefault = function(){
S.Dom['drop'].className = 'dropdefault';
}
S.Dom['drop'].onmousedown = function(){
this.className = 'dropdown';
if(document.body.onmousedown)document.body.onmousedown =null;//阻止一些特殊情况发生
}
//显示的下拉菜单是动态生成的
//当然也可以是控制已有节点的显示于隐藏
S.Dom['drop'].onmouseup = function(){
this.className = 'dropup';
S.Dom['div'] = S.createElement('div',document.body,{'id':'floatDiv'});
S.Dom['div'].style.top =document.body.offsetTop + S.Dom['drop'].offsetTop + S.Dom['drop'].offsetHeight-5+"px";
S.Dom['div'].style.left=document.body.offsetLeft + S.Dom['drop'].offsetLeft +"px";
S.Dom['div'].innerHTML = '<a href="#" οnclick="floatDivClick(/'http://www.baidu.com//'); return false;">baidu</a>'
S.Dom['div'].innerHTML += '<a href="#" οnclick="floatDivClick(/'http://www.yahoo.com//'); return false;">yahoo</a>'
S.Dom['div'].innerHTML += '<a href="#" οnclick="floatDivClick(/'http://www.163.com//'); return false;">163</a>'
S.Dom['drop'].onmouseout = null;
document.body.onmousedown = function(){
setTimeout("hid(S.Dom['div']);S.dropDefault();",500);
document.body.onmousedown = null;
}
}
</script>
</body>
</html>