页面导航可以随意移动的ie整合导航条 （有点酷）
把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件<style rel=stylesheet type=text/css>
body {
border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 0px; margin: 0px; color: buttontext
}
#menu {
background: buttonface; border-bottom: buttonface 1px solid; border-left: buttonface 1px solid; border-right: buttonface 1px solid; border-top: buttonface 1px solid; cursor: default; left: 0px; position: absolute; top: 0px
}
#menu .menu {
background: buttonface; border-bottom: buttonhighlight 2px outset; border-left: buttonhighlight 2px outset; border-right: buttonhighlight 2px outset; border-top: buttonhighlight 2px outset; position: absolute
}
#menu td {
font: menu; height: 20px
}
#menu .root {
border-bottom: buttonface 1px solid; border-left: buttonface 1px solid; border-right: buttonface 1px solid; border-top: buttonface 1px solid; margin: 6px; padding-bottom: 1px; padding-left: 7px; padding-right: 7px; padding-top: 1px
}
#menu .icon {
text-align: center
}
#menu .disabled {
color: buttonshadow
}
#menu .more {
font-family: webdings; text-align: right; width: 20px
}
#menu #handle {
border-bottom: buttonshadow 1px solid; border-left: buttonhighlight 1px solid; border-right: buttonshadow 1px solid; border-top: buttonhighlight 1px solid; cursor: move; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px
}
#outerdiv {
border-bottom: white 2px inset; border-left: white 2px inset; border-right: white 2px inset; border-top: white 2px inset; height: 90%; overflow: auto; position: absolute; width: 100%; z-index: -1
}
</style>
<script>
var activemenu = null;
var activesub = null;
var tempel;
var t;
var hidewindowedcontrols = true;
var ie5 = (document.getelementsbytagname != null);
function menuitemhighlight(el) {
el.style.background = "highlight";
el.style.color = "highlighttext";
}
function menuitemnormal(el) {
el.style.background = "";
el.style.color = "";
}
function raisebutton(el) {
el.style.bordertop ="1 solid buttonhighlight";
el.style.borderleft ="1 solid buttonhighlight";
el.style.borderbottom ="1 solid buttonshadow";
el.style.borderright ="1 solid buttonshadow";
el.style.padding ="1";
el.style.paddingleft = "7";
el.style.paddingright = "7";
}
function normalbutton(el) {
el.style.border = "1 solid buttonface";
el.style.padding ="1";
el.style.paddingleft = "7";
el.style.paddingright = "7";
}
function pressedbutton(el) {
el.style.bordertop ="1 solid buttonshadow";
el.style.paddingtop = "2";
el.style.borderleft ="1 solid buttonshadow";
el.style.paddingleft = "8";
el.style.borderbottom ="1 solid buttonhighlight";
el.style.paddingbottom= "0";
el.style.borderright = "1 solid buttonhighlight";
el.style.paddingright = "6";
}
function cleanupmenubar() {
for (i=0; i <menu.rows.length; i++) {
for (j=0; j <menu.rows(i).cells.length; j++) {
if (menu.rows(i).cells(j).classname == "root") {
normalbutton(menu.rows(i).cells(j));
}
}
}
showwindowedobjects(true);
}
function getmenuitem(el) {
temp = el;
while ((temp!=null) && (temp.tagname!="table") && (temp.id!="menubar") && (temp.id!="menu") && (temp.id!="handle")) {
if ((temp.tagname=="tr") || (temp.classname=="root"))
el = temp;
temp = temp.parentelement;
}
return el;
}
function getsub(el) {
temp = el;
while ((temp!=null) && (temp.classname != "sub")) {
if (temp.tagname=="table")
el = temp;
temp = temp.parentelement;
}
return el;
}
function menuclick() {
if (event.srcelement == null)
return;
var el=getmenuitem(event.srcelement);
if ((el.classname != "disabled") && (el.id != "menubar")){
if (el.classname == "root") {
if (activemenu) {
raisebutton(el);
showwindowedobjects(true);
}
else
pressedbutton(el);
togglemenu(el);
}
else if (el.href) {
cleanupmenubar();
if (activemenu)
togglemenu(activemenu.parentelement);
if (el.target)
window.open(el.href, el.target);
else if (document.all.tags("base").item(0) != null)
window.open(el.href, document.all.tags("base").item(0).target);
else
window.location = el.href;
}
}
window.event.cancelbubble = true;
}
function restore() {
if (activemenu) {
togglemenu(activemenu.parentelement);
cleanupmenubar();
}
}
document.onclick=restore;
function menuover() {
if ((event.fromelement == null) || (event.toelement == null) || (event.fromelement == event.toelement))
return;
var fromel = getmenuitem(event.fromelement);
var toel = getmenuitem(event.toelement);
if (fromel == toel)
return;
if ((toel.classname != "disabled") && (toel.id != "menubar")){
if (toel.classname == "root") {
if (activemenu) {
if (toel.menu != activemenu) {
cleanupmenubar();
pressedbutton(toel);
togglemenu(toel);
}
}
else {
raisebutton(toel);
}
}
else {
if ((fromel != toel) && (toel.tagname != "table")){
cleanup(toel.parentelement.parentelement, false);
menuitemhighlight(toel);
toel.parentelement.parentelement.activeitem = toel;
if (toel.href)
window.status = toel.href;
if (toel.classname == "sub")
showsubmenu(toel,true);
}
}
}
}
function menuout() {
if ((event.fromelement == null) || (event.toelement == null) || (event.fromelement == event.toelement))
return;
var fromel = getmenuitem(event.fromelement);
var toel = getmenuitem(event.toelement);
if (fromel == toel)
return;
if (fromel.classname == "root"){
if (activemenu) {
if (fromel.menu != activemenu)
normalbutton(fromel);
}
else
normalbutton(fromel);
}
else {
if((fromel.classname != "disabled") && (fromel.id != "menubar")){
if ((fromel.classname == "sub") && (getsub(toel) == fromel.submenu) || (fromel.submenu == toel.parentelement.parentelement))
return;
else if ((fromel.classname == "sub")){
cleanup(fromel.submenu, true);
menuitemnormal(fromel);
}
else if ((fromel != toel) && (fromel.tagname != "table"))
menuitemnormal(fromel);
window.status = "";
}
}
}
function togglemenu(el) {
if (el.menu == null)
el.menu = getchildren(el);
if (el.menu == activemenu) {
if (activesub)
menuitemnormal(activesub.parentelement.parentelement);
cleanup(el.menu,true);
activemenu = null;
activesub = null;
// showwindowedobjects(true);
}
else {
if (activemenu) {
cleanup(activemenu,true);
hidemenu(activemenu);
}
activemenu = el.menu;
var tpos = toppos(el.menu) + menu.offsetheight;
if ((document.body.offsetheight - tpos) >= el.menu.offsetheight) {
el.menu.style.pixeltop = (ie5) ? el.offsetheight + 1
: menu.offsetheight - el.offsettop - 2;
dir = 2;
}
else {
el.menu.style.pixeltop = (ie5) ? el.offsettop - el.menu.offsetheight - 1
: el.offsettop - el.menu.offsetheight + 2;
dir = 8;
}
el.menu.style.pixelleft = (ie5) ? el.offsetleft - 2 : el.offsetleft;
show(el.menu, dir);
showwindowedobjects(false);
}
}
function showsubmenu(el,show) {
var dir = 2;
temp = el;
list = el.children.tags("td");
el = list;
if (el.menu == null)
el.menu = getchildren(el);
temp.submenu = el.menu;
if ((el.menu != activemenu) && (show)) {
activesub = el.menu;
var lpos = leftpos(el.menu);
if ((document.body.offsetwidth - lpos)>= el.menu.offsetwidth) {
el.menu.style.left = (ie5) ? el.parentnode.offsetwidth
: el.offsetparent.offsetwidth;
dir = 6;
}
else {
el.menu.style.left = - el.menu.offsetwidth + 3;
dir = 4;
}
var tpos = (ie5) ? toppos(el.menu) + el.offsettop
: toppos(el.menu) + el.offsetparent.offsettop;// + el.menu.offsettop;
if ((document.body.offsetheight - tpos) >= el.menu.offsetheight)
el.menu.style.top =(ie5) ? el.offsettop - 4
: el.offsetparent.offsettop - 2;
else
el.menu.style.top =(ie5) ? el.offsettop + el.offsetheight - el.menu.offsetheight
: el.offsetparent.offsettop + el.offsetparent.offsetheight - el.menu.offsetheight + 2;
showsub(el.menu, dir);
}
else {
show(el.menu ,dir);
activesub = null;
}
}
function toppos(el) {
var temp = el;
var y = 0;
while (temp.id!="menu") {
temp = temp.offsetparent;
y += temp.offsettop;
}
return y;
}
function leftpos(el) {
var temp = el;
var x = 0;
while (temp.id!="menu") {
temp = temp.offsetparent;
x += temp.offsetleft;
}
return x + el.offsetparent.offsetwidth;
}
function show(el, dir) {
if (typeof(fade) == "function")
fade(el, true);
else if (typeof(swipe) == "function") {
tempelswipe = el;
tempdirswipe = dir;
el.style.visibility = "visible";
el.style.visibility = "hidden";
window.settimeout("tempswipe()", 0);
// swipe(el, dir);
}
else
el.style.visibility = "visible";
}
var tempelswipe, tempdirswipe;
function tempswipe() {
swipe(tempelswipe, tempdirswipe);
}
function showsub(el ,dir) {
show(el, dir);
// swipe(el, dir);
// fade(el, true);
// el.style.visibility = "visible";
}
function cleanup(menu,hide) {
if (menu.activeitem) { //if you've been here before
if ((menu.activeitem.classname == "sub") && (menu.activeitem.submenu)){ //the active item hasa submenu
cleanup(menu.activeitem.submenu, true);//clean up the subs as well
}
menuitemnormal(menu.activeitem);
}
if (hide) {
hidemenu(menu);
}
}
function hidemenu(el) {
if (typeof(fade) == "function") {
fade(el, false);
// window.settimeout(fadetimer);
}
else if (typeof(swipe) == "function") {
hideswipe(el);
}
else
el.style.visibility = "hidden";
}
function getchildren(el) {
var tlist = el.children.tags("table");
return tlist;
}
var dragobject = null;
var dragobjectpos = "top";
var tx;
var ty;
window.onload=fixsize;
window.onresize=fixsize;
function fixsize() {
if (dragobjectpos == "top") {
outerdiv.style.top = menu.offsetheight;
outerdiv.style.height = document.body.clientheight - menu.offsetheight;
}
else if( dragobjectpos == "bottom") {
outerdiv.style.top = 0;
outerdiv.style.height = document.body.clientheight - menu.offsetheight;
menu.style.top = document.body.clientheight - menu.offsetheight;
}
else {
outerdiv.style.top = 0;
outerdiv.style.height=document.body.clientheight;
}
}
function document.onmousedown() {
if(window.event.srcelement.id == "handle") {
dragobject = document.all;
restore(); //hide the menus while moving
ty = (window.event.clienty - dragobject.style.pixeltop);
window.event.returnvalue = false;
window.event.cancelbubble = true;
}
else {
dragobject = null;
}
}
function document.onmouseup() {
if(dragobject) {
dragobject = null;
}
}
function document.onmousemove() {
if(dragobject) {
if(window.event.clientx >= 0) {
if((window.event.clienty - ty) <= 15) {
dragobject.style.border = "0 solid buttonface";
dragobject.style.width = "100%";
dragobject.style.top = 0;
dragobject.style.left = 0;
dragobjectpos = "top";
fixsize();
}
else if ((window.event.clienty - ty) >= document.body.clientheight - menu.offsetheight - 15) {
dragobject.style.border = "0 solid buttonface";
dragobject.style.width = "100%";
dragobject.style.top = document.body.clientheight - menu.offsetheight;
dragobject.style.left = 0;
dragobjectpos="bottom";
fixsize();
}
else {
dragobject.style.width = "10px";
dragobject.style.left = window.event.clientx;
dragobject.style.top = window.event.clienty - ty;
dragobject.style.border = "2px outset white";
dragobjectpos = "float";
fixsize();
}
}
else {
dragobject.style.border = "";
dragobject.style.left = "0";
dragobject.style.top = "0";
}
window.event.returnvalue = false;
window.event.cancelbubble = true;
}
}
function showwindowedobjects(show) {
if (hidewindowedcontrols) {
var windowedobjecttags = new array("select", "iframe", "object", "applet","embed");
var windowedobjects = new array();
var j=0;
for (var i=0; i<windowedobjecttags.length; i++) {
var tmptags = document.all.tags(windowedobjecttags);
if (tmptags.length > 0) {
for (var k=0; k<tmptags.length; k++) {
windowedobjects = tmptags;
}
}
}
for (var i=0; i<windowedobjects.length; i++) {
if (!show)
windowedobjects.visbackup = (windowedobjects.style.visibility == null) ? "visible" : windowedobjects.style.visibility;
windowedobjects.style.visibility = (show) ? windowedobjects.visbackup : "hidden";
}
}
}
</script>
<table cellspacing=1 id=menu onclick=menuclick() onmouseout=menuout()
onmouseover=menuover() onselectstart="return false">
<tbody>
<tr id=menubar>
<td class=disabled style="padding-left: 0px; padding-right: 1px">
<div class=disabled id=handle style="height: 100%; left: 3px; width: 3px"
title="move me!" for="menu"></div></td>
<td class=root>home
<table cellspacing=0 class=menu style="visibility: hidden">
<tbody>
<tr href="javascript:alert('这里可以改成一个链接!')">
<td><img height=17 src="这里改为图片地址" width=16>http://code.ik8.com/html/这里改为图片地址</td>
<td nowrap>link</td>
<td></td>
</tr>
<tr class=sub>
<td></td>
<td nowrap>link</td>
<td>
<table cellspacing=0 class=menu style="visibility: hidden">
<tbody>
<tr href="javascript:alert('这里可以改成一个链接')">
<td nowrap style="height: 20px">link</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class=disabled>
<td colspan=3>
<hr>
</td>
</tr>
<tr
href="javascript:alert('这里可以改成一个链接')">
<td></td>
<td>link</td>
<td></td>
</tr>
<tr title="this is really easy">
<td></td>
<td>link</td>
<td></td>
</tr>
</tbody>
</table>
</td>
<td class=root>help
<table cellspacing=0 class=menu style="visibility: hidden">
<tbody>
<tr
href="javascript:alert('www.51js.com')">
<td></td>
<td>about</td>
<td></td></tr></tbody></table></td>
<td class=disabled width="100%"> </td></tr></tbody></table>
<div id=outerdiv>
页:
[1]