页面特效页面顶部的多级导航条
把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件要完成此效果需要三个步骤
第一步：把如下代码加入到<head>区域中
<script>
var isdom = (document.getelementbyid ? true : false);
var isie4 = ((document.all && !isdom) ? true : false);
var isns4 = (document.layers ? true : false);
function getref(id) {
if (isdom) return document.getelementbyid(id);
if (isie4) return document.all;
if (isns4) return document.layers;
}
function getsty(id) {
return (isns4 ? getref(id) : getref(id).style);
}
// hide timeout.
var poptimer = 0;
// array showing highlighted menu items.
var litnow = new array();
function popover(menunum, itemnum) {
cleartimeout(poptimer);
hideallbut(menunum);
litnow = gettree(menunum, itemnum);
changecol(litnow, true);
targetnum = menu.target;
if (targetnum > 0) {
thisx = parseint(menu.ref.left) + parseint(menu.ref.left);
thisy = parseint(menu.ref.top) + parseint(menu.ref.top);
with (menu.ref) {
left = parseint(thisx + menu.x);
top = parseint(thisy + menu.y);
visibility = 'visible';
}
}
}
function popout(menunum, itemnum) {
if ((menunum == 0) && !menu.target)
hideallbut(0)
else
poptimer = settimeout('hideallbut(0)', 500);
}
function gettree(menunum, itemnum) {
// array index is the menu number. the contents are null (if that menu is not a parent)
// or the item number in that menu that is an ancestor (to light it up).
itemarray = new array(menu.length);
while(1) {
itemarray = itemnum;
// if we've reached the top of the hierarchy, return.
if (menunum == 0) return itemarray;
itemnum = menu.parentitem;
menunum = menu.parentmenu;
}
}
// pass an array and a boolean to specify colour change, true = over colour.
function changecol(changearray, isover) {
for (menucount = 0; menucount < changearray.length; menucount++) {
if (changearray) {
newcol = isover ? menu.overcol : menu.backcol;
// change the colours of the div/layer background.
with (menu].ref) {
if (isns4) bgcolor = newcol;
else backgroundcolor = newcol;
}
}
}
}
function hideallbut(menunum) {
var keepmenus = gettree(menunum, 1);
for (count = 0; count < menu.length; count++)
if (!keepmenus)
menu.ref.visibility = 'hidden';
changecol(litnow, false);
}
// *** menu construction functions ***
function menu(isvert, popind, x, y, width, overcol, backcol, borderclass, textclass) {
// true or false - a vertical menu?
this.isvert = isvert;
// the popout indicator used (if any) for this menu.
this.popind = popind
// position and size settings.
this.x = x;
this.y = y;
this.width = width;
// colours of menu and items.
this.overcol = overcol;
this.backcol = backcol;
// the stylesheet class used for item borders and the text within items.
this.borderclass = borderclass;
this.textclass = textclass;
// parent menu and item numbers, indexed later.
this.parentmenu = null;
this.parentitem = null;
// reference to the object's style properties (set later).
this.ref = null;
}
function item(text, href, frame, length, spacing, target) {
this.text = text;
this.href = href;
this.frame = frame;
this.length = length;
this.spacing = spacing;
this.target = target;
// reference to the object's style properties (set later).
this.ref = null;
}
function writemenus() {
if (!isdom && !isie4 && !isns4) return;
for (currmenu = 0; currmenu < menu.length; currmenu++) with (menu) {
// variable for holding html for items and positions of next item.
var str = '', itemx = 0, itemy = 0;
// remember, items start from 1 in the array (0 is menu object itself, above).
// also use properties of each item nested in the other with() for construction.
for (curritem = 1; curritem < menu.length; curritem++) with (menu) {
var itemid = 'menu' + currmenu + 'item' + curritem;
// the width and height of the menu item - dependent on orientation!
var w = (isvert ? width : length);
var h = (isvert ? length : width);
// create a div or layer text string with appropriate styles/properties.
// thanks to paul maden (www.jojoo.net) for helping debug this in ie4, apparently
// the width must be a miniumum of 3 for it to work in that browser.
if (isdom || isie4) {
str += '<div id="' + itemid + '" style="position: absolute; left: ' + itemx + '; top: ' + itemy + '; width: ' + w + '; height: ' + h + '; visibility: inherit; ';
if (backcol) str += 'background: ' + backcol + '; ';
str += '" ';
}
if (isns4) {
str += '<layer id="' + itemid + '" left="' + itemx + '" top="' + itemy + '" width="' +w + '" height="' + h + '" visibility="inherit" ';
if (backcol) str += 'bgcolor="' + backcol + '" ';
}
if (borderclass) str += 'class="' + borderclass + '" ';
// add mouseover handlers and finish div/layer.
str += 'onmouseover="popover(' + currmenu + ',' + curritem + ')" onmouseout="popout(' + currmenu + ',' + curritem + ')">';
// add contents of item (default: table with link inside).
// in ie/ns6+, add padding if there's a border to emulate ns4's layer padding.
// if a target frame is specified, also add that to the <a> tag.
str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isns4 && borderclass ? 3 : 0) + '"><tr><td align="left" height="' + (h - 7) + '">' + '<a class="' + textclass + '" href="' + href + '"' + (frame ? ' target="' + frame + '">' : '>') + text + '</a></td>';
if (target > 0) {
// set target's parents to this menu item.
menu.parentmenu = currmenu;
menu.parentitem = curritem;
// add a popout indicator.
if (popind) str += '<td class="' + textclass + '" align="right">' + popind + '</td>';
}
str += '</tr></table>' + (isns4 ? '</layer>' : '</div>');
if (isvert) itemy += length + spacing;
else itemx += length + spacing;
}
if (isdom) {
var newdiv = document.createelement('div');
document.getelementsbytagname('body').item(0).appendchild(newdiv);
newdiv.innerhtml = str;
ref = newdiv.style;
ref.position = 'absolute';
ref.visibility = 'hidden';
}
// insert a div tag to the end of the body with menu html in place for ie4.
if (isie4) {
document.body.insertadjacenthtml('beforeend', '<div id="menu' + currmenu + 'div" ' + 'style="position: absolute; visibility: hidden">' + str + '</div>');
ref = getsty('menu' + currmenu + 'div');
}
// in ns4, create a reference to a new layer and write the items to it.
if (isns4) {
ref = new layer(0);
ref.document.write(str);
ref.document.close();
}
for (curritem = 1; curritem < menu.length; curritem++) {
itemname = 'menu' + currmenu + 'item' + curritem;
if (isdom || isie4) menu.ref = getsty(itemname);
if (isns4) menu.ref = ref.document;
}
}
with(menu) {
ref.left = x;
ref.top = y;
ref.visibility = 'visible';
}
}
// syntaxes: *** start editing here, read this section carefully! ***
//
// menu = new menu(vertical menu? (true/false), 'popout indicator', left, top,
// width, 'mouseover colour', 'background colour', 'border stylesheet', 'text stylesheet');
//
// left and top are measured on-the-fly relative to the top-left corner of its trigger, or
// for the root menu, the top-left corner of the page.
//
// menu = new item('text', 'url', 'target frame', length of menu item,
//additional spacing to next menu item, number of target menu to popout);
//
// if no target menu (popout) is desired, set it to 0. likewise, if your site does not use
// frames, pass an empty string as a frame target.
//
// something that needs explaining - the vertical menu setup. you can see most menus below
// are 'true', that is they are vertical, except for the first root menu. the 'length' and
// 'width' of an item depends on its orientation -- length is how long the item runs for in
// the direction of the menu, and width is the lateral dimension of the menu. just look at
// the examples and tweak the numbers, they'll make sense eventually :).
var menu = new array();
// default colours passed to most menu constructors (just passed to functions, not
// a global variable - makes things easier to change later in bulk).
var defover = '#336699', defback = '#003366';
// default 'length' of menu items - item height if menu is vertical, width if horizontal.
var deflength = 22;
// menu 0 is the special, 'root' menu from which everything else arises.
menu = new array();
// a non-vertical menu with a few different colours and no popout indicator, as an example.
// *** move root menu around here ***it's positioned at (5, 0) and is 17px high now.
menu = new menu(false, '', 5, 0, 17, '#669999', '#006666', '', 'itemtext');
// notice how the targets are all set to nonzero values...
// the 'length' of each of these items is 40, and there is spacing of 10 to the next item.
// most of the links are set to '#' hashes, make sure you change them to actual files.
menu = new item('file', '#', '', 40, 10, 1);
menu = new item('edit', '#', '', 40, 10, 2);
menu = new item('help', '#', '', 40, 10, 3);
// an example of a link with a target frame/window as well...
menu = new item('site', 'http://www.jojoo.net', '_new', 40, 10, 0);
// file menu.
menu = new array();
// the file menu is positioned 0px across and 22 down from its trigger, and is 80 wide.
// all text in this menu has the stylesheet class 'item' -- see the <style> section above.
// we've passed a 'greater-than' sign '>' as a popout indicator. try an image...?
menu = new menu(true, '>', 0, 22, 80, defover, defback, 'itemborder', 'itemtext');
menu = new item('open', '#', '', deflength, 0, 0);
menu = new item('save', '#', '', deflength, 0, 0);
// non-zero target means this will trigger a popout -- menu which is the 'reopen' menu.
menu = new item('reopen', '#', '', deflength, 0, 4);
menu = new item('exit', '#', '', deflength, 0, 0);
// edit menu.
menu = new array();
menu = new menu(true, '>', 0, 22, 80, defover, defback, 'itemborder', 'itemtext');
menu = new item('cut', '#', '', deflength, 0, 0);
menu = new item('copy', '#', '', deflength, 0, 0);
menu = new item('paste', '#', '', deflength, 0, 0);
// help menu
menu = new array();
menu = new menu(true, '<', 0, 22, 80, defover, defback, 'itemborder', 'itemtext');
menu = new item('contents', '#', '', deflength, 0, 0);
menu = new item('index', '#', '', deflength, 0, 0);
menu = new item('about', '#', '', deflength, 0, 5);
// reopen menu
menu = new array();
// this is across but not down... a horizontal popout (with crazy stylesheets :)...
menu = new menu(true, '>', 85, 0, 120, '#333366', '#666699', 'crazyborder', 'crazytext');
// these items are lengthier than normal, and have extra spacing due to the fancy borders.
menu = new item('recent doc 1:<br>schedule', '#', '', 36, 4, 0);
menu = new item('recent doc 2:<br>plan', '#', '', 36, 7, 0);
menu = new item('etc. etc...', '#', '', deflength, 0, 0);
// help about popout
menu = new array();
// leftwards popout with a negative x and y relative to its trigger.
menu = new menu(true, '>', -85, -17, 80, defover, defback, 'itemborder', 'itemtext');
menu = new item('leftwards!<br>and up!', '#', '', 40, 0, 0);
// *** optional code from here down ***
// these two lines handle the window resize bug in ns4. see <body onresize="...">.
// i recommend you leave this here as otherwise when you resize ns4's width menus are hidden.
var popoldwidth = window.innerwidth;
nsresizehandler = new function('if (popoldwidth != window.innerwidth) location.reload()');
// this is a quick snippet that captures all clicks on the document and hides the menus
// every time you click. use if you want.
if (isns4) document.captureevents(event.click);
document.onclick = clickhandle;
function clickhandle(evt)
{
if (isns4) document.routeevent(evt);
hideallbut(0);
}
// this is just the moving command for the example.
function moveroot()
{
with(menu.ref) left = ((parseint(left) < 100) ? 100 : 5);
}
//end -->
</script>
<!-- *** important stylesheet section - change the border classes and text colours *** -->
<style>
<!--
.itemborder { border: 1px solid black }
.itemtext { text-decoration: none; color: #ffffff; font: 12px arial, helvetica }
.crazyborder { border: 2px outset #663399 }
.crazytext { text-decoration: none; color: #ffcc99; font: bold 12px arial, helvetica }
-->
</style>
第二步：把如下代码加入到<body>区域中
<table bgcolor="#006666" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td height="17"><font size="1"> </font></td></tr></table>
第三步：把“marginwidth="0" marginheight="0" style="margin: 0" onload="writemenus()" onresize="if (isns4) nsresizehandler()"”加在<body>标记里
例如：<body marginwidth="0" marginheight="0" style="margin: 0" onload="writemenus()" onresize="if (isns4) nsresizehandler()">
页:
[1]