您好,欢迎来到模板无忧!
登录
注册
收藏
搜索
地图
帮助
模板无忧
网页特效
网页模板
CMS模板
PPT模板
简历模板
网页特效
视频教程
网页图标
字体下载
CMS教程
DivCss
网站制作
网站运营
网络编程
服务器
请选择您需要的素材分类 |
不限分类
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
关闭顶部
展开顶部
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
AI小聚 能写会画
域名
推荐
展开边栏
关闭边栏
网页特效代码
模板无忧
>
网页特效
>
表单按钮特效代码
>
收藏
分享
查看评论
表单按钮
演示
多数菜单_表单按钮特效
0/5
1
2
3
4
5
查看演示效果
特效Tag:
菜单
添加
织梦DedeCMS视频教程
买空间 租服务器 选网硕互联!
无忧站长工具,百度权重一键全查!
多数菜单,您可以先修改部分代码再运行.
<HTML> <head><title>-模板无忧www.mb5u.com</title> <script> var isDOM = (document.getElementById ? true : false); var isIE4 = ((document.all && !isDOM) ? true : false); var isNS4 = (document.layers ? true : false); var popTimer = 0;// Hide timeout. // Array showing highlighted menu items. var litNow = new Array(); function getRef(id) { if (isDOM) return document.getElementById(id); if (isIE4) return document.all[id]; if (isNS4) return document.layers[id]; } function getSty(id) { return (isNS4 ? getRef(id) : getRef(id).style); } function popOver(menuNum, itemNum) { clearTimeout(popTimer); hideAllBut(menuNum); litNow = getTree(menuNum, itemNum); changeCol(litNow, true); targetNum = menu[menuNum][itemNum].target; if (targetNum > 0) { thisX = parseInt(menu[menuNum][0].ref.left) + parseInt(menu[menuNum][itemNum].ref.left); thisY = parseInt(menu[menuNum][0].ref.top) + parseInt(menu[menuNum][itemNum].ref.top); with (menu[targetNum][0].ref) { left = parseInt(thisX + menu[targetNum][0].x); top = parseInt(thisY + menu[targetNum][0].y); visibility = 'visible'; } } } function popOut(menuNum, itemNum) { if ((menuNum == 0) && !menu[menuNum][itemNum].target) hideAllBut(0) else popTimer = setTimeout('hideAllBut(0)', 500); } function getTree(menuNum, itemNum) { // Array index is the menu number. The mrcs 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[menuNum] = itemNum; // If we've reached the top of the hierarchy, return. if (menuNum == 0) return itemArray; itemNum = menu[menuNum][0].parentItem; menuNum = menu[menuNum][0].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[menuCount]) { newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol; // Change the colours of the div/layer background. with (menu[menuCount][changeArray[menuCount]].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[count]) menu[count][0].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[currMenu][0]) { // 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[currMenu].length; currItem++) with (menu[currMenu][currItem]) { 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 mrcs 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[target][0].parentMenu = currMenu; menu[target][0].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[currMenu].length; currItem++) { itemName = 'menu' + currMenu + 'item' + currItem; if (isDOM || isIE4) menu[currMenu][currItem].ref = getSty(itemName); if (isNS4) menu[currMenu][currItem].ref = ref.document[itemName]; } } with(menu[0][0]) { ref.left = x; ref.top = y; ref.visibility = 'visible'; } } // Syntaxes: *** START EDITING HERE, READ THIS SECTION CAREFULLY! *** // // menu[menuNumber][0] = 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[menuNumber][itemNumber] = 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[0] = 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[0][0] = 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[0][1] = new Item(' File', '#', '', 40, 10, 1); menu[0][2] = new Item(' Edit', '#', '', 40, 10, 2); menu[0][3] = new Item(' Help', '#', '', 40, 10, 3); // An example of a link with a target frame/window as well... menu[0][4] = new Item(' Site', 'http://www.jojoo.net', '_new', 40, 10, 6); menu[0][5] = new Item(' Other', 'http://www.jojoo.net', '_new', 40, 10, 8); // File menu. menu[1] = 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[1][0] = new Menu(true, '>', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText'); menu[1][1] = new Item('Open', '#', '', defLength, 0, 0); menu[1][2] = new Item('Save', '#', '', defLength, 0, 0); // Non-zero target means this will trigger a popout -- menu[4] which is the 'Reopen' menu. menu[1][3] = new Item('Reopen', '#', '', defLength, 0, 4); menu[1][4] = new Item('Exit', '#', '', defLength, 0, 0); // Edit menu. menu[2] = new Array(); menu[2][0] = new Menu(true, '>', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText'); menu[2][1] = new Item('Cut', '#', '', defLength, 0, 0); menu[2][2] = new Item('Copy', '#', '', defLength, 0, 0); menu[2][3] = new Item('Paste', '#', '', defLength, 0, 0); // Help menu menu[3] = new Array(); menu[3][0] = new Menu(true, '<', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText'); menu[3][1] = new Item('Contents', '#', '', defLength, 0, 0); menu[3][2] = new Item('Index', '#', '', defLength, 0, 0); menu[3][3] = new Item('About', '#', '', defLength, 0, 5); // Reopen menu menu[4] = new Array(); menu[4][0] = new Menu(true, '>', 80, 0, 80, defOver, defBack, 'itemBorder', 'itemText'); menu[4][1] = new Item('site1', '#', '', defLength, 0, 0); menu[4][2] = new Item('site2', '#', '', defLength, 0, 0); menu[4][3] = new Item('site3', '#', '', defLength, 0, 0); // Help About popout menu[5] = new Array(); // Leftwards popout with a negative x and y relative to its trigger. menu[5][0] = new Menu(true, '>', -85, -17, 80, defOver, defBack, 'itemBorder', 'itemText'); menu[5][1] = new Item('Leftwards!<br>And up!', '#', '', 40, 0, 0); menu[6] = new Array(); menu[6][0] = new Menu(true, '>', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText'); menu[6][1] = new Item('site1', '#', '', defLength, 0, 0); menu[6][2] = new Item('site2', '#', '', defLength, 0, 7); menu[6][3] = new Item('site3', '#', '', defLength, 0, 0); menu[7] = new Array(); menu[7][0] = new Menu(true, '>', 80, 0, 80, defOver, defBack, 'itemBorder', 'itemText'); menu[7][1] = new Item('site21', '#', '', defLength, 0, 0); menu[7][2] = new Item('site22', '#', '', defLength, 0, 0); menu[7][3] = new Item('site23', '#', '', defLength, 0, 0); menu[8] = new Array(); menu[8][0] = new Menu(true, '>', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText'); menu[8][1] = new Item('other1', '#', '', defLength, 0, 0); menu[8][2] = new Item('other2', '#', '', defLength, 0, 0); menu[8][3] = new Item('other3', '#', '', defLength, 0, 9); menu[9] = new Array(); menu[9][0] = new Menu(true, '>', 80, 0, 80, defOver, defBack, 'itemBorder', 'itemText'); menu[9][1] = new Item('other1', '#', '', defLength, 0, 0); menu[9][2] = new Item('other2', '#', '', defLength, 0, 0); menu[9][3] = new Item('other3', '#', '', defLength, 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[0][0].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 Tahoma,Arial, Helvetica } .crazyBorder { border: 2px outset #663399 } .crazyText { text-decoration: none; color: #FFCC99; font: Bold 12px Tahoma,Arial, Helvetica } --> </style> </head> <body marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()"> <table bgcolor="#006666" width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td height="17"><font size="1"> </font></td></tr></table> </body> </HTML>
所属频道:
表单按钮特效
/
更新时间:2012-11-02
[收藏]
[报错]
[返回列表]
评论加载中....
相关
表单按钮特效
:
又一个带描述的表单
可自由移动位置的导航条
页面转跳。跟本站的教学文章中的那些转到第几页一样的
带Checkbox的列表框
提供四种打开新窗的形式
自动复制代码
方便登录各种管理页面以及任何EMAIL量身定做!
QQ分类搜索代码
查找表格的内容
一个带描述的表单
常用email检验函数
file框模拟新解
表单按钮特效Rss订阅
特效代码搜索
表单按钮特效推荐
对网页滚动条的隐藏及显示控制
CSS美化的漂亮分页按钮
仿微软风格的按钮演示
JavaScript检测EMail地址输入是否正确
用JavaScript检测上传文件类型
JavaScript文本域字体选择功能
JavaScript自动复制文本框内容至另一个
页面转跳。跟本站的教学文章中的那些转到第几页一样的
点击单选框激活链接开始跳转
CSS让Textarea文本框自适应浏览器宽度
猜你也喜欢看这些
面积计算器
百度的Js日历,值得一看
多种地域的时间显示
八种风格的时间日期
JavaScript跳动的时间电子钟
停止查看 Script
日历一
军用AM/PM时间显示 Script
可以选择12小时、24小时制的时钟显示方式
在文本框里显示当前时间
相关链接:
复制本页链接
|
搜索多数菜单
特效说明:
表单按钮模板
-
多数菜单
。
收藏&分享
QQ空间
新浪微博
腾讯微博
人人网
开心网
百度搜藏
复制网址
更多...