网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
菜单导航
-> 页面顶部菜单 - 网页特效代码
页面顶部菜单 - 网页特效代码
作者:admin 发布时间:2008-2-22 13:59:31 发布人: admin
脚本说明: 把如下代码加入<body>区域中 <style rel="stylesheet" type="text/css"> BODY { BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN: 0px } #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 type="text/javascript"> var activeMenu = null; var activeSub = null; var tempEl; var t; var hideWindowedControls = true; var ie5 = (document.getElementsByTagName != null); //////////////////////////////////////////////////////// //If you wan't different colors than default overload these functions... 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"; } //...untill here //////////////////////////////////////////////////////// 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; } //////////////////////////////////////////////////////// // Used to hide the menu when clicked elsewhere 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[list.length-1]; 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; } } //////////////////////////////////////////////////////// //The following two functions are needed to calculate the position 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 has a 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[0]; } ///////////////////////////////////////////////////////////////////////////// // The rest is just for the moving/docking var dragObject = null; var dragObjectPos = "top"; var tx; var ty; ///////////////////////////////////////////////////////////////////////////// // Fixing sizes and positions 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[window.event.srcElement.getAttribute("for")]; 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; } } //This function si used for hiding windowed controls because they interfere with the menus 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[i]); if (tmpTags.length > 0) { for (var k=0; k<tmpTags.length; k++) { windowedObjects[j++] = tmpTags[k]; } } } for (var i=0; i<windowedObjects.length; i++) { if (!show) windowedObjects[i].visBackup = (windowedObjects[i].style.visibility == null) ? "visible" : windowedObjects[i].style.visibility; windowedObjects[i].style.visibility = (show) ? windowedObjects[i].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">Demo <table cellspacing="0" class="menu" style="VISIBILITY: hidden"> <tbody> <tr href="javascript:alert('这里可以改成一个链接!')"> <td><img src="http://web.archive.org/web/20130419033806im_/http://www.alixixi.com/images/link.gif" width="16" onclick="javascript:window.open(this.src);" style="CURSOR: pointer" onload="return imgzoom(this,550)"></td> <td nowrap>You can use icons</td> <td></td></tr> <tr class="disabled"> <td></td> <td nowrap>Disabled menuItems</td> <td></td></tr> <tr class="sub"> <td></td> <td nowrap>Use sub menus</td> <td><span class="more">4</span> <table cellspacing="0" class="menu" style="VISIBILITY: hidden"> <tbody> <tr href="javascript:alert('这里可以改成一个链接')"> <td nowrap style="HEIGHT: 20px">Inside a sub menu</td></tr></tbody></table></td></tr> <tr class="disabled"> <td colspan="3"> <hr> </td></tr> <tr href="javascript:alert('这里可以改成一个链接')"> <td></td> <td>Use separators</td> <td></td></tr> <tr title="This is really easy"> <td></td> <td>Use tool tip</td> <td></td></tr></tbody></table></td> <td class="root">Help <table cellspacing="0" class="menu" style="VISIBILITY: hidden"> <tbody> <tr class="sub"> <td><span style="WIDTH: 20px"> </span></td> <td>About</td> <td><span class="more">4</span> <table cellspacing="0" class="menu" style="BACKGROUND: black; VISIBILITY: hidden"> <tbody> <tr class="disabled" title=""> <td> <div style="BACKGROUND: black; COLOR: white; FONT-FAMILY: verdana; FONT-SIZE: 12px; MARGIN: 5px; PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px; WIDTH: 200px"> <p style="MARGIN: 5px">站长<span style="COLOR: tomato; FONT-WEIGHT: bold">AKEN</span> 欢迎你的光临<a href="http://web.archive.org/web/20130419033806/mailto:xjl906@163.com" style="COLOR: white">Aken</a>. <p style="BACKGROUND: beige; COLOR: red; FONT-SIZE: 9px; MARGIN: 10px">这个菜单只适用与IE4.0或更高版本 <p onclick="bugs.style.display=(bugs.style.display=='')?'none':'';" style="CURSOR: hand; TEXT-DECORATION: underline">欢迎再次光临! <p id="bugs" style="DISPLAY: none; MARGIN-LEFT: 20px; MARGIN-TOP: -5px">www.591sc.com<br>是最大的中文javascript站点<br>并且每日更新,你一定不可错过 <hr style="COLOR: deepskyblue"> <p style="MARGIN-BOTTOM: -10px; MARGIN-LEFT: 33px; MARGIN-TOP: -12px"><a href="http://web.archive.org/web/20130419033806/http://www.591sc.com/" style="COLOR: white; FONT-FAMILY: arial black; FONT-SIZE: 30px; FONT-STYLE: italic; TEXT-DECORATION: none" target="_top">591sc.com</a> </div></td></tr></tbody></table></td></tr></tbody></table></td> <td class="disabled" width="100%"> </td></tr></tbody></table> <div id="outerDiv">
页面顶部菜单 - 网页特效代码
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
添加收藏,将网页添加到浏览器收藏夹里
下一篇:文章:
多层下拉菜单 - 网页特效代码
本类浏览排行 »
搜索页面中的内容
又一款综合搜索引擎代码
标题栏显示当前时间
倒影效果的电子表,显示当前时间
自动记录当前页面最新的更新日期
JS让网页每隔2秒弹出一次对话框
一款超酷的CSS列表排行榜
鼠标悬停放大的纯CSS分页效果
本站推荐文章 »
垂直三栏自适应等高布局
仿QQ消息管理器的文本内容样式
支付宝的控制台动画效果菜单
文字、图片拖曳移动
可拉伸移动的DIV层效果
很酷的图片伸缩放大功能
较好的视觉效果的网页选项卡
CSS实例:通过定义渐变边框给图片加阴影