SKRYPTY MENU
Wstaw w ramach BODY <body marginwidth="10" marginheight="10" topmargin="10" leftmargin="10"> <!-- Include the menu script: ======================================================= --> <script language="JavaScript" src="moje/menu.js"></script> <!-- ================================================================================ --> <script language="JavaScript"> <!-- // create the first menu: =============================================================== var menu1 = new MENU("left"); // new vertical menu // here are our menu items (level, height, text, [URL], [target], [JavaScript]): menu1.entry(1, 20, "<b>item 1</b>", "", "", "alert('You clicked menu 1 item 1')"); menu1.entry(2, 15, "<b>item 1.1</b>", "", "", "alert('You clicked menu 1 item 1.1')"); menu1.entry(2, 15, "<b>item 1.2</b>", "", "", "alert('You clicked menu 1 item 1.2')"); menu1.entry(2, 15, "<b>item 1.3</b>", "", "", "alert('You clicked menu 1 item 1.3')"); menu1.entry(3, 15, "<b>item 1.3.1</b>", "", "", "alert('You clicked menu 1 item 1.3.1')"); menu1.entry(3, 15, "<b>item 1.3.2</b>", "", "", "alert('You clicked menu 1 item 1.3.2')"); menu1.entry(4, 15, "<b>item 1.3.2.1</b>", "", "", "alert('You clicked menu 1 item 1.3.2.1')"); menu1.entry(4, 15, "<b>item 1.3.2.2</b>", "", "", "alert('You clicked menu 1 item 1.3.2.2')"); menu1.entry(4, 15, "<b>item 1.3.2.3</b>", "", "", "alert('You clicked menu 1 item 1.3.2.3')"); menu1.entry(2, 15, "<b>item 1.4</b>", "", "", "alert('You clicked menu 1 item 1.4')"); menu1.entry(3, 15, "<b>item 1.4.1</b>", "", "", "alert('You clicked menu 1 item 1.4.1')"); menu1.entry(2, 15, "<b>item 1.5</b>", "", "", "alert('You clicked menu 1 item 1.5')"); menu1.entry(1, 20, "<b>item 2</b>", "", "", "alert('You clicked menu 1 item 2')"); menu1.entry(2, 15, "<b>item 2.1</b>", "", "", "alert('You clicked menu 1 item 2.1')"); menu1.entry(2, 15, "<b>item 2.2</b>", "", "", "alert('You clicked menu 1 item 2.2')"); menu1.entry(1, 20, "<b>item 3</b>", "", "", "alert('You clicked menu 1 item 3')"); menu1.entry(1, 20, "<b>item 4</b>", "", "", "alert('You clicked menu 1 item 4')"); menu1.entry(2, 15, "<b>item 4.1</b>", "", "", "alert('You clicked menu 1 item 4.1')"); menu1.entry(3, 15, "<b>item 4.1.1</b>", "", "", "alert('You clicked menu 1 item 4.1.1')"); menu1.entry(2, 15, "<b>item 4.2</b>", "", "", "alert('You clicked menu 1 item 4.2')"); menu1.mainTop = 70; // menu top position in pixels menu1.mainLeft = 10; // menu left position in pixels menu1.mainBGColor = "moje/back.jpg"; // menu background menu1.floatMenu = true; // we want a floating menu menu1.create(); // create the menu // create the second menu: ============================================================== var menu2 = new MENU("top"); // new horizontal menu // here are our menu items (level, height, text, [URL], [target], [JavaScript]): menu2.entry(1, 20, "<b>item 1</b>", "", "", "alert('You clicked menu 2 item 1')"); menu2.entry(2, 15, "<b>item 1.1</b>", "", "", "alert('You clicked menu 2 item 1.1')"); menu2.entry(2, 15, "<b>item 1.2</b>", "", "", "alert('You clicked menu 2 item 1.2')"); menu2.entry(2, 15, "<b>item 1.3</b>", "", "", "alert('You clicked menu 2 item 1.3')"); menu2.entry(3, 15, "<b>item 1.3.1</b>", "", "", "alert('You clicked menu 2 item 1.3.1')"); menu2.entry(3, 15, "<b>item 1.3.2</b>", "", "", "alert('You clicked menu 2 item 1.3.2')"); menu2.entry(4, 15, "<b>item 1.3.2.1</b>", "", "", "alert('You clicked menu 2 item 1.3.2.1')"); menu2.entry(4, 15, "<b>item 1.3.2.2</b>", "", "", "alert('You clicked menu 2 item 1.3.2.2')"); menu2.entry(4, 15, "<b>item 1.3.2.3</b>", "", "", "alert('You clicked menu 2 item 1.3.2.3')"); menu2.entry(2, 15, "<b>item 1.4</b>", "", "", "alert('You clicked menu 2 item 1.4')"); menu2.entry(3, 15, "<b>item 1.4.1</b>", "", "", "alert('You clicked menu 2 item 1.4.1')"); menu2.entry(2, 15, "<b>item 1.5</b>", "", "", "alert('You clicked menu 2 item 1.5')"); menu2.entry(1, 20, "<b>item 2</b>", "", "", "alert('You clicked menu 2 item 2')"); menu2.entry(2, 15, "<b>item 2.1</b>", "", "", "alert('You clicked menu 2 item 2.1')"); menu2.entry(2, 15, "<b>item 2.2</b>", "", "", "alert('You clicked menu 2 item 2.2')"); menu2.entry(1, 20, "<b>item 3</b>", "", "", "alert('You clicked menu 2 item 3')"); menu2.entry(1, 20, "<b>item 4</b>", "", "", "alert('You clicked menu 2 item 4')"); menu2.entry(2, 15, "<b>item 4.1</b>", "", "", "alert('You clicked menu 2 item 4.1')"); menu2.entry(3, 15, "<b>item 4.1.1</b>", "", "", "alert('You clicked menu 2 item 4.1.1')"); menu2.entry(2, 15, "<b>item 4.2</b>", "", "", "alert('You clicked menu 2 item 4.2')"); menu2.mainTop = 10; // menu top position in pixels menu2.mainLeft = 160; // menu left position in pixels menu2.mainBGColor = "moje/back.jpg"; // menu background menu2.floatMenu = false; // we don't want a floating menu menu2.create(); // create the menu //======================================================================================= //--> </script> <table border="0" cellspacing="0" cellpadding="0"><tr> <td colspan="2" height="65"><img src="moje/blank.gif" width="1" height="65"></td> </tr><tr> <td width="150"><img src="moje/blank.gif" width="150" height="1"></td> <td>
Menu poziome i pionowe
rozwijane po najechaniu kursorem
size: [33.5 KB]
Wstaw w ramach HEAD <SCRIPT LANGUAGE="JavaScript"> <!-- Original: Angus Turnbull --> <!-- Web Site: http://gusnz.cjb.net --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin 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[id]; if (isNS4) return document.layers[id]; } 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[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 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[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.paulmaden.com) 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[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', '#', '', 60, 10, 1); menu[0][2] = new Item(' Edit', '#', '', 60, 10, 2); menu[0][3] = new Item(' Help', '#', '', 60, 10, 3); // An example of a link with a target frame/window as well... menu[0][4] = new Item(' Site', 'http://gusnz.cjb.net', '_new', 60, 10, 0); // 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(); // This is across but not down... a horizontal popout (with crazy stylesheets :)... menu[4][0] = 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[4][1] = new Item('Recent Doc 1:<br>Schedule', '#', '', 36, 4, 0); menu[4][2] = new Item('Recent Doc 2:<br>Plan', '#', '', 36, 7, 0); menu[4][3] = new Item('Etc. etc...', '#', '', 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); // *** 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 Arial, Helvetica } .crazyBorder { border: 2px outset #663399 } .crazyText { text-decoration: none; color: #FFCC99; font: Bold 12px Arial, Helvetica } --> </style> Wstaw w ramach BODY <BODY marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()"> <!-- STEP THREE: Copy this code into the BODY of your HTML document --> <!-- It's important that you position the menu over a background, like a table/image --> <table bgcolor="#006666" width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td height="17"><font size="1"> </font></td></tr></table>
Menu poziome
rozwijane po najechaniu kursorem
size: [13.4 KB]
Wstaw w ramach HEAD <script language="JavaScript"> function big(lyr) { document.all[lyr].style.height='180px'; } /* small() makes selected layer shorter (height property)*/ function small(lyr) { document.all[lyr].style.height='32px'; } /* start() makes all layers short to start with (height property)*/ function start() { document.all.Layer1.style.height='32px'; document.all.Layer2.style.height='32px'; document.all.Layer3.style.height='32px'; } //-- !> </script> Wstaw w ramach BODY <!-- STEP TWO: Insert the onLoad event handler into your BODY tag --> <BODY onLoad="start()"> <!-- STEP THREE: Copy this code into the BODY of your HTML document --> <div id="Layer1" style="position:absolute; width:155px; height:180px; z-index:1; left: 74px; top: 38px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer1')"; onMouseOut="small('Layer1')"> <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif"> <a href="http://www.webdiary.pl/modules/javascript/menu1.html">Menu 1</a> <br> <br> <a href="http://www.webdiary.pl/modules/javascript/link1.html">Link 1</a><br> <br> <a href="http://www.webdiary.pl/modules/javascript/link2.html">Link 2</a><br> <br> <a href="http://www.webdiary.pl/modules/javascript/link3.html">Link 3</a><br> <br> <a href="http://www.webdiary.pl/modules/javascript/link4.html">Link 4</a></font></div> </div> <div id="Layer2" style="position:absolute; width:155px; height:180px; z-index:1; left: 236px; top: 38px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer2')"; onMouseOut="small('Layer2')"> <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif"> <a href="http://www.webdiary.pl/modules/javascript/menu2.html">Menu 2</a> <br> <br><a href="http://www.webdiary.pl/modules/javascript/link5.html">Link 5</a><br> <br> <a href="http://www.webdiary.pl/modules/javascript/link6.html">Link 6</a><br> <br> <a href="http://www.webdiary.pl/modules/javascript/link7.html">Link 7</a><br> <br> <a href="http://www.webdiary.pl/modules/javascript/link8.html">Link 8</a></font></div> </div> <div id="Layer3" style="position:absolute; width:155px; height:180px; z-index:1; left: 398px; top: 38px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer3')"; onMouseOut="small('Layer3')"> <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif"> <a href="http://www.webdiary.pl/modules/javascript/menu3.html">Menu 3</a> <br> <br> <a href="http://www.webdiary.pl/modules/javascript/link9.html">Link 9</a><br> <br> <a href="http://www.webdiary.pl/modules/javascript/link10.html">Link 10</a><br> <br> <a href="http://www.webdiary.pl/modules/javascript/link11.html">Link 11</a><br> <br> <a href="http://www.webdiary.pl/modules/javascript/link12.html">Link 12</a></font></div> </div>
Menu poziome
rozwijane po najechaniu kursorem
size: [3.35 KB]
<style> <!-- #foldheader{cursor:hand ; font-weight:bold ; color:navy; font-size:10pt; font-family:Verdena; list-style-image:url(images/fold.gif)} #foldinglist{list-style-image:url(images/list.gif)} --> </style> <script language="JavaScript1.2"> <!-- /** * Based on Folding Menu Tree * Dynamic Drive (www.dynamicdrive.com) * For full source code, installation instructions, * 100's more DHTML scripts, and Terms Of * Use, visit dynamicdrive.com * * Updated to support arbitrarily nested lists * by Mark Quinn (mark@robocast.com) November 2nd 1998 */ var head="display:''" img1=new Image() img1.src="images/fold.gif" img2=new Image() img2.src="http://www.webdiary.pl/modules/javascript/images/open.gif" function change(){ if(!document.all) return if (event.srcElement.id=="foldheader") { var srcIndex = event.srcElement.sourceIndex var nested = document.all[srcIndex+1] if (nested.style.display=="none") { nested.style.display='' event.srcElement.style.listStyleImage="url(images/open.gif)" } else { nested.style.display="none" event.srcElement.style.listStyleImage="url(images/fold.gif)" } } } document.onclick=change //--> </script> <body bgcolor="white" text="black" link="#8080FF" vlink="gray" alink="#FE8B5A"> <ul> <li id="foldheader">News</li> <ul id="foldinglist" style="display:none" style=&{head};> <li><a href="http://www.cnn.com">CNN</a></li> <li><a href="http://www.abcnews.com">ABC News</a></li> <li><a href="http://www.vancouversun.com">Vancouver Sun</a></li> </ul> <li id="foldheader">Games</li> <ul id="foldinglist" style="display:none" style=&{head};> <li><a href="http://www.gamespot.com">GameSpot</a></li> <li><a href="http://www.happypuppy.com">Happy Puppy</a></li> <li><a href="http://www.gamecenter.com">Game Center</a></li> </ul> <li id="foldheader">Software</li> <ul id="foldinglist" style="display:none" style=&{head};> <li><a href="http://www.download.com">outer 1</a></li> <li><a href="http://www.hotfiles.com">outer 2</a></li> <li id="foldheader">Nested</li> <ul id="foldinglist" style="display:none" style=&{head};> <li><a href="http://www.windows95.com">nested 1</a></li> <li><a href="http://www.shareware.com">nested 2</a></li> </ul> <li><a href="http://www.windows95.com">outer 3</a></li> <li><a href="http://www.shareware.com">outer 4</a></li> </ul> </ul> <script language="JavaScript1.2"> <!-- /** * Get cookie routine by Shelley Powers * (shelley.powers@ne-dev.com) */ function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) // if cookie exists if (offset != -1) { offset += search.length // set index of beginning of value end = document.cookie.indexOf(";", offset); // set index of end of cookie value if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } if (get_cookie(window.location.pathname) != ''){ var openresults=get_cookie(window.location.pathname).split(" ") for (i=0 ; i < openresults.length ; i++){ foldinglist[openresults[i]].style.display='' document.all[foldinglist[openresults[i]].sourceIndex - 1].style.listStyleImage="url(images/open.gif)" } } if (document.all){ var nodelength=foldinglist.length-1 var nodes=new Array(nodelength) var openones='' } function check(){ for (i=0 ; i <= nodelength ; i++){ if (foldinglist[i].style.display=='') openones=openones + " " + i } document.cookie=window.location.pathname+"="+openones } if (document.all) document.body.onunload=check //--> </script>
Menu pionowe
rozwijane po kliknięciu myszką
size: [3.93 KB]
Wstaw w ramach HEAD <SCRIPT LANGUAGE="JavaScript"> <!-- Original: Randy Bennett (rbennett@thezone.net) --> <!-- Web Site: http://home.thezone.net/~rbennett/utility/javahead.htm --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin function buildMenu() { speed=35; topdistance=100; items=6; y=-50; ob=1; if (navigator.appName == "Netscape") { v=".top=",dS="document.",sD=""; } else { v=".pixelTop=",dS="",sD=".style"; } } function scrollItems() { if (ob<items+1) { objectX="object"+ob; y+=10; eval(dS + objectX + sD + v + y); if (y<topdistance) setTimeout("scrollItems()",speed); else y=-50, topdistance+=40, ob+=1, setTimeout("scrollItems()",speed); } } // End --> </SCRIPT> Wstaw w ramach BODY <!-- STEP TWO: Add this onLoad event handler into the BODY tag --> <BODY onLoad="buildMenu(), scrollItems();"> <!-- STEP THREE: Add the following code to the BODY of your HTML page --> <div id="object1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"> <table border=1 width=150 bgcolor=80FFFF> <td><center> <a href="http://yoursite.com/page1.html">Link 1!</a> </center></td> </table> </div> <div id="object2" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"> <table border=1 width=150 bgcolor=80FFFF> <td><center> <a href="http://yoursite.com/page2.html">Link 2!</a> </center></td> </table> </div> <div id="object3" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"> <table border=1 width=150 bgcolor=80FFFF> <td><center> <a href="http://yoursite.com/page3.html">Link 3!</a> </center></td> </table> </div> <div id="object4" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"> <table border=1 width=150 bgcolor=80FFFF> <td><center> <a href="http://yoursite.com/page4.html">Link 4!</a> </center></td> </table> </div> <div id="object5" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"> <table border=1 width=150 bgcolor=80FFFF> <td><center> <a href="http://yoursite.com/page5.html">Link 5!</a> </center></td> </table> </div> <div id="object6" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2"> <table border=1 width=150 bgcolor=80FFFF> <td><center> <a href="http://yoursite.com/page6.html">Link 6!</a> </center></td> </table> </div>
Menu pionowe
odsyłacz do stron
size: [2.68 KB]
Wstaw w ramach HEAD <STYLE>.fly { COLOR: aqua; FONT-FAMILY: arial; FONT-SIZE: 24px; POSITION: absolute; VISIBILITY: hidden; Z-INDEX: 2 } .logo { color: #000080; font-family: times; font-size: 40; left: 30px; position: absolute; top: 0px; visibility: visible; z-index: 1 } .desc { color: #000000; font-family: Arial; font-size: 14px; left: 40px; position: absolute; text-align: center; top: 220px; visibility: hidden; width: 400px; font-weight: bold } BODY { BACKGROUND: #FFFFCC } A:link { COLOR: #000080; TEXT-DECORATION: none } A:visited { COLOR: #000080; TEXT-DECORATION: none } a:hover { color: #FF0000; text-decoration: underline } </STYLE> <SCRIPT language=JavaScript> /* Show an object */ function showObject(object) { object.visibility = VISIBLE; } /* Hide an object */ function hideObject(object) { object.visibility = HIDDEN; } /* Slide the company logo from top to middle */ function slideLogo(from, to) { if (from < to) { company.top = (from += 10); setTimeout('slideLogo(' + from + ',' + to + ')', 75); } else initObjects(); } /* Rotate selected objects */ function rotateObjects() { for (var i = 0; i < pos.length; i++) { pos[i] += inc; objects[i].visibility = 'visible'; objects[i].left = (r * Math.cos(pos[i])) + xoff objects[i].top = (r * Math.sin(pos[i])) + yoff; } rotateTimer = setTimeout("rotateObjects()", 70); } /* Initialize selected objects for rotation */ function initObjects() { /* Here is the array of HTML elements that will be rotated, from fly1 to fly4 Just put the shortcut variables to the HTML elements in this little array and they will be rotated automatically */ objects = new Array(fly1, fly2, fly3, fly4); pos = new Array(); pos[0] = 0; for (var i = 1; i < objects.length; i++) { pos[i] = parseFloat(pos[i - 1] + ((2 * pi) / objects.length)); } rotateObjects(); } /* Variables for rotating objects */ var objects; var pos; var r = 160; // radius var xoff = 180; // x offset var yoff = 170; // y offset var pi = Math.PI; // get pi var inc = pi / 180; // degrees per rotation cycle var objects; // objects to be rotated var pos; // position for objects </SCRIPT> Wstaw w ramach BODY <BODY link=#008000> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" width="563" height="172"> <tr> <td height="172" width="561"> <DIV class=fly id=fly1><A href="http://www.kris7net.cba.pl" onmouseout=hideObject(desc1) onmouseover=showObject(desc1)>Strona 1</A> <BR></DIV> <DIV class=fly id=fly2><A href="http://www.kris7net.cba.pl" onmouseout=hideObject(desc2) onmouseover=showObject(desc2)>strona 2</A> <BR></DIV> <DIV class=fly id=fly3><A href="http://www.kris7net.cba.pl" onmouseout=hideObject(desc3) onmouseover=showObject(desc3)>Strona 3</A> <BR></DIV> <DIV class=fly id=fly4><A href="http://www.kris7net.cba.pl" onmouseout=hideObject(desc4) onmouseover=showObject(desc4)>Strona 4</A> <BR></DIV> <DIV class=logo id=company>Menu strony</DIV> <DIV class=desc id=desc1>Optymalizacja Windows XP </DIV> <DIV class=desc id=desc2>Darmowe sms-y Polska Zagranica </DIV> <DIV class=desc id=desc3>Wyszukiwarka </DIV> <DIV class=desc id=desc4>Zestaw gotowych Java Skryptów </DIV> <SCRIPT language=JavaScript> /* Simple version detection */ var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4); /* They can be used in place of hidden and visible because on occasion Navigator has problems with the two */ var HIDDEN = (isNS) ? 'hide' : 'hidden'; var VISIBLE = (isNS) ? 'show' : 'visible'; /* Create shortcut variables for different absolutely positioned elements */ var fly1 = (isNS) ? document.fly1 : document.all.fly1.style; var fly2 = (isNS) ? document.fly2 : document.all.fly2.style; var fly3 = (isNS) ? document.fly3 : document.all.fly3.style; var fly4 = (isNS) ? document.fly4 : document.all.fly4.style; var company = (isNS) ? document.company : document.all.company.style; var desc1 = (isNS) ? document.desc1 : document.all.desc1.style; var desc2 = (isNS) ? document.desc2 : document.all.desc2.style; var desc3 = (isNS) ? document.desc3 : document.all.desc3.style; var desc4 = (isNS) ? document.desc4 : document.all.desc4.style; /* Begin the sliding of the company logo */ slideLogo(0, 140); </SCRIPT> </td> </tr> </table> </center> </div>
Menu okrągłe
odsyłacz do stron
size: [5.09 KB]
Wstaw w ramach HEAD <script type="text/javascript"> <!-- window.onload=montre; function montre(id) { var d = document.getElementById(id); for (var i = 1; i<=10; i++) { if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';} } if (d) {d.style.display='block';} } //--> </script> <style type="text/css"> <!-- body { background: padding:0; margin:0; font-family: verdana, arial, sans-serif; font-size: 90%; color: black; } dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #menu { position: absolute; top: 1em; left: 1em; width: 10em; } #menu dt { cursor: pointer; background: #A9BFCB; height: 20px; line-height: 20px; margin: 2px 0; border: 1px solid gray; text-align: center; font-weight: bold; } #menu dd { position: absolute; z-index: 100; left: 8em; margin-top: -1.4em; width: 10em; background: #A9BFCB; border: 1px solid gray; } #menu ul { padding: 2px; } #menu li { text-align: center; font-size: 85%; height: 18px; line-height: 18px; } #menu li a, #menu dt a { color: #000; text-decoration: none; display: block; } #menu li a:hover { text-decoration: underline; } #mentions { font-family: verdana, arial, sans-serif; position: absolute; bottom : 200px; left : 10px; color: #000; background-color: #ddd; } #mentions a {text-decoration: none; color: #222; } #mentions a:hover{text-decoration: underline; } --> </style> Wstaw w ramach BODY <!-- Menu --> <dl id="menu"> <dt onmouseover="javascript:montre('smenu1');"><a href="#">Menu 1</a></dt> <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"> <ul> <li><a href="http://www.kris7net.cba.pl">Menu 1.1</a></li> <li><a href="http://www.kris7net.cba.pl">Menu 1.2</a></li> <li><a href="http://www.kris7net.cba.pl">Menu 1.3</a></li> </ul> </dd> <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Menu 2</dt> <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"> <ul> <li><a href="http://www.kris7net.cba.pl">Menu 2.1</a></li> <li><a href="http://www.kris7net.cba.pl">Menu 2.2</a></li> </ul> </dd> <dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Menu 3</dt> <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"> <ul> <li><a href="http://www.kris7net.cba.pl">Menu 3.1</a></li> <li><a href="http://www.kris7net.cba.pl">Menu 3.1</a></li> <li><a href="http://www.kris7net.cba.pl">Menu 3.1</a></li> <li><a href="http://www.kris7net.cba.pl">Menu 3.1</a></li> <li><a href="http://www.kris7net.cba.pl">Menu 3.1</a></li> <li><a href="http://www.kris7net.cba.pl">Menu 3.1</a></li> </ul> </dd> <dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Menu 4</dt> <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"> <ul> <li><a href="http://www.kris7net.cba.pl">Menu 4.1</a></li> <li><a href="http://www.kris7net.cba.pl">Menu 4.1</a></li> </ul> </dd> </dl> <div id="mentions"></div>
Menu pionowe
rozwijane po najechaniu kursorem
size: [3.50 KB]
<script type="text/javascript"> //configure path for left and right arrows var goleftimage='pointer2.gif' var gorightimage='pointer.gif' //configure menu width (in px): var menuwidth=300 //configure menu height (in px): var menuheight=25 //Specify scroll buttons directions ("normal" or "reverse"): var scrolldir="normal" //configure scroll speed (1-10), where larger is faster var scrollspeed=6 //specify menu content var menucontents='<nobr><a href="http://www.kris4u.cba.pl">MENU 1</a> | <a href="http://www.kris4u.cba.pl">MENU 2</a> | <a href="http://www.kris4u.cba.pl">MENU 3</a> | <a href="http://www.kris4u.cba.pl">MENU 4</a> | <a href="http://kris4u.cba.pl">MENU 5</a> | <a href="http://www.kris4u.cba.pl">MENU 6</a> | <a href="http://www.kris4u.cba.pl">MENU 7</a> | <a href="http://www.kris4u.cba.pl">MENU 8</a></nobr>' ////NO NEED TO EDIT BELOW THIS LINE//////////// var iedom=document.all||document.getElementById var leftdircode='onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"' var rightdircode='onMouseover="moveright()" onMouseout="clearTimeout(righttime)"' if (scrolldir=="reverse"){ var tempswap=leftdircode leftdircode=rightdircode rightdircode=tempswap } if (iedom) document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-5000">'+menucontents+'</span>') var actualwidth='' var cross_scroll, ns_scroll var loadedyes=0 function fillup(){ if (iedom){ cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2 cross_scroll.innerHTML=menucontents actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth } else if (document.layers){ ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2 ns_scroll.document.write(menucontents) ns_scroll.document.close() actualwidth=ns_scroll.document.width } loadedyes=1 } window.onload=fillup function moveleft(){ if (loadedyes){ if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){ cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px" } else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth)) ns_scroll.left-=scrollspeed } lefttime=setTimeout("moveleft()",50) } function moveright(){ if (loadedyes){ if (iedom&&parseInt(cross_scroll.style.left)<0) cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px" else if (document.layers&&ns_scroll.left<0) ns_scroll.left+=scrollspeed } righttime=setTimeout("moveright()",50) } if (iedom||document.layers){ with (document){ write('<table border="0" cellspacing="0" cellpadding="2">') write('<td valign="middle"><a href="#" '+leftdircode+'><img src="'+goleftimage+'"border=0></a> </td>') write('<td width="'+menuwidth+'px" valign="top">') if (iedom){ write('<div style="position:relative;width:'+menuwidth+'px;height:'+menuheight+'px;overflow:hidden;">') write('<div id="test2" style="position:absolute;left:0;top:0">') write('</div></div>') } else if (document.layers){ write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">') write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>') } write('</td>') write('<td valign="middle"> <a href="#" '+rightdircode+'>') write('<img src="'+gorightimage+'"border=0></a>') write('</td></table>') } } </script>
Menu poziome
przesuwające się w lewo i prawo
size: [3.90 KB]
Wstaw w ramach HEAD <style type="text/css"> .menulinks {position:relative;} #menucont a{color:#006699; font-weight:bold; text-decoration:none;} #menucont a:hover{color:#ff0000; font-weight:bold; text-decoration:underline overline; text-transform: uppercase;} </style> <SCRIPT LANGUAGE="JavaScript"> nSpace=5 // how many space maximum between each letter nSpeed=100 // the speed of the animation timerLSM=null; function LetterSpacingMenu() { if(document.getElementById){ lnks = Math.floor(Math.random()*lnk.length); letterSpacing = Math.floor(Math.random()*nSpace); lnk[lnks].style.letterSpacing = letterSpacing + "px"; timerLSM = setTimeout("LetterSpacingMenu()", nSpeed); } } function StopMenu() { if(document.getElementById) { clearTimeout(timerLSM); for(i=0;i<lnk.length;i++) lnk[i].style.letterSpacing = 0 + "px"; } } function LSMenuInit() { if(document.getElementById) { lnk = document.getElementById("menucont").getElementsByTagName("a"); cnt = document.getElementById("menucont"); cnt.style.textAlign= "center"; cnt.onmouseover=StopMenu; cnt.onmouseout=LetterSpacingMenu; LetterSpacingMenu(); } } onload=LSMenuInit; <!-- Begin // End --> </script> Wstaw w ramach BODY <div id="menucont"> <!-- Put all links between <center> </center> to get those links align center for older browser --> <a href="#" id="a1" class="menulinks">what's new</a><br> <a href="#" id="a2" class="menulinks">about this site</a><br> <a href="#" id="a3" class="menulinks">scripts</a><br> <a href="#" id="a4" class="menulinks">applets</a><br> <a href="#" id="a5" class="menulinks">links</a><br> <a href="#" id="a6" class="menulinks">recommend this site</a><br> <a href="#" id="a7" class="menulinks">contact us</a> </div>
Menu pionowe, animowane
odsyłacz do stron
size: [2.02 KB]
Wstaw w ramach HEAD <style type="text/css"> #popitmenu{ position: absolute; background-color: white; border:1px solid black; font: normal 12px Verdana; line-height: 18px; z-index: 100; visibility: hidden; } #popitmenu a{ text-decoration: none; padding-left: 6px; color: black; display: block; } #popitmenu a:hover{ /*hover background color*/ background-color: #CCFF9D; } </style> <script type="text/javascript"> /*********************************************** * Pop-it menu- © Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ var defaultMenuWidth="150px" //set default menu width. var linkset=new Array() //SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT linkset[0]='<a href="http://dynamicdrive.com">Dynamic Drive</a>' linkset[0]+='<hr>' //Optional Separator linkset[0]+='<a href="http://www.javascriptkit.com">JavaScript Kit</a>' linkset[0]+='<a href="http://www.codingforums.com">Coding Forums</a>' linkset[0]+='<a href="http://www.cssdrive.com">CSS Drive</a>' linkset[0]+='<a href="http://freewarejava.com">Freewarejava</a>' linkset[1]='<a href="http://msnbc.com">MSNBC</a>' linkset[1]+='<a href="http://cnn.com">CNN</a>' linkset[1]+='<a href="http://news.bbc.co.uk">BBC News</a>' linkset[1]+='<a href="http://www.washingtonpost.com">Washington Post</a>' ////No need to edit beyond here var ie5=document.all && !window.opera var ns6=document.getElementById if (ie5||ns6) document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>') function iecompattest(){ return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body } function showmenu(e, which, optWidth){ if (!document.all&&!document.getElementById) return clearhidemenu() menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu") menuobj.innerHTML=which menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth menuobj.contentwidth=menuobj.offsetWidth menuobj.contentheight=menuobj.offsetHeight eventX=ie5? event.clientX : e.clientX eventY=ie5? event.clientY : e.clientY //Find out how close the mouse is to the corner of the window var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<menuobj.contentwidth) //move the horizontal position of the menu to the left by it's width menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px" else //position the horizontal position of the menu where the mouse was clicked menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px" //same concept with the vertical position if (bottomedge<menuobj.contentheight) menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px" else menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px" menuobj.style.visibility="visible" return false } function contains_ns6(a, b) { //Determines if 1 element in contained in another- by Brainjar.com while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function hidemenu(){ if (window.menuobj) menuobj.style.visibility="hidden" } function dynamichide(e){ if (ie5&&!menuobj.contains(e.toElement)) hidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) hidemenu() } function delayhidemenu(){ delayhide=setTimeout("hidemenu()",500) } function clearhidemenu(){ if (window.delayhide) clearTimeout(delayhide) } if (ie5||ns6) document.onclick=hidemenu </script> Wstaw w ramach BODY <a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Menu Jeden</a><br><br> <a href="#" onMouseover="showmenu(event,linkset[1], '180px')" onMouseout="delayhidemenu()">Menu Dwa</a><br><br> <a href="#" onMouseover="showmenu(event,linkset[1], '180px')" onMouseout="delayhidemenu()">Menu Trzy</a><br><br> <a href="#" onMouseover="showmenu(event,linkset[1], '180px')" onMouseout="delayhidemenu()">Menu Cztery</a>
Menu poziome lub pionowe
rozwijane po najechaniu kursorem
size: [4.71 KB]
<STYLE> #divMenu { FONT-WEIGHT: bold; FONT-SIZE: 12pt; FONT-FAMILY: arial,helvetica } #divMenu A { TEXT-DECORATION: none } #divMenu A:hover { COLOR: red } </STYLE> <SCRIPT language=JavaScript1.2> /******************************************************************************** Submitted with modifications by Jack Routledge (http://fastway.to/compute) to DynamicDrive.com Copyright (C) 1999 Thomas Brattli @ www.bratta.com This script is made by and copyrighted to Thomas Brattli This may be used freely as long as this msg is intact! This script has been featured on http://www.dynamicdrive.com ******************************************************************************** Browsercheck:*/ ie=document.all?1:0 n=document.layers?1:0 //These are the variables you have to set: //How much of the layer do you wan't to be visible when it's in the out state? lshow=60 //How many pixels should it move every step? var move=10; //At what speed (in milliseconds, lower value is more speed) menuSpeed=40 //Do you want it to move with the page if the user scroll the page? var moveOnScroll=true /******************************************************************************** You should't have to change anything below this. ********************************************************************************/ //Defining variables var tim; var ltop; //Object constructor function makeMenu(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.' this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style') this.state=1 this.go=0 this.width=n?this.css.document.width:eval(obj+'.offsetWidth') this.left=b_getleft this.obj = obj + "Object"; eval(this.obj + "=this") } //Get's the top position. function b_getleft(){ var gleft=(n) ? eval(this.css.left):eval(this.css.pixelLeft); return gleft; } /******************************************************************************** Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick) ********************************************************************************/ function moveMenu(){ if(!oMenu.state){ clearTimeout(tim) mIn() }else{ clearTimeout(tim) mOut() } } //Menu in function mIn(){ if(oMenu.left()>-oMenu.width+lshow){ oMenu.go=1 oMenu.css.left=oMenu.left()-move tim=setTimeout("mIn()",menuSpeed) }else{ oMenu.go=0 oMenu.state=1 } } //Menu out function mOut(){ if(oMenu.left()<0){ oMenu.go=1 oMenu.css.left=oMenu.left()+move tim=setTimeout("mOut()",menuSpeed) }else{ oMenu.go=0 oMenu.state=0 } } /******************************************************************************** Checking if the page is scrolled, if it is move the menu after ********************************************************************************/ function checkScrolled(){ if(!oMenu.go) oMenu.css.top=eval(scrolled)+ltop if(n) setTimeout('checkScrolled()',30) } /******************************************************************************** Inits the page, makes the menu object, moves it to the right place, show it ********************************************************************************/ function menuInit(){ oMenu=new makeMenu('divMenu') scrolled=n?"window.pageYOffset":"document.body.scrollTop" oMenu.css.left=-oMenu.width+lshow ltop=(n)?oMenu.css.top:oMenu.css.pixelTop; oMenu.css.visibility='visible' if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled(); } //Initing menu on pageload onload=menuInit; </SCRIPT><!--webbot bot="HTMLMarkup" endspan --> </p> <p align="center"><!--webbot bot="HTMLMarkup" startspan --><DIV id=divMenu style="LEFT: 30px; VISIBILITY: hidden; WIDTH: 500px; POSITION: absolute; TOP: 50px; BACKGROUND-COLOR: #f0f0f0"><NOBR><A href="http://www.scrypty.com/">Scrypty.com</A> - <A href="http://www.javascript.scrypty.com/">JavaScript.scrypty</A> - <A href="http://www.scrypty.com/">Centrum Programowania</A> - <A style="BACKGROUND-COLOR: yellow; TEXT-DECORATION: none" onclick=moveMenu() href="javascript://">MENU</A> </NOBR></DIV> </p>
Menu poziome
wysuwane z boku ekranu po kliknięciu myszką
size: [4.39 KB]
<style> <!-- #wrapper{position:relative; height:30px} #wrapper2{position:absolute} #coffeemenu03{filter:revealTrans(Duration=0.5,Transition=12) visibility:hide} --> </style <TABLE WIDTH=100% BORDER=0 ALIGN="CENTER"> <COL SPAN=3> <TR> <TD WIDTH=35%> </TD> <TD WIDTH=50%> <ilayer id="coffeemenu01" height=35px> <layer id="coffeemenu02" visibility=show> <span id="wrapper"> <span id="wrapper2" onClick="dropit2();event.cancelBubble=true;return false"> <a href="notthisbrowser.html" title="Kliknij, żeby wywołać menu"> <FONT SIZE="+2" COLOR="#6C3800"><B>Menu</B></FONT> </a></span></span></layer></ilayer> <script language="JavaScript1.2"> var enableeffect=true var selection=new Array() selection[0]='<center>Pozycja 1 menu' selection[1]='<div>——————</div>' selection[2]='Pozycja 2 menu' selection[3]='<div>——————</div>' selection[4]='Pozycja 3 menu</center>' if (document.layers) document.coffeemenu01.document.coffeemenu02.visibility='show' function dropit2(){if (document.all){coffeemenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX coffeemenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18 if (coffeemenu03.style.visibility=="hidden"){if (enableeffect) coffeemenu03.filters.revealTrans.apply() coffeemenu03.style.visibility="visible" if (enableeffect) coffeemenu03.filters.revealTrans.play()}else{hidemenu()}}} function dropit(e){if (document.coffeemenu03.visibility=="hide") document.coffeemenu03.visibility="show" else document.coffeemenu03.visibility="hide" document.coffeemenu03.left=e.pageX-e.layerX document.coffeemenu03.top=e.pageY-e.layerY+19 return false} function hidemenu(){if (enableeffect)coffeemenu03.filters.revealTrans.stop() coffeemenu03.style.visibility="hidden"} function hidemenu2(){document.coffeemenu03.visibility="hide"}if (document.layers){document.coffeemenu01.document.coffeemenu02.captureEvents(Event.CLICK) document.coffeemenu01.document.coffeemenu02.onclick=dropit}else if (document.all)document.body.onclick=hidemenu </script> <div id="coffeemenu03" style="position:absolute;left:0;top:0;layer-background-color:#C0C0C0;background-color:#C0C0C0;width:120;visibility:hidden;border:2px solid black;padding:0px"> <script language="JavaScript1.2"> if (document.all)coffeemenu03.style.padding='4px' for (i=0;i<selection.length;i++)document.write(selection[i]) </script></div> <script language="JavaScript1.2"> if (document.layers){document.coffeemenu03.captureEvents(Event.CLICK) document.coffeemenu03.onclick=hidemenu2} </script> </TD> <TD WIDTH=20%> </TD> </TR> </TABLE>
Menu
rozwijane po kliknięciu myszką
size: [2.91 KB]
<DIV ALIGN=""> <script type="text/javascript" language="JavaScript1.2"> var ns6=document.getElementById&&!document.all?1:0 var head="display:''" var folder='' function expandit(curobj){ folder=ns6?curobj.nextSibling.nextSibling.style:document.all[curobj.sourceIndex+1].style if (folder.display=="none") folder.display="" else folder.display="none" } //--> </script> <img src="gify/podglad.gif" alt="" border="#" onmousedown="this.src = 'gify/podglad.gif'" onmouseup="this.src = 'gify/podglad.gif'" onClick="expandit(this)"> <span style="display:none;"> <BR><a href="adres"><img src="gify/zaznacz.gif" border="0" alt="" /></a> <BR><a href="adres"><img src="gify/zaznacz.gif" border="0" alt="" /></a> <BR><a href="adres"><img src="gify/zaznacz.gif" border="0" alt="" /></a> <BR><a href="adres"><img src="gify/zaznacz.gif" border="0" alt="" /></a> <BR><a href="adres"><img src="gify/zaznacz.gif" border="0" alt="" /></a> </span> </DIV>
Menu pionowe graficzne
rozwijane po kliknięciu myszką
size: [1.23 KB]
<p align="center"><!--webbot bot="HTMLMarkup" startspan --><SCRIPT language=JavaScript1.2> /* Static menu script II (By maXimus, maximus@nsimail.com, http://absolutegb.com/maximus/) Modified slightly/ permission granted to Dynamic Drive to feature script in archive For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com */ function move(x) { if (document.all) { object1.style.pixelLeft += x; object1.style.visibility = "visible"} else if (document.layers) { document.object1.left += x; document.object1.visibility = "show"}}; function makeStatic() { if (document.all) {object1.style.pixelTop=document.body.scrollTop+20} else {eval(document.object1.top=eval(window.pageYOffset+20));} setTimeout("makeStatic()",0);} </SCRIPT> <STYLE>.hl { CURSOR: hand; BACKGROUND-COLOR: yellow } .n { CURSOR: hand } </STYLE><!--webbot bot="HTMLMarkup" endspan --> </p> <p align="center"><!--webbot bot="HTMLMarkup" startspan --><LAYER onmouseover=move(132) onmouseout=move(-132) left="0" bgcolor="black" name="object1" top="20" visibility="hide"> <SCRIPT language=JavaScript1.2> function positionmenu(){ move(-132) } if (document.all) {document.write('<DIV ID="object1" style="visibility:hidden;cursor:hand; Position : Absolute ;Left : 0px ;Top : 20px ;Z-Index : 20" onmouseover="move(132)" onmouseout="move(-132)">')} </SCRIPT> <TABLE cellSpacing=1 cellPadding=0 width=150 bgColor=#000000 border=0> <TBODY> <TR> <TD bgColor=#0099ff> <FONT face=Arial size=4><B>Menu</B></FONT></TD> <SCRIPT language=JavaScript1.2> document.write('<td align="center" rowspan="100" width="16" bgcolor="#FF6666"><span style="font-size:13px"><p align="center"><font face="Arial Black">B<br />O<br />C<br />Z<br />N<br />E<br /> <br />M<br />E<br />N<br />U</font></p></span></TD>') </SCRIPT> </TR> <SCRIPT language=JavaScript1.2><!-- if (document.all||document.layers) { makeStatic();} var text=new Array(); var thelink=new Array(); //configure thelinks below. Extend as desired text[0]="Przykład nr1"; text[1]="Przykład nr2"; text[2]="Przykład nr3"; text[3]="Przykład nr4"; text[4]="Przykład nr5"; text[5]="Przykład nr6"; text[6]="Przykład nr7"; text[7]="Przykład nr8"; thelink[0]="#"; thelink[1]="#"; thelink[2]="#"; thelink[3]="#"; thelink[4]="#"; thelink[5]="#"; thelink[6]="#"; thelink[7]="#"; //enter target of above links //Valid values are '', 'new', or 'framename' (where 'framename' is the name of the frame you wish the links to target) var linktarget='' ///DO NOT EDIT BELOW THIS LINE//////////////// function navigateie(which){ if (linktarget=='') window.location=thelink[which] else if (linktarget=='new') window.open(thelink[which]) else{ temp_var=eval("window.parent."+linktarget) temp_var.location=thelink[which] } } for (i=0;i<=text.length-1;i++) if (document.all) {document.write('<TR><TD height=20 bgcolor=white onclick="navigateie('+i+')" onmouseover="className=\'hl\'" onmouseout="className=\'n\'"><FONT SIZE=2 FACE=ARIAL> '+text[i]+'</FONT></TD></TR>')} else {document.write('<TR><TD bgcolor="white"><ILAYER><LAYER HEIGHT="18" onmouseover="this.bgColor=\'yellow\'" onmouseout="this.bgColor=\'white\'" width=131><FONT SIZE=2 FACE=ARIAL> <A HREF="'+thelink[i]+'" target="'+linktarget+'" id="nounderline">'+text[i]+'</A></FONT></LAYER></ILAYER></TD></TR>')} //--> </SCRIPT> <TR> <TD bgColor=#0099ff><FONT face=Arial size=1> </FONT></TD></TR></TBODY></TABLE> <SCRIPT language=JavaScript1.2> if (document.all) {document.write('</DIV>')} window.onload=positionmenu </SCRIPT> <!--webbot bot="HTMLMarkup" endspan --> </p>
Menu pionowe
wysuwane z boku ekranu po najechaniu kursorem
size: [4.91 KB]
<!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) --> <a href="http://www.javascriptkit.com" onMouseover="showit(0)">JavaScript Kit</a> | <a href="http://freewarejava.com" onMouseover="showit(1)">Freewarejava</a><br> <!-- Edit the dimensions of the below, plus background color--> <ilayer width=400 height=32 name="dep1" bgColor="#E6E6FF"> <layer name="dep2" width=400 height=32> </layer> </ilayer> <div id="describe" style="background-color:#E6E6FF;width:400px;height:32px" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div> <script language="JavaScript1.2"> /* Tabs Menu (mouseover)- By Dynamic Drive For full source code and more DHTML scripts, visit http://www.dynamicdrive.com This credit MUST stay intact for use */ var submenu=new Array() //Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors. submenu[0]='<font size="2" face="Verdana"><b><a href="http://www.javascriptkit.com/cutpastejava.shtml">Scripts</a> | <a href="http://www.javascriptkit.com/javaindex.shtml">JS tutorials</a> | <a href="http://www.javascriptkit.com/javatutors/index.shtml">Advanced JS tutorials</a> | <a href="http://www.javascriptkit.com/java/">Applets</a> | <a href="http://www.javascriptkit.com/howto/">Web Tutorials</a></b></font>' submenu[1]='<font size="2" face="Verdana"><b><a href="http://freewarejava.com/applets/index.shtml">Applets</a> | <a href="http://freewarejava.com/tutorials/index.shtml">Tutorials</a> | <a href="http://freewarejava.com/javasites/index.shtml">Sites and Zines</a> | <a href="http://freewarejava.com/jsp/index.shtml">JSP</a></b></font>' //Set delay before submenu disappears after mouse moves out of it (in milliseconds) var delay_hide=500 /////No need to edit beyond here var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : "" function showit(which){ clear_delayhide() thecontent=(which==-1)? "" : submenu[which] if (document.getElementById||document.all) menuobj.innerHTML=thecontent else if (document.layers){ menuobj.document.write(thecontent) menuobj.document.close() } } function resetit(e){ if (document.all&&!menuobj.contains(e.toElement)) delayhide=setTimeout("showit(-1)",delay_hide) else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) delayhide=setTimeout("showit(-1)",delay_hide) } function clear_delayhide(){ if (window.delayhide) clearTimeout(delayhide) } function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } </script>
Menu poziome
rozwijane po najechaniu kursorem
size: [3.02 KB]
Wstaw w ramach HEAD <style type="text/css"> #dropmenudiv{ position:absolute; background-color: #E3FFB0; border:1px solid black; border-bottom-width: 0; font:normal 12px Verdana; line-height:18px; z-index:100; } #dropmenudiv a{ width: 100%; display: block; text-indent: 3px; border-bottom: 1px solid black; padding: 1px 0; text-decoration: none; font-weight: bold; } #dropmenudiv a:hover{ /*hover background color*/ background-color: #C7FF5E; } /* Sample CSS definition for the example list. Remove if desired */ .navlist li { list-style-type: square; width: 135px; background-color: #FFFFB9; } </style> <script type="text/javascript"> /*********************************************** * AnyLink Vertical Menu- © Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ //Contents for menu 1 var menu1=new Array() menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>' menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>' menu1[2]='<a href="http://codingforums.com">Coding Forums</a>' menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>' menu1[4]='<a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>' //Contents for menu 2, and so on var menu2=new Array() menu2[0]='<a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a>' menu2[1]='<a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript tutorials</a>' menu2[2]='<a href="http://news.bbc.co.uk">JavaScript Reference</a>' menu2[4]='<a href="http://www.javascriptkit.com/java/">Java Applets</a>' menu2[3]='<a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a>' menu2[4]='<a href="http://www.javascriptkit.com/howto/">Design Tutorials</a>' var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds) var horizontaloffset=2 //horizontal offset of menu from default location. (0-5 is a good value) /////No further editting needed var ie4=document.all var ns6=document.getElementById&&!document.all if (ie4||ns6) document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') function getposOffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function showhide(obj, e, visible, hidden, menuwidth){ if (ie4||ns6) dropmenuobj.style.left=dropmenuobj.style.top=-500 dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=menuwidth if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") obj.visibility=visible else if (e.type=="click") obj.visibility=hidden } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function clearbrowseredge(obj, whichedge){ var edgeoffset=0 if (whichedge=="rightedge"){ var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth } else{ var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up? edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then) edgeoffset=dropmenuobj.y } } return edgeoffset } function populatemenu(what){ if (ie4||ns6) dropmenuobj.innerHTML=what.join("") } function dropdownmenu(obj, e, menucontents, menuwidth){ if (window.event) event.cancelBubble=true else if (e.stopPropagation) e.stopPropagation() clearhidemenu() dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv populatemenu(menucontents) if (ie4||ns6){ showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth) dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px" } return clickreturnvalue() } function clickreturnvalue(){ if (ie4||ns6) return false else return true } function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function dynamichide(e){ if (ie4&&!dropmenuobj.contains(e.toElement)) delayhidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) delayhidemenu() } function hidemenu(e){ if (typeof dropmenuobj!="undefined"){ if (ie4||ns6) dropmenuobj.style.visibility="hidden" } } function delayhidemenu(){ if (ie4||ns6) delayhide=setTimeout("hidemenu()",disappeardelay) } function clearhidemenu(){ if (typeof delayhide!="undefined") clearTimeout(delayhide) } </script> Wstaw w ramach BODY <a href="default.htm" onMouseover="dropdownmenu(this, event, menu1, '165px')" onMouseout="delayhidemenu()">Webmaster Links</a><br /> <!-- Activate menu onclick instead <a href="default.htm" onClick="return dropdownmenu(this, event, menu1, '165px')" onMouseout="delayhidemenu()">Webmaster Links</a><br /> --> <ul class="navlist"> <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li> <li onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><a href="http://www.javascriptkit.com">JavaScript Kit</a> <span style="position: relative; left: 30px">></span></li> <li><a href="http://www.cssdrive.com">CSS Drive</a></li> <li><a href="http://www.codingforums.com">Coding Forums</a></li> </ul>
Menu pionowe
rozwijane po najechaniu oraz kliknięciu myszką
size: [6.54 KB]
Wstaw w ramach HEAD <script type="text/javascript"> <!-- window.onload=montre; function montre(id) { var d = document.getElementById(id); for (var i = 1; i<=10; i++) { if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';} } if (d) {d.style.display='block';} } //--> </script> <style type="text/css"> <!-- /* CSS issu des tutoriels www.alsacreations.com/articles */ body { margin: 0; padding: 0; background: white; font: 80% verdana, arial, sans-serif; } dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #menu { position: absolute; top: 0; left: 0; z-index:100; width: 100%; } #menu dl { float: left; width: 12em; margin: 0 1px; } #menu dt { cursor: pointer; text-align: center; font-weight: bold; background: #ccc; border: 1px solid gray; } #menu dd { border: 1px solid gray; } #menu li { text-align: center; background: #fff; } #menu li a, #menu dt a { color: #000; text-decoration: none; display: block; height: 100%; border: 0 none; } #menu li a:hover, #menu dt a:hover { background: #eee; } #site { position: absolute; z-index: 1; top : 70px; left : 10px; color: #000; background-color: #ddd; padding: 5px; border: 1px solid gray; } a {text-decoration: none; color: black; color: #222; } --> </style> Wstaw w ramach BODY <div id="menu"> <dl> <dt onmouseover="javascript:montre();"><a href="" title="Retour a l'accueil">Accueil</a></dt> </dl> <dl> <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt> <dd id="smenu1"> <ul> <li><a href="#">Sous-Menu 1.1</a></li> <li><a href="#">Sous-Menu 1.2</a></li> <li><a href="#">Sous-Menu 1.3</a></li> <li><a href="#">Sous-Menu 1.4</a></li> <li><a href="#">Sous-Menu 1.5</a></li> <li><a href="#">Sous-Menu 1.6</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu2');">Menu 2</dt> <dd id="smenu2"> <ul> <li><a href="#">Sous-Menu 2.1</a></li> <li><a href="#">Sous-Menu 2.2</a></li> <li><a href="#">Sous-Menu 2.3</a></li> <li><a href="#">Sous-Menu 2.4</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu3');">Menu 3</dt> <dd id="smenu3"> <ul> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.2</a></li> <li><a href="#">Sous-Menu 3.3</a></li> <li><a href="#">Sous-Menu 3.4</a></li> <li><a href="#">Sous-Menu 3.5</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu4');">Menu 4</dt> <dd id="smenu4"> <ul> <li><a href="#">Sous-Menu 4.1</a></li> <li><a href="#">Sous-Menu 4.2</a></li> <li><a href="#">Sous-Menu 4.3</a></li> </ul> </dd> </dl> </div>
Menu poziome
rozwijane po najechaniu kursorem
size: [3.06 KB]
Wstaw w ramach HEAD <style type="text/css"> #dropmenudiv{ position:absolute; border:1px solid black; border-bottom-width: 0; font:normal 12px Verdana; line-height:18px; z-index:100; } #dropmenudiv a{ width: 100%; display: block; text-indent: 3px; border-bottom: 1px solid black; padding: 1px 0; text-decoration: none; font-weight: bold; } #dropmenudiv a:hover{ /*hover background color*/ background-color: yellow; } </style> <script type="text/javascript"> /*********************************************** * AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ //Contents for menu 1 var menu1=new Array() menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>' menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>' menu1[2]='<a href="http://codingforums.com">Coding Forums</a>' menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>' //Contents for menu 2, and so on var menu2=new Array() menu2[0]='<a href="http://cnn.com">CNN</a>' menu2[1]='<a href="http://msnbc.com">MSNBC</a>' menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>' var menuwidth='165px' //default menu width var menubgcolor='lightyellow' //menu bgcolor var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds) var hidemenu_onclick="yes" //hide menu when user clicks within menu? /////No further editting needed var ie4=document.all var ns6=document.getElementById&&!document.all if (ie4||ns6) document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') function getposOffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function showhide(obj, e, visible, hidden, menuwidth){ if (ie4||ns6) dropmenuobj.style.left=dropmenuobj.style.top="-500px" if (menuwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=menuwidth } if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") obj.visibility=visible else if (e.type=="click") obj.visibility=hidden } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function clearbrowseredge(obj, whichedge){ var edgeoffset=0 if (whichedge=="rightedge"){ var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth } else{ var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up? edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge } } return edgeoffset } function populatemenu(what){ if (ie4||ns6) dropmenuobj.innerHTML=what.join("") } function dropdownmenu(obj, e, menucontents, menuwidth){ if (window.event) event.cancelBubble=true else if (e.stopPropagation) e.stopPropagation() clearhidemenu() dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv populatemenu(menucontents) if (ie4||ns6){ showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth) dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px" } return clickreturnvalue() } function clickreturnvalue(){ if (ie4||ns6) return false else return true } function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function dynamichide(e){ if (ie4&&!dropmenuobj.contains(e.toElement)) delayhidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) delayhidemenu() } function hidemenu(e){ if (typeof dropmenuobj!="undefined"){ if (ie4||ns6) dropmenuobj.style.visibility="hidden" } } function delayhidemenu(){ if (ie4||ns6) delayhide=setTimeout("hidemenu()",disappeardelay) } function clearhidemenu(){ if (typeof delayhide!="undefined") clearTimeout(delayhide) } if (hidemenu_onclick=="yes") document.onclick=hidemenu </script> Wstaw w ramach BODY <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Web Design</a> <a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">News Sites</a> (onclick)
Menu poziome
rozwijane po najechaniu oraz kliknięciu myszką
size: [5.65 KB]
Wstaw w ramach HEAD <style type="text/css" media="screen, tv, projection"> /*<![CDATA[*/ /* page styling, unimportant for the menu. only makes the page looks nicer */ body { font-family: Calibri, "Trebuchet MS", sans-serif; font-size: 100%; } h1 {font-size: 2em;} h2 {font-size: 1.5em;} .example { background: #eee; padding: 50px; } /* - - - ADxMenu: BASIC styles [ MANDATORY ] - - - */ /* remove all list stylings */ .menu, .menu ul { margin: 0; padding: 0; border: 0; list-style-type: none; display: block; } .menu li { margin: 0; padding: 0; border: 0; display: block; float: left; /* move all main list items into one row, by floating them */ position: relative; /* position each LI, thus creating potential IE.win overlap problem */ z-index: 5; /* thus we need to apply explicit z-index here... */ } .menu li:hover { z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */ white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present) see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */ } .menu li li { float: none;/* items of the nested menus are kept on separate lines */ } .menu ul { visibility: hidden; /* initially hide all submenus. */ position: absolute; z-index: 10; left: 0; /* while hidden, always keep them at the top left corner, */ top: 0; /* to avoid scrollbars as much as possible */ } .menu li:hover>ul { visibility: visible; /* display submenu them on hover */ top: 100%; /* 1st level go below their parent item */ } .menu li li:hover>ul { /* 2nd+ levels go on the right side of the parent item */ top: 0; left: 100%; } /* -- float.clear -- force containment of floated LIs inside of UL */ .menu:after, .menu ul:after { content: "."; height: 0; display: block; visibility: hidden; overflow: hidden; clear: both; } .menu, .menu ul { /* IE7 float clear: */ min-height: 0; } /* -- float.clear.END -- */ /* -- sticky.submenu -- it should not disappear when your mouse moves a bit outside the submenu YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly! if you do it, make sure you 110% know what you do */ .menu ul { background-image: url(empty.gif); /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */ padding: 10px 30px 30px 30px; margin: -10px 0 0 -30px; /*background: #f00;*/ /* uncomment this if you want to see the "safe" area. you can also use to adjust the safe area to your requirement */ } .menu ul ul { padding: 30px 30px 30px 10px; margin: -30px 0 0 -10px; } /* -- sticky.submenu.END -- */ /* - - - ADxMenu: DESIGN styles [ OPTIONAL, design your heart out :) ] - - - */ .menu, .menu ul li { color: #eee; background: #234; } .menu ul { width: 11em; } .menu a { text-decoration: none; color: #eee; padding: .4em 1em; display: block; position: relative; } .menu a:hover, .menu li:hover>a { color: #fc3; } .menu li li { /* create borders around each item */ border: 1px solid #ccc; } .menu ul>li + li { /* and remove the top border on all but first item in the list */ border-top: 0; } .menu li li:hover>ul { /* inset 2nd+ submenus, to show off overlapping */ top: 5px; left: 90%; } /* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu placed here to clarify the terminology I use when referencing submenus in posts */ .menu>li:first-child>a, .menu li + li + li li:first-child>a { color: #567; } /* Fix for IE5/Mac \*//*/ .menu a { float: left; } /* End Fix */ /*]]>*/ </style> <!--[if lte IE 6]> <style type="text/css" media="screen, tv, projection"> /*<![CDATA[*/ /* - - - ADxMenu: IE6 BASIC styles [MANDATORY] - - - */ .menu, .menu ul { /* float.clear */ zoom: 1; } .menu li.adxmhover { z-index: 10000; } .menu .adxmhoverUL { /* li:hover>ul selector */ visibility: visible; } .menu .adxmhoverUL { /* 1st-level submenu go below their parent item */ top: 100%; left: 0; } .menu .adxmhoverUL .adxmhoverUL { /* 2nd+ levels go on the right side of the parent item */ top: 0; left: 100%; } /* - - - ADxMenu: DESIGN styles - - - */ .menu ul a { /* fix clickability-area problem */ zoom: 1; } .menu li li { /* fix white gap problem */ float: left; width: 100%; } .menu li li { /* prevent double-line between items */ margin-top: -1px; } .menu a:hover, .menu .adxmhoverA { /* li:hover>a selector */ color: #fc3; } .menu .adxmhoverUL .adxmhoverUL { /* inset 2nd+ submenus, to show off overlapping */ top: 5px; left: 90%; } /*]]>*/ </style> <script type="text/javascript" src="../code/ADxMenu.js"></script> <![endif]--> Wstaw w ramach BODY <body class="adxmenu"> <div class="example"> <ul class="adxm menu"> <li><a href="#">Main menu:</a></li> <li><a href="http://www.aplus.co.yu/" title="My writings">Blog</a> <ul> <li><a href="http://www.aplus.co.yu/">Home</a></li> <li><a href="http://www.aplus.co.yu/feeds/">Feeds</a></li> <li><a href="http://www.aplus.co.yu/archive/">Archive</a></li> </ul> </li> <li><a href="http://www.aplus.co.yu/adxmenu/" title="Nested fly-out menu, standard-compliant">ADxMenu</a> <ul> <li><a href="#">1st submenu</a></li> <li><a href="http://www.aplus.co.yu/adxmenu/">Overview</a></li> <li><a href="http://www.aplus.co.yu/adxmenu/instructions/">Instructions</a></li> <li><a href="http://www.aplus.co.yu/adxmenu/examples/">Examples</a> <ul> <li><a href="#">2nd submenu</a></li> <li><a href="http://www.aplus.co.yu/adxmenu/examples/htb/">Top to bottom</a></li> <li><a href="http://www.aplus.co.yu/adxmenu/examples/hbt/">Bottom to top</a> <ul> <li><a href="#">3rd submenu</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </li> <li><a href="http://www.aplus.co.yu/adxmenu/examples/vlr/">Left to right</a></li> <li><a href="http://www.aplus.co.yu/adxmenu/examples/vrl/">Right to left</a></li> </ul> </li> <li><a href="http://www.aplus.co.yu/adxmenu/trouble/">Troubleshooting</a></li> </ul> </li> <li><a href="http://www.aplus.co.yu/wch/" title="Windowed Controls Hider, for Win IE">WCH</a> <ul> <li><a href="http://www.aplus.co.yu/wch/">Overview</a></li> <li><a href="http://www.aplus.co.yu/wch/instructions/">Instructions</a></li> <li><a href="http://www.aplus.co.yu/wch/examples/">Examples</a></li> <li><a href="http://www.aplus.co.yu/wch/trouble/">Troubleshooting</a></li> </ul> </li> <li><a href="http://www.aplus.co.yu/lab/" title="Reusable web techniques">Lab</a> <ul> <li><a href="http://www.aplus.co.yu/css/z-pos">z-index tutorial</a></li> <li><a href="http://www.aplus.co.yu/css/forms/">Styling forms</a></li> <li><a href="http://www.aplus.co.yu/css/cfl/">Centered frame layout</a></li> <li><a href="http://www.aplus.co.yu/css/tabs2/">Tabs with variable height</a></li> <li><a href="http://www.aplus.co.yu/css/nestedtabs2/">2-level navigation</a></li> <li><a href="http://www.aplus.co.yu/css/ow/">Tabs: Overlapping Windows</a></li> <li><a href="http://www.aplus.co.yu/scripts/windowopen/">Unobtrusive window.open</a></li> <li><a href="http://www.aplus.co.yu/scripts/fif/">Floating iFrame</a></li> </ul> </li> <li><a href="http://www.aplus.co.yu/deliver/" title="Various sites I (co-)did">Delivered</a> <ul> <li><a href="http://www.aplus.co.yu/deliver/sites/">Sites & proof of concepts</a></li> <li><a href="http://www.aplus.co.yu/deliver/wp/">WordPress goodies</a></li> </ul> </li> <li><a href="http://www.aplus.co.yu/about/" title="Relevant info about me">Colophon</a></li> <li><a href="http://www.aplus.co.yu/about/contact/">Contact me</a></li> </ul> </div>
Menu poziome
rozwijane po najechaniu kursorem
size: [8.06 KB]
Wstaw w ramach HEAD <style> body { font-family:arial; } a { color:black; text-decoration:none; font:bold } a:hover { color:black; text-decoration:underline; } } td.menu { background:lightblue } td.menu:hover {background-Color="FF9933" } table.navigatie { background:black; position:relative; font:bold 80%; top:-119px; left:0px; } </style> <script> var pos = -119; var timer1 = 0; var timer2 = 0;; var stap = 3; function toonMenu1() { // stop functie verberg en start functie toon clearInterval(timer1) timer2 = setInterval("toon1()",10) } // einde toonMenu function verbergMenu1() { // stop functie toon en start functie verberg clearInterval(timer2) timer1 = setInterval("verberg1()",10) } //einde verbergMenu function toon1(){ if (pos < -12) { pos = pos + stap document.getElementById('mijnMenu1').style.top = pos } // einde if } // einde toon function verberg1(){ if (pos > -119) { pos = pos -stap document.getElementById('mijnMenu1').style.top = pos } // einde if } // einde verberg var pos2 = -119; var timer3 = 0; var timer4 = 0;; var stap = 3; function toonMenu2() { // stop functie verberg en start functie toon clearInterval(timer3) timer4 = setInterval("toon2()",10) } // einde toonMenu function verbergMenu2() { // stop functie toon en start functie verberg clearInterval(timer4) timer3 = setInterval("verberg2()",10) } //einde verbergMenu function toon2(){ if (pos2 < -12) { pos2 = pos2 + stap document.getElementById('mijnMenu2').style.top = pos2 } // einde if } // einde toon function verberg2(){ if (pos2 > -119) { pos2 = pos2 -stap document.getElementById('mijnMenu2').style.top = pos2 } // einde if } // einde verberg var pos3 = -119; var timer5 = 0; var timer6 = 0;; var stap = 3; function toonMenu3() { // stop functie verberg en start functie toon clearInterval(timer5) timer6 = setInterval("toon3()",10) } // einde toonMenu function verbergMenu3() { // stop functie toon en start functie verberg clearInterval(timer6) timer5 = setInterval("verberg3()",10) } //einde verbergMenu function toon3(){ if (pos3 < -12) { pos3 = pos3 + stap document.getElementById('mijnMenu3').style.top = pos3 } // einde if } // einde toon function verberg3(){ if (pos3 > -119) { pos3 = pos3 -stap document.getElementById('mijnMenu3').style.top = pos3 } // einde if } // einde verberg </script> Wstaw w ramach BODY <table border="0" width="1057" height="85"> <tr> <td height="112" width="152"> <table style="width: 152px; height: 122px;" id="mijnmenu1" class="navigatie" onMouseOver="toonMenu1()" onMouseOut="verbergMenu1()"> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item1</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item2</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item3</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item4</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item5</a></td> </tr> <tr> <td class="menu" style="background-color: #004466" height="18"> <font color="#FFFFFF">menu1</font></td> </tr> </table> </td> <td height="112" width="152"> <table style="width: 152px; height: 122px;" id="mijnmenu2" class="navigatie" onMouseOver="toonMenu2()" onMouseOut="verbergMenu2()"> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item1</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item2</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item3</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item4</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item5</a></td> </tr> <tr> <td class="menu" style="background-color: #004466" height="18"> <font color="#FFFFFF">menu2</font></td> </tr> </table> </td> <td height="112" width="152"> <table style="width: 152px; height: 122px;" id="mijnmenu3" class="navigatie" onMouseOver="toonMenu3()" onMouseOut="verbergMenu3()"> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item1</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item2</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item3</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item4</a></td> </tr> <tr> <td class="menu" style="background-color: #FFFFFF"> <a href="http://alexj.to.md/">menu item5</a></td> </tr> <tr> <td class="menu" style="background-color: #004466" height="18"> <font color="#FFFFFF">menu3</font></td> </tr> </table> </td> <td height="112" width="583"></td> </tr> </table>
Menu poziome
rozwijane z góry ekranu po najechaniu kursorem
size: [5.59 KB]
Wstaw w ramach HEAD <script type="text/javascript"> // made by Eddie Traversa copyright 2004 // http://www.dhtmlnirvana.com/ // free to use as long as this copyright notice stays intact. var timer1=null; // needed for xhtml dtds px = (document.getElementById) ? "px" : ""; // use the offset variable to refine the pointers end position // setting it to 0 sees the pointer end at left position of element // so if we need to adjust it so that the pointer centers over text etc.. // then this is the variable to use; var offset = 15; // Controls the speed of the animation var timerspeed = 25; // controls the number of step from point a to point b. higher numbers see a decrease in speed var steps = 20; // controls the deceleration // dont recommend changing this var as this number seems to work well across all browsers var decrease = 0.09; // gets the current position of the link; function getPosition(id) { if (document.getElementById) { endPos = document.getElementById(id).offsetLeft; } else if (document.layers) { endPos = document.layers[id].left; } } // shoves the pointer around the screen based on what current link is activated // to make a vertical one just change offsetLeft to offsetTop // and change any references to .left to .top // see my home page for an example // http://www.dhtmlnirvana.com/ function glideMenu(obj) { if (document.getElementById) { el = document.getElementById(obj).style ; } if (document.layers) { el = document.layers[obj] ; } el.xpos = parseInt(el.left); if (el.xpos < endPos) { clearTimeout(timer1); } else if (el.xpos >= endPos) { clearTimeout(timer1); } distance = endPos - el.xpos + offset; steps = distance*decrease; el.xpos += steps; el.left = el.xpos+px ; timer1= setTimeout("glideMenu('" + obj + "')",timerspeed); } // refresh the page on a window resize so ns4 doesnt screw the layers up window.onresize = function () { history.go(0); } </script> <style type="text/css"> <!-- body { background-color: #5D5765; } img { border: 0px; } .maintext { font-family: "Courier New", Courier, mono; font-size: 18px; color: #FFCC99; } a:link { font-family: "Courier New", Courier, mono; font-size: 14px; color: #FFFFFF; } a:visited { font-family: "Courier New", Courier, mono; font-size: 14px; color: #FFCC66; } --> </style> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> Wstaw w ramach BODY <!-- we need to wrap links in a div tag for ns4 & ns7, moz --> <div id="link1" style="position:absolute; top:44px; left:162px; z-index: 3;"> <a href="#" onmouseover="getPosition('link1');glideMenu('pointer')"> <img src="button1.gif" width="95" height="25" border="0" /></a> </div> <div id="link2" style="position:absolute; top:44px; left:256px; z-index: 3;"> <a href="#" onmouseover="getPosition('link2');glideMenu('pointer')"><img src="button2.gif" width="95" height="25" border="0" /></a> </div> <div id="link3" style="position:absolute; top:44px; left:351px; z-index: 3;"><a href="#" onmouseover="getPosition('link3');glideMenu('pointer')"> <img src="button3.gif" width="95" height="25" border="0" /> </a></div> <div id="link4" style="position:absolute; top:44px; left:446px; z-index: 3;"><a href="#" onmouseover="getPosition('link4');glideMenu('pointer')"> <img src="button4.gif" width="95" height="25" border="0" /> </a></div> <div id="link5" style="position:absolute; top:44px; left:541px; z-index: 3;"><a href="#" onmouseover="getPosition('link5');glideMenu('pointer')"> <img src="button4.gif" width="95" height="25" border="0" /> </a></div> <div id="pointer" style="position:absolute; left:164px; top:27px; width:130px; height:30px; z-index: 2;"> <img src="pointer_animated.gif" alt="" width="81" height="61" border="0" /> </div> <div id="barLYR" style="position:absolute; width:1000px; height:60px; z-index:1; background-image: url(bar.gif); layer-background-image: url(bar.gif); border: 1px none #000000; left: 0px; top: 25px;"></div>
Menu poziome
odsyłacz do stron z ruchomym tłem pod przyciskiem
size: [3.93 KB]
Wstaw całość w ramach HEAD <script language="javascript"> var interval = 0; function Menu(lpos, rpos, value, ref, width, height, visibility) { this.id = lpos + rpos; this.lpos = lpos; this.rpos = rpos; this.value = value this.ref = ref; this.width = width; this.height = height; this.left = 0; this.top = 0; this.visibility = visibility; this.level = lpos.length; } aMenu = new Array(); //constructor //menu = new Menu('key1', 'key2', 'value', 'target', 'length', 'height', 'visibility: 1=visible; 0=hidden') //Parent menu must be declared visible - 1 //menu - level 0 aMenu[0] = new Menu('0', '0', 'Menu 1', 'index.htm', 130, 20, 1); aMenu[1] = new Menu('0', '1', 'Menu 2 >>', '#', 130, 20, 1); aMenu[2] = new Menu('0', '2', 'Menu 3', '#', 130, 20, 1); aMenu[3] = new Menu('0', '3', 'Menu 4', '#', 130, 20, 1); //submenu1 - level 1 aMenu[4] = new Menu('01', '0', '01-0', '#', 130, 20, 0); aMenu[5] = new Menu('01', '1', '01-1 >>', '#', 130, 20, 0); //submenu2 - level 2 aMenu[6] = new Menu('011', '0', '011-0', '#', 130, 20, 0); aMenu[7] = new Menu('011', '1', '011-1 >>', '#', 130, 20, 0); aMenu[8] = new Menu('011', '2', '011-2', '#', 130, 20, 0); //submenu3 - level 3 aMenu[9] = new Menu('0111', '0', '0111-0', '#', 130, 20, 0); aMenu[10] = new Menu('0111', '1', '0111-1 >>', '#', 130, 20, 0); //submenu4 - level 4 aMenu[11] = new Menu('01111', '0', '01111-0', '#', 130, 20, 0); aMenu[12] = new Menu('01111', '1', '01111-1', '#', 130, 20, 0); aMenu[13] = new Menu('01111', '2', '01111-2', '#', 130, 20, 0); function hideAll(Object) { for (var i = 1; i < aMenu.length; i++) { if (aMenu[i].lpos != '0') document.getElementById(aMenu[i].id).style.visibility = 'hidden'; } } function showMenus(Object) { for (var i = 0; i < aMenu.length; i++) { if (aMenu[i].id == Object.id) // find menu { for (var j = i; j < aMenu.length; j ++) { if (aMenu[j].lpos == aMenu[i].id) // find submenu { document.getElementById(aMenu[j].id).style.visibility = 'visible'; } else // hide rest { if ((aMenu[j].lpos != '0') && (aMenu[j].level >= aMenu[i].level + 1)) { document.getElementById(aMenu[j].id).style.visibility = 'hidden'; } } } } } } function finterval() { interval = setInterval('hideAll(Object)', 500); } function shadowMenu(Object) { for (var i = 0; i < aMenu.length; i++) { if (aMenu[i].id == Object.id) document.getElementById(aMenu[i].id).style.background = '#00CCFF'; } clearInterval(interval); } function unshadowMenu(Object) { for (var i = 0; i < aMenu.length; i++) { if (aMenu[i].id == Object.id) document.getElementById(aMenu[i].id).style.background = '#CCCCCC'; } finterval(); } function writeMenu(Menu) { this.background_color = 'background-color: #CCCCCC;'; this.margin_bottom = 'margin-bottom: 1px;'; this.border_width = 'border-width: thin;'; this.border_style = 'border-style: groove;'; this.color = 'color: #0000FF;'; this.vwidth = 'width:' + Menu.width.toString() + 'px;'; this.vheight = 'height:' + Menu.height.toString() + 'px;'; this.font_family = 'font-family:Verdana, Arial, Helvetica, sans-serif;'; this.font_size = 'font-size:11px;'; this.font_weight = 'font-weight:bold;'; this.text_decoration = 'text-decoration:none;'; this.text_align = 'text-align:left;'; this.text_indent = 'text-indent: 10px;'; this.text_shadow = 'text-shadow:Maroon;'; this.vleft = 'left: ' + Menu.left.toString() + 'px;'; this.vtop = 'top: ' + Menu.top.toString() + 'px;'; if (Menu.visibility == 0) this.vvisibility = 'visibility: hidden;'; else this.vvisibility = 'visibility: visible;'; this.strMenu = '<A ' + 'HREF="' + Menu.ref + '"' + 'TARGET="_self"' + 'ID="' + Menu.id + '"' + 'VALUE="' + Menu.value + '"' + 'onClick="hideAll(this)"' + 'onMouseOver="showMenus(this); shadowMenu(this)"' + 'onMouseLeave="unshadowMenu(this)"' + 'style="' + this.background_color + this.margin_bottom + this.border_width + this.border_style + this.color + this.vwidth + this.vheight + this.font_family + this.font_size + this.font_weight + this.text_decoration + this.text_align + this.text_indent + this.vvisibility + this.vleft + this.vtop + 'position: absolute;' + this.text_shadow + '">' + Menu.value + '</A>'; document.write(this.strMenu); } function genMenu(aMenu) { aMenu[0].left = 15; // left position aMenu[0].top = 100; // top position writeMenu(aMenu[0]); for (var i = 1; i < aMenu.length; i++) { if (aMenu[i].lpos == aMenu[i - 1].lpos) // same menu { aMenu[i].left = aMenu[i - 1].left; aMenu[i].top = aMenu[i - 1].top + aMenu[i - 1].height; writeMenu(aMenu[i]); } for (var k = 0; k < i; k++) { if ((aMenu[i].lpos == (aMenu[k].lpos + aMenu[k].rpos)) && (aMenu[i].lpos != aMenu[i - 1].lpos)) // find submenu { aMenu[i].left = aMenu[k].left + aMenu[k].width; aMenu[i].top = aMenu[k].top; writeMenu(aMenu[i]); } } } } genMenu(aMenu); </script>
Menu pionowe
rozwijane po najechaniu kursorem
size: [5.23 KB]
Wstaw w ramach HEAD <link rel="stylesheet" type="text/css" href="AnyLink/anylink.css" /> <script type="text/javascript" src="AnyLink_menu/anylink.js"> </script> Wstaw w ramach BODY <!--1st anchor link and menu --> <a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">Anchor Link</a> <div id="anylinkmenu1" class="anylinkcss"> <a href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a href="http://www.cssdrive.com">CSS Drive</a> <a href="http://www.javascriptkit.com">JavaScript Kit</a> <a href="http://www.codingforums.com">Coding Forums</a> <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a> </div> <!--2nd anchor link and menu --> <a href="http://www.dynamicdrive.com" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu2')">Anchor Link 2</a> <div id="anylinkmenu2" class="anylinkcss" style="width: 150px; background-color: lightyellow"> <a href="http://www.cnn.com/">CNN</a> <a href="http://www.msnbc.com">MSNBC</a> <a href="http://www.google.com">Google</a> <a href="http://news.bbc.co.uk">BBC News</a> </div>
Menu poziome
rozwijane po najechaniu kursorem
size: [5.54 KB]
Wstaw w ramach HEAD <link rel="stylesheet" type="text/css" href="sddm.css" > Wstaw w ramach BODY <div class="navbar" style="float:right;"> <input id="" type="checkbox" checked="true" onclick="autoClose = this.checked; " />Auto Close <br><input id="" type="checkbox" checked="true" value="true" onclick="doFading = this.checked; if(!this.checked) {ResetOpacity(100);} else {CloseAllMenus();ResetOpacity(0);} " />Menu Fade <!-- *********************************Start Menu****************************** --> <div class="mainDiv" > <div class="topItem" >Demo Menu 1</div> <div class="dropMenu" ><!-- --> <div class="subMenu" style="display:inline;"> <div class="subItem"><a href="#">Configuration</a></div> <div class="subItem"><a href="#">Tool Box</a></div> <div class="subItem"><a href="#">Contact Us</a></div> <div class="subItem"><a href="#">Sub Menu 4</a></div> <div class="subItem"><a href="#">Sub Menu 5</a></div> </div> </div> </div> <!-- *********************************End Menu****************************** --> <br> <!-- *********************************Start Menu****************************** --> <div class="mainDiv" > <div class="topItem" >Demo Menu 2</div> <div class="dropMenu" ><!-- --> <div class="subMenu" style="display:none;"> <div class="subItem"><a href="#">Configuration</a></div> <div class="subItem"><a href="#">Sub Menu 2</a></div> <div class="subItem"><a href="#">Sub Menu 3</a></div> <div class="subItem"><a href="#">Sub Menu 4</a></div> </div> </div> </div> <!-- *********************************End Menu****************************** --> <script type="text/javascript" src="xpmenuv24.js"></script> </div>
Menu pionowe Windows XP
rozwijane po kliknięciu myszką
size: [34.22 KB]
Wstaw wszystko w ramach BODY <script language="JavaScript" src="color/menu.js"></script> <table border="0" cellspacing="0" cellpadding="0" width="750"><tr valign="top"> <td width="240"></td> <td width="10"> </td> <td width="125"> <div style="position:relative"> <script language="JavaScript"> <!-- var menu1 = new MENU("top"); menu1.floatMenu = false; menu1.mainArrows = false; menu1.mainBGColor = "#D08080"; menu1.mainBorderWidth = 1; menu1.mainItemWidth = 115; menu1.mainItemFontSize = 12; menu1.mainItem3D = 0; menu1.mainItemColor = "#FFA0A0"; menu1.mainItemFontColor = "black"; menu1.mainItemHilight = "#FF8080"; menu1.subBGColor = "#D08080"; menu1.subItemWidth = 115; menu1.subItemColor = "#FFA0A0"; menu1.subItemHilight = "#FF8080"; menu1.entry(1, 20, "Main Item 1"); menu1.entry(2, 20, "Sub Item 1.1"); menu1.entry(2, 20, "Sub Item 1.2"); menu1.entry(2, 20, "Sub Item 1.3"); menu1.create(); //--> </script> </div> </td> <td width="125"> <div style="position:relative"> <script language="JavaScript"> <!-- var menu2 = new MENU("top"); menu2.floatMenu = false; menu2.mainArrows = false; menu2.mainBGColor = "#60B060"; menu2.mainBorderWidth = 1; menu2.mainItemWidth = 115; menu2.mainItemFontSize = 12; menu2.mainItem3D = 0; menu2.mainItemColor = "#A0D0A0"; menu2.mainItemFontColor = "black"; menu2.mainItemHilight = "#80D080"; menu2.subBGColor = "#60B060"; menu2.subItemWidth = 115; menu2.subItemColor = "#A0D0A0"; menu2.subItemHilight = "#80D080"; menu2.entry(1, 20, "Main Item 2"); menu2.entry(2, 20, "Sub Item 2.1"); menu2.entry(2, 20, "Sub Item 2.2"); menu2.entry(2, 20, "Sub Item 2.3"); menu2.create(); //--> </script> </div> </td> <td width="125"> <div style="position:relative"> <script language="JavaScript"> <!-- var menu3 = new MENU("top"); menu3.floatMenu = false; menu3.mainArrows = false; menu3.mainBGColor = "#80A0D0"; menu3.mainBorderWidth = 1; menu3.mainItemWidth = 115; menu3.mainItemFontSize = 12; menu3.mainItem3D = 0; menu3.mainItemColor = "#A0C0FF"; menu3.mainItemFontColor = "black"; menu3.mainItemHilight = "#90B0FF"; menu3.subBGColor = "#80A0D0"; menu3.subItemWidth = 115; menu3.subItemColor = "#A0C0FF"; menu3.subItemHilight = "#90B0FF"; menu3.entry(1, 20, "Main Item 3"); menu3.entry(2, 20, "Sub Item 3.1"); menu3.entry(2, 20, "Sub Item 3.2"); menu3.entry(2, 20, "Sub Item 3.3"); menu3.create(); //--> </script> </div> </td> <td width="125"> <div style="position:relative"> <script language="JavaScript"> <!-- var menu4 = new MENU("top"); menu4.floatMenu = false; menu4.mainArrows = false; menu4.mainBGColor = "#C0C080"; menu4.mainBorderWidth = 1; menu4.mainItemWidth = 115; menu4.mainItemFontSize = 12; menu4.mainItem3D = 0; menu4.mainItemColor = "#E0E0A0"; menu4.mainItemFontColor = "black"; menu4.mainItemHilight = "#D0D080"; menu4.subBGColor = "#C0C080"; menu4.subItemWidth = 115; menu4.subItemColor = "#E0E0A0"; menu4.subItemHilight = "#D0D080"; menu4.entry(1, 20, "Main Item 4"); menu4.entry(2, 20, "Sub Item 4.1"); menu4.entry(2, 20, "Sub Item 4.2"); menu4.entry(2, 20, "Sub Item 4.3"); menu4.create(); //--> </script> </div> </td> </tr></table>
Menu poziome
rozwijane po najechaniu kursorem
size: [29.31 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <style type="text/css"> /* --[[ Main Expand Icons ]]-- */ #imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(stub_arrow_down.gif); width:8px; height:6px; left:-11px; top:5px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(stub_arrow_down.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Sub Expand Icons ]]-- */ #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(stub_arrow_right.gif); width:6px; height:8px; left:-6px; top:3px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(stub_arrow_right.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {background-color:#ffffff; border-style:none; border-color:#6a6a6a; border-width:1px; padding:0px; margin:0px; } /* --[[ Sub Container ]]-- */ #imenus0 li ul {background-color:#dcedcd; border-style:solid; border-color:#687a54; border-width:1px; padding:5px 8px 5px 5px; margin:0px; } /* --[[ Main Items ]]-- */ #imenus0 li a, #imenus0 .imctitle {height:16px; background-color:#dcedcd; color:#2c4026; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; text-decoration:none; border-style:solid; border-color:#687a54; border-width:1px; padding:3px 8px 1px; margin:0px 5px 0px 0px; } /* [hover] - These settings must be duplicated for IE compatibility.*/ #imenus0 li:hover>a {background-color:#c2e0a9; text-decoration:none; } #imenus0 li a.ihover, .imde imenus0 a:hover {background-color:#c2e0a9; text-decoration:none; } /* [active] */ #imenus0 li a.iactive {} /* --[[ Sub Items ]]-- */ #imenus0 ul a, #imenus0 .imsubc li .imctitle {height:auto; background-color:transparent; color:#2c4026; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:solid; border-color:#dcedcd; border-width:1px 0px; padding:2px 5px; margin:0px; } /* [hover] - These settings must be duplicated for IE comptatibility.*/ #imenus0 ul li:hover>a {background-color:#c2e0a9; text-decoration:none; border-color:#687a54; } #imenus0 ul li a.ihover {background-color:#c2e0a9; text-decoration:none; border-color:#687a54; } /* [active] */ #imenus0 ul li a.iactive {} </style><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:580px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:145px;"><a class="" href="#"><span class="imea imeam"><span></span></span>Who We Are</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-1px;left:0px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Mission & Goals</a></li> <li><a href="#">History</a></li> <li><a href="#">Management</a></li> <li><a href="#">Working at Tyco</a></li> <li><a href="#">Press Center</a></li> <li><a href="#"><span class="imea imeas"><span></span></span>Worldwide</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-20px;left:133px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Europe</a></li> <li><a href="#">Asia</a></li> <li><a href="#">US & Canada</a></li> <li><a href="#">Mexico</a></li> <li><a href="#">Australia</a></li> <li><a href="#">Middle East</a></li> </ul></div></div></li> <li><a href="#"><span class="imea imeas"><span></span></span>Board of Directors</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-20px;left:133px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li><a href="#">Customers</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Commitment</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-1px;left:0px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">People & Values</a></li> <li><a href="#">Governance</a></li> <li><a href="#">Community</a></li> <li><a href="#">Environmental</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Business</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-1px;left:0px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-1px;left:0px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> </ul></div></div></li> </ul><div class="imclear"> </div></div></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Shift/ocscript.js" type="text/javascript"></script>
Menu poziome
rozwijane po najechaniu kursorem
size: [3.93 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <style type="text/css"> /* --[[ Main Expand Icons ]]-- */ #imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(sample14_main_expand_default.gif); width:13px; height:9px; left:-13px; top:2px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(sample14_main_expand_on.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Sub Expand Icons ]]-- */ #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(sample14_sub_expand_default.gif); width:4px; height:7px; left:-4px; top:3px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(sample14_sub_expand_on.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {background-color:#555555; background-image:url(sample14_main_bg.gif); border-style:double; border-color:#6a6a6a; border-width:1px; } /* --[[ Sub Container ]]-- */ #imenus0 li ul {background-color:#c0c0c0; border-style:solid; border-color:#333333; border-width:1px; padding:1px; margin:4px 0px 0px; } /* --[[ Main Items ]]-- */ #imenus0 li a, #imenus0 .imctitle {color:#fffff0; text-align:left; font-family:Verdana; font-size:11px; font-weight:bold; text-decoration:none; border-style:outset; border-color:#ffffcc; border-width:1px 2px 2px 1px; padding:4px 9px 4px 4px; } /* [hover] - These settings must be duplicated for IE compatibility.*/ #imenus0 li:hover>a {background-color:#000000; color:#ffffcc; } #imenus0 li a.ihover, .imde imenus0 a:hover {background-color:#000000; color:#ffffcc; } /* [active] */ #imenus0 li a.iactive {} /* --[[ Sub Items ]]-- */ #imenus0 ul a, #imenus0 .imsubc li .imctitle {background-color:#000000; color:#cccccc; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; } /* [hover] - These settings must be duplicated for IE comptatibility.*/ #imenus0 ul li:hover>a {background-color:#555555; color:#ffffff; } #imenus0 ul li a.ihover {background-color:#555555; color:#ffffff; } /* [active] */ #imenus0 ul li a.iactive {text-decoration:underline; } </style><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:140px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:100%;"><a class="" href="#"><span class="imea imeam"><span></span></span>About</a> <div class="imsc"><div class="imsubc" style="width:186px;top:-29px;left:136px;"><ul style=""> <li><a href="#">Corporate Description</a></li> <li><a href="#">History</a></li> <li><a href="#">Diversity / Inclusion</a></li> <li><a href="#">Vision Framework</a></li> <li><a href="#">Marketing Resource Center</a></li> <li><a href="#">Partnerships</a></li> <li><a href="#">Executive Biographies</a></li> <li><a href="#">Office Locations</a></li> </ul></div></div></li> <li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>What's New</a> <div class="imsc"><div class="imsubc" style="width:166px;top:-28px;left:135px;"><ul style=""> <li><a href="#">General</a></li> <li><a href="#">Publications and Presentations</a></li> <li><a href="#">Future Events Calendar</a></li> </ul></div></div></li> <li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Industries</a> <div class="imsc"><div class="imsubc" style="width:155px;top:-28px;left:135px;"><ul style=""> <li><a href="#"><span class="imea imeas"><span></span></span>Government</a> <div class="imsc"><div class="imsubc" style="width:137px;top:-23px;left:153px;"><ul style="border-color:#c0d8f5;border-width:1px;padding:0px;"> <li><a href="#">Energy</a></li> <li><a href="#">Defense</a></li> <li><a href="#">Homeland Security</a></li> <li><a href="#">State</a></li> </ul></div></div></li> <li><a href="#"><span class="imea imeas"><span></span></span>Industrial</a> <div class="imsc"><div class="imsubc" style="width:150px;top:-21px;left:153px;"><ul style="border-width:0px;padding:1px;"> <li><a href="#">Commercial & Institutional</a></li> <li><a href="#">Life Science</a></li> <li><a href="#">Manufacturing</a></li> <li><a href="#">Microelectronics</a></li> <li><a href="#">Mining</a></li> </ul></div></div></li> <li><a href="#"><span class="imea imeas"><span></span></span>Infastructure</a> <div class="imsc"><div class="imsubc" style="width:132px;top:-22px;left:153px;"><ul style="border-width:0px;padding:1px;"> <li><a href="#">Transportation</a></li> <li><a href="#">Telecommunications</a></li> <li><a href="#">Alternative Power</a></li> <li><a href="#">Water Resources</a></li> </ul></div></div></li> <li><a href="#"><span class="imea imeas"><span></span></span>Oil, Gas & Power</a> <div class="imsc"><div class="imsubc" style="width:186px;top:-23px;left:153px;"><ul style="border-width:0px;"> <li><a href="#">Chemicals and Petrochemicals</a></li> <li><a href="#">Gas Processing and LNG</a></li> <li><a href="#">Gas to Liquids (gtc)</a></li> <li><a href="#">Gasification and IGCC</a></li> <li><a href="#">Heavy Oil Upgrading and Oil Sands</a></li> </ul></div></div></li> <li><a href="#">Global Services</a></li> </ul></div></div></li> <li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Projects</a> <div class="imsc"><div class="imsubc" style="width:145px;top:-28px;left:135px;"><ul style=""> <li><a href="#">Oil and gas Power</a></li> <li><a href="#">Government</a></li> <li><a href="#">Industrial</a></li> <li><a href="#">Infastructure</a></li> <li><a href="#">Global Services</a></li> </ul></div></div></li> <li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Careers</a> <div class="imsc"><div class="imsubc" style="width:145px;top:-28px;left:135px;"><ul style=""> <li><a href="#">Welcome</a></li> <li><a href="#">Vision Framework</a></li> <li><a href="#">Employment</a></li> <li><a href="#">College Recruitment</a></li> <li><a href="#">Benefits</a></li> </ul></div></div></li> <li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a> <div class="imsc"><div class="imsubc" style="width:155px;top:-28px;left:135px;"><ul style=""> <li><a href="#">Company at-a-glance</a></li> <li><a href="#">Stock Information</a></li> <li><a href="#">Corporate News</a></li> <li><a href="#">Corporate Governance</a></li> </ul></div></div></li> <li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Communities</a> <div class="imsc"><div class="imsubc" style="width:190px;top:-28px;left:135px;"><ul style=""> <li><a href="#">About Community Relations</a></li> <li><a href="#">Contributions Program</a></li> <li><a href="#">Educational Outreach</a></li> <li><a href="#">Employee Giving</a></li> <li><a href="#">Reports</a></li> </ul></div></div></li> <li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Media</a> <div class="imsc"><div class="imsubc" style="width:154px;top:-28px;left:135px;"><ul style=""> <li><a href="#">News and Contacts</a></li> <li><a href="#">Company Background</a></li> <li><a href="#">Media Kit</a></li> <li><a href="#">Glossary of Terms</a></li> </ul></div></div></li> <li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>HSE</a> <div class="imsc"><div class="imsubc" style="width:149px;top:-28px;left:135px;"><ul style=""> <li><a href="#">About HSE</a></li> <li><a href="#">What's New</a></li> <li><a href="#">HSE Approach</a></li> <li><a href="#">HSE Policy</a></li> <li><a href="#">HSE Principles</a></li> <li><a href="#">Sustainable Development</a></li> </ul></div></div></li> </ul><div class="imclear"> </div></div></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Gray/ocscript.js" type="text/javascript"></script>
Menu pionowe
rozwijane po najechaniu kursorem
size: [24.41 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!-- ****** Infinite Menus Rounded Corners Add-On ****** --> <script language="JavaScript" type="text/javascript"> ulm_round_corner_size_main = 2; ulm_round_corner_size_sub = 2; </script> <div id="ssimrc" style="position:absolute;visibility:hidden;"><style type="text/css">.imgl .imrc{font-size:1px;line-height:0px;height:1px;border-width:0px;border-style:solid;border-right-width:1px;border-left-width:1px;}.imgl .imbrc{border-width:0px;border-bottom-width:1px;height:0px;}</style></div><!--[if lte IE 6]><style type="text/css">.imgl .imrc{overflow:hidden;}.imgl .imroundcorner{height:1px;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imgl .imroundcorner{zoom:1;}</style><![endif]--><script language="JavaScript" type="text/javascript">;function im_round_corners(tb,ms,isget,inner){var size=window["ulm_round_corner_size_"+ms];var pos=0;var wv="";if(!inner)wv+='<div class="imroundcorner" imrctype="'+tb+'" imrcgroup="'+ms+'">';if(tb=="top"){wv+=im_rcs(size,1," imtopspace");for(var i=size-1;i>=0;i--)wv+=im_rcs(i);}else {for(var i=0;i<size;i++)wv+=im_rcs(i);wv+=im_rcs(size,1,"");}if(!inner)wv+='</div>';if(isget)return wv;else document.write(wv);};function im_rcs(pos,is_cap,topclass){if(is_cap)return '<div class="imrbcolor imrc imbrc'+topclass+'" style="margin-left:'+pos+'px;margin-right:'+pos+'px;"></div>';else return '<div class="imrbcolor imrcolor imrc" style="vertical-align:top;margin-left:'+pos+'px;margin-right:'+pos+'px;"></div>';}</script> <!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <style type="text/css"> /* --[[ Main Expand Icons ]]-- */ #imenus0 .imeam span,#imenus0 .imeamj span {width:9px; height:9px; left:-10px; top:5px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-repeat:no-repeat;background-position:top left;} /* --[[ Sub Expand Icons ]]-- */ #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(small_red_pointer.gif); width:7px; height:8px; left:-8px; top:3px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(small_red_pointer.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {background-color:#546347; border-style:solid; border-color:#000000; border-width:0px 1px; padding:0px 2px; margin:0px; } /* [Rounded Corner Styles] */ .imrcmain0 .imrcolor {background-color:#546347; } .imrcmain0 .imrbcolor {border-color:#444444; } .imrcmain0 .imtopspace {height:0px; } /* --[[ Sub Container ]]-- */ #imenus0 li ul {background-color:#cce7bc; border-style:solid; border-color:#a2a2a2; border-width:0px 1px; padding:5px 7px; } /* [Rounded Corner Styles] */ #imenus0 .imrcolor {background-color:#cce7bc; } #imenus0 .imrbcolor {border-color:#a2a2a2; } #imenus0 .imtopspace {height:6px; } /* --[[ Main Items ]]-- */ #imenus0 li a, #imenus0 .imctitle {color:#ffffff; text-align:center; font-family:Arial; font-size:12px; font-weight:bold; text-decoration:none; border-style:none; border-color:#000000; border-width:0px; padding:2px 5px 2px 12px; } /* [hover] - These settings must be duplicated for IE compatibility.*/ #imenus0 li:hover>a {background-color:#cce7bc; color:#546347; } #imenus0 li a.ihover, .imde imenus0 a:hover {background-color:#cce7bc; color:#546347; } /* [active] */ #imenus0 li a.iactive {} /* --[[ Sub Items ]]-- */ #imenus0 ul a, #imenus0 .imsubc li .imctitle {color:#111111; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; } /* [hover] - These settings must be duplicated for IE comptatibility.*/ #imenus0 ul li:hover>a {background-color:transparent; color:#cc0000; } #imenus0 ul li a.ihover {background-color:transparent; color:#cc0000; } /* [active] */ #imenus0 ul li a.iactive {background-color:#ffffff; } /* [Dividers] */ #imenus0 .dvs {border-bottom-width:1px; border-style:dotted; border-color:#546347; padding-bottom:4px; margin-bottom:4px; } </style><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:538px;z-index:999999;position:relative;"><script language="JavaScript" type="text/javascript">im_round_corners("top","main");</script><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:140px;"><a class="" href="#"><span class="imea imeam"><span></span></span>Who We Are</a> <div class="imsc"><div class="imsubc" style="width:140px;top:0px;left:0px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Mission & Goals</a></li> <li><a href="#">History</a></li> <li><a href="#">Management</a></li> <li><a href="#">Working at Tyco</a></li> <li class="dvs"><a href="#">Press Center</a></li> <li><a href="#"><span class="imea imeas"><span></span></span>Board of Directors</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-26px;left:127px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li> <li class="dvs"><a href="#"><span class="imea imeas"><span></span></span>Worldwide</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-26px;left:127px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style=""> <li><a href="#">Europe</a></li> <li><a href="#">Asia</a></li> <li><a href="#">US & Canada</a></li> <li><a href="#">Mexico</a></li> <li><a href="#">Australia</a></li> <li><a href="#">Middle East</a></li> </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li> <li><a href="#">Customers</a></li> </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li> <li class="imatm" style="width:142px;"><a href="#"><span class="imea imeam"><span></span></span>Our Commitment</a> <div class="imsc"><div class="imsubc" style="width:142px;top:0px;left:0px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">People & Values</a></li> <li><a href="#">Governance</a></li> <li><a href="#">Community</a></li> <li><a href="#">Environmental</a></li> </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li> <li class="imatm" style="width:125px;"><a href="#"><span class="imea imeam"><span></span></span>Our Business</a> <div class="imsc"><div class="imsubc" style="width:125px;top:0px;left:0px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li> <li class="imatm" style="width:125px;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a> <div class="imsc"><div class="imsubc" style="width:126px;top:0px;left:0px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li> </ul><div class="imclear"> </div></div><script language="JavaScript" type="text/javascript">im_round_corners("bottom","main");</script></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Corners/ocscript.js" type="text/javascript"></script>
Menu poziome
rozwijane po najechaniu kursorem
size: [19.49 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <style type="text/css"> /* --[[ Main Expand Icons ]]-- */ #imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(medium_purple_down.gif); width:9px; height:6px; left:-11px; top:6px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(medium_purple_down.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Sub Expand Icons ]]-- */ #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(stub_arrow_right.gif); width:6px; height:8px; left:-6px; top:3px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(stub_arrow_right.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {border-color:#6a6a6a; border-width:1px; padding:0px; margin:0px; } /* --[[ Sub Container ]]-- */ #imenus0 li ul {background-color:#ffffff; border-style:solid; border-color:#cccccc; border-width:1px; padding:5px; margin:4px 0px 0px; } /* --[[ Main Items ]]-- */ #imenus0 li a, #imenus0 .imctitle {color:#333333; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; text-decoration:none; border-color:#dddddd; border-width:1px; padding:0px 2px 0px 0px; } /* [hover] - These settings must be duplicated for IE compatibility.*/ #imenus0 li:hover>a {text-decoration:underline; } #imenus0 li a.ihover, .imde imenus0 a:hover {text-decoration:underline; } /* [active] */ #imenus0 li a.iactive {} /* [Main Graphic Button Text Content] */ #imenus0 .imbuttons {padding:2px 0px 0px 4px; } /* --[[ Sub Items ]]-- */ #imenus0 ul a, #imenus0 .imsubc li .imctitle {color:#333333; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; } /* [hover] - These settings must be duplicated for IE comptatibility.*/ #imenus0 ul li:hover>a {color:#000000; text-decoration:underline; } #imenus0 ul li a.ihover {color:#000000; text-decoration:underline; } /* [active] */ #imenus0 ul li a.iactive {background-color:#ffffff; } /* [Dividers] */ #imenus0 .dvs {border-bottom-width:1px; border-style:solid; border-color:#efefef; padding-bottom:2px; margin-bottom:2px; } </style><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:580px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:145px;"><a class="" href="#"><span class="imea imeam"><span></span></span>Who We Are</a> <div class="imsc"><div class="imsubc" style="width:143px;top:0px;left:0px;"><ul style=""> <li class="dvs"><a href="#">Overview</a></li> <li class="dvs"><a href="#">Mission & Goals</a></li> <li class="dvs"><a href="#">History</a></li> <li class="dvs"><a href="#">Management</a></li> <li class="dvs"><a href="#">Working at Tyco</a></li> <li class="dvs"><a href="#">Press Center</a></li> <li class="dvs"><a href="#"><span class="imea imeas"><span></span></span>Worldwide</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:132px;"><ul style=""> <li class="dvs"><a href="#">Europe</a></li> <li class="dvs"><a href="#">Asia</a></li> <li class="dvs"><a href="#">US & Canada</a></li> <li class="dvs"><a href="#">Mexico</a></li> <li class="dvs"><a href="#">Australia</a></li> <li><a href="#">Middle East</a></li> </ul></div></div></li> <li class="dvs"><a href="#"><span class="imea imeas"><span></span></span>Board of Directors</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:132px;"><ul style=""> <li class="dvs"><a href="#">Overview</a></li> <li class="dvs"><a href="#">Electronics</a></li> <li class="dvs"><a href="#">Fire & Security</a></li> <li class="dvs"><a href="#">Healthcare</a></li> <li class="dvs"><a href="#">Plastics & Adhesives</a></li> <li class="dvs"><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li><a href="#">Customers</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Commitment</a> <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:-1px;"><ul style=""> <li class="dvs"><a href="#">Overview</a></li> <li class="dvs"><a href="#">People & Values</a></li> <li class="dvs"><a href="#">Governance</a></li> <li class="dvs"><a href="#">Community</a></li> <li><a href="#">Environmental</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Business</a> <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:0px;"><ul style=""> <li class="dvs"><a href="#">Overview</a></li> <li class="dvs"><a href="#">Electronics</a></li> <li class="dvs"><a href="#">Fire & Security</a></li> <li class="dvs"><a href="#">Healthcare</a></li> <li class="dvs"><a href="#">Plastics & Adhesives</a></li> <li class="dvs"><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a> <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:-1px;"><ul style=""> <li class="dvs"><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> </ul></div></div></li> </ul><div class="imclear"> </div></div></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Stacking/ocscript.js" type="text/javascript"></script>
Menu poziome
rozwijane po najechaniu kursorem
size: [48.81 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <style type="text/css"> /* --[[ Main Expand Icons ]]-- */ #imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(arrows_0.gif); width:9px; height:9px; left:-9px; top:5px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(arrows_0.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Sub Expand Icons ]]-- */ #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(small_red_pointer.gif); width:7px; height:8px; left:-7px; top:3px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(small_red_pointer.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {border-style:none; border-color:#6a6a6a; border-width:1px; padding:0px; margin:0px; } /* --[[ Sub Container ]]-- */ #imenus0 li ul {background-color:#e4f5a9; border-style:solid; border-color:#cccccc; border-width:1px; padding:5px; margin:4px 0px 0px; } /* --[[ Main Items ]]-- */ #imenus0 li a, #imenus0 .imctitle {color:#333333; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; text-decoration:underline; border-style:none; border-color:#dddddd; border-width:1px; padding:0px 2px 0px 0px; } /* [hover] - These settings must be duplicated for IE compatibility.*/ #imenus0 li:hover>a {text-decoration:underline; border-style:none; } #imenus0 li a.ihover, .imde imenus0 a:hover {text-decoration:underline; border-style:none; } /* [active] */ #imenus0 li a.iactive {border-style:none; } /* [Main Graphic Button Text Content] */ #imenus0 .imbuttons {padding:2px 0px 0px 4px; } /* --[[ Sub Items ]]-- */ #imenus0 ul a, #imenus0 .imsubc li .imctitle {color:#555555; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; } /* [hover] - These settings must be duplicated for IE comptatibility.*/ #imenus0 ul li:hover>a {color:#000000; text-decoration:underline; } #imenus0 ul li a.ihover {color:#000000; text-decoration:underline; } /* [active] */ #imenus0 ul li a.iactive {} </style><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:580px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:145px;"><a class="" href="#"><span class="imea imeam"><span></span></span>Who We Are</a> <div class="imsc"><div class="imsubc" style="width:140px;top:0px;left:2px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Mission & Goals</a></li> <li><a href="#">History</a></li> <li><a href="#">Management</a></li> <li><a href="#">Working at Tyco</a></li> <li><a href="#">Press Center</a></li> <li><a href="#"><span class="imea imeas"><span></span></span>Worldwide</a> <div class="imsc"><div class="imsubc" style="width:119px;top:-23px;left:132px;"><ul style=""> <li><a href="#">Europe</a></li> <li><a href="#">Asia</a></li> <li><a href="#">US & Canada</a></li> <li><a href="#">Mexico</a></li> <li><a href="#">Australia</a></li> <li><a href="#">Middle East</a></li> </ul></div></div></li> <li><a href="#"><span class="imea imeas"><span></span></span>Board of Directors</a> <div class="imsc"><div class="imsubc" style="width:128px;top:-23px;left:132px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li><a href="#">Customers</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Commitment</a> <div class="imsc"><div class="imsubc" style="width:140px;top:0px;left:2px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">People & Values</a></li> <li><a href="#">Governance</a></li> <li><a href="#">Community</a></li> <li><a href="#">Environmental</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Business</a> <div class="imsc"><div class="imsubc" style="width:140px;top:0px;left:3px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a> <div class="imsc"><div class="imsubc" style="width:140px;top:0px;left:2px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> </ul></div></div></li> </ul><div class="imclear"> </div></div></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Stretch/ocscript.js" type="text/javascript"></script>
Menu poziome
rozwijane po najechaniu kursorem
size: [33.66 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <style type="text/css"> /* --[[ Main Expand Icons ]]-- */ #imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(light_arrow_right.gif); width:6px; height:9px; left:-6px; top:5px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(light_arrow_right.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Sub Expand Icons ]]-- */ #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(medium_purple_right.gif); width:6px; height:9px; left:-6px; top:3px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(medium_purple_right.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {border-style:none; border-color:#6a6a6a; border-width:1px; padding:0px; margin:0px; } /* --[[ Sub Container ]]-- */ #imenus0 li ul {background-color:#d3d2df; border-style:solid; border-color:#333333; border-width:1px; padding:5px; margin:4px 0px 0px; } /* --[[ Main Items ]]-- */ #imenus0 li a, #imenus0 .imctitle {height:20px; background-color:#585575; color:#dddddd; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; text-decoration:none; border-style:none; border-color:#ffffff; border-width:1px; padding:2px 8px; margin:0px 0px 2px; } /* [hover] - These settings must be duplicated for IE compatibility.*/ #imenus0 li:hover>a {text-decoration:underline; } #imenus0 li a.ihover, .imde imenus0 a:hover {text-decoration:underline; } /* [active] */ #imenus0 li a.iactive {} /* --[[ Sub Items ]]-- */ #imenus0 ul a, #imenus0 .imsubc li .imctitle {height:auto; background-color:transparent; color:#555555; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; margin:0px; } /* [hover] - These settings must be duplicated for IE comptatibility.*/ #imenus0 ul li:hover>a {color:#000000; text-decoration:underline; } #imenus0 ul li a.ihover {color:#000000; text-decoration:underline; } /* [active] */ #imenus0 ul li a.iactive {background-color:#ffffff; } </style><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:149px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:100%;"><a class="" href="#"><span class="imea imeam"><span></span></span>Who We Are</a> <div class="imsc"><div class="imsubc" style="width:145px;top:-30px;left:159px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Mission & Goals</a></li> <li><a href="#">History</a></li> <li><a href="#">Management</a></li> <li><a href="#">Working at Tyco</a></li> <li><a href="#">Press Center</a></li> <li><a href="#"><span class="imea imeas"><span></span></span>Worldwide</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:138px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Europe</a></li> <li><a href="#">Asia</a></li> <li><a href="#">US & Canada</a></li> <li><a href="#">Mexico</a></li> <li><a href="#">Australia</a></li> <li><a href="#">Middle East</a></li> </ul></div></div></li> <li><a href="#"><span class="imea imeas"><span></span></span>Board of Directors</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:138px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li><a href="#">Customers</a></li> </ul></div></div></li> <li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Our Commitment</a> <div class="imsc"><div class="imsubc" style="width:146px;top:-30px;left:159px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">People & Values</a></li> <li><a href="#">Governance</a></li> <li><a href="#">Community</a></li> <li><a href="#">Environmental</a></li> </ul></div></div></li> <li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Our Business</a> <div class="imsc"><div class="imsubc" style="width:146px;top:-30px;left:159px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li class="imatm" style="width:100%;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a> <div class="imsc"><div class="imsubc" style="width:146px;top:-30px;left:159px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> </ul></div></div></li> </ul><div class="imclear"> </div></div></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Shifts/ocscript.js" type="text/javascript"></script>
Menu pionowe
rozwijane po najechaniu kursorem
size: [28.48 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <style type="text/css"> /* --[[ Main Expand Icons ]]-- */ #imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(sample1_main_arrow.gif); width:15px; height:14px; left:-15px; top:0px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(sample1_main_arrow.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Sub Expand Icons ]]-- */ #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(sample1_sub_arrow.gif); width:14px; height:14px; left:-14px; top:0px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(sample1_sub_arrow.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {background-color:#e6ede7; border-style:solid; border-color:#87b77b; border-width:1px; padding:0px; } /* --[[ Sub Container ]]-- */ #imenus0 li ul {background-color:#e6ede7; border-style:solid; border-color:#87b77b; border-width:6px; padding:5px; } /* --[[ Main Items ]]-- */ #imenus0 li a, #imenus0 .imctitle {color:#333333; text-align:center; font-family:Arial; font-size:12px; font-weight:bold; text-decoration:none; border-style:none; border-color:#000000; border-width:0px; padding:2px 5px; } /* [hover] - These settings must be duplicated for IE compatibility.*/ #imenus0 li:hover>a {background-color:#87b77b; color:#111111; } #imenus0 li a.ihover, .imde imenus0 a:hover {background-color:#87b77b; color:#111111; } /* [active] */ #imenus0 li a.iactive {} /* --[[ Sub Items ]]-- */ #imenus0 ul a, #imenus0 .imsubc li .imctitle {color:#111111; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; } /* [hover] - These settings must be duplicated for IE comptatibility.*/ #imenus0 ul li:hover>a {background-color:#ec9d68; color:#255585; } #imenus0 ul li a.ihover {background-color:#ec9d68; color:#255585; } /* [active] */ #imenus0 ul li a.iactive {text-decoration:underline; } </style><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:616px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:147px;"><a class="" href="#"><span class="imea imeam"><span></span></span>Our Business</a> <div class="imsc"><div class="imsubc" style="width:148px;top:0px;left:-1px;"><ul style=""> <li><a href="#">Press Releases</a></li> <li><a href="#">Features</a></li> <li><a href="#">Events and Speakers</a></li> <li><a href="#">Webcasts</a></li> <li><a href="#">Photo Gallery</a></li> <li><a href="#">Press Contacts</a></li> </ul></div></div></li> <li class="imatm" style="width:169px;"><a href="#"><span class="imea imeam"><span></span></span>Investor Relations</a> <div class="imsc"><div class="imsubc" style="width:169px;top:;left:;"><ul style=""> <li><a href="#">Company Information</a></li> <li><a href="#">Financial Information</a></li> <li><a href="#">SEC Filings</a></li> <li><a href="#"><span class="imea imeas"><span></span></span>Corporate Gonernance</a> <div class="imsc"><div class="imsubc" style="width:165px;top:-18px;left:135px;"><ul style=""> <li><a href="#">For Service Providers</a></li> <li><a href="#">For Enterprises</a></li> <li><a href="#">For Government</a></li> <li><a href="#">Communication Solutions</a></li> <li><a href="#">Service Architecture</a></li> <li><a href="#">Document Library</a></li> <li><a href="#">Catalog Index</a></li> </ul></div></div></li> <li><a href="#">Executive Presentations</a></li> <li><a href="#">Events Calendar</a></li> <li><a href="#">Stock Charts</a></li> <li><a href="#">Tax Basis Worksheet</a></li> </ul></div></div></li> <li class="imatm" style="width:168px;"><a href="#"><span class="imea imeam"><span></span></span>Company Information</a> <div class="imsc"><div class="imsubc" style="width:168px;top:;left:;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li class="imatm" style="width:130px;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a> <div class="imsc"><div class="imsubc" style="width:131px;top:;left:;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> </ul></div></div></li> </ul><div class="imclear"> </div></div></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Thick/ocscript.js" type="text/javascript"></script>
Menu poziome
rozwijane po najechaniu kursorem
size: [21.94 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <style type="text/css"> /* --[[ Main Expand Icons ]]-- */ #imenus0 .imeam span,#imenus0 .imeamj span {width:7px; height:5px; left:-7px; top:5px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-repeat:no-repeat;background-position:top left;} /* --[[ Sub Expand Icons ]]-- */ #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(stub_arrow_right.gif); width:6px; height:8px; left:3px; top:3px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(stub_arrow_right.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {background-color:#ffffff; border-style:none; border-color:#6a6a6a; border-width:1px; padding:0px; margin:0px; } /* --[[ Sub Container ]]-- */ #imenus0 li ul {background-color:#ffffff; border-style:solid; border-color:#cccccc; border-width:1px; padding:5px; margin:4px 0px 0px; } /* --[[ Main Items ]]-- */ #imenus0 li a, #imenus0 .imctitle {height:80px; color:#333333; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; text-decoration:underline; border-style:solid; border-color:#dddddd; border-width:1px; padding:2px 8px; margin:0px 5px 0px 0px; } /* [hover] - These settings must be duplicated for IE compatibility.*/ #imenus0 li:hover>a {text-decoration:underline; border-color:#cc3300; } #imenus0 li a.ihover, .imde imenus0 a:hover {text-decoration:underline; border-color:#cc3300; } /* [active] */ #imenus0 li a.iactive {} /* --[[ Sub Items ]]-- */ #imenus0 ul a, #imenus0 .imsubc li .imctitle {height:auto; color:#555555; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; } /* [hover] - These settings must be duplicated for IE comptatibility.*/ #imenus0 ul li:hover>a {color:#cc3300; text-decoration:underline; border-color:transparent; } #imenus0 ul li a.ihover {color:#cc3300; text-decoration:underline; border-color:transparent; } /* [active] */ #imenus0 ul li a.iactive {background-color:#ffffff; } </style><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:530px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:120px;"><a class="" href="#" himg="Image/balance.gif" style="background-image:url(Image/balance_hl.gif);background-repeat:no-repeat;background-position:center center;"><span class="imea imeam"><span></span></span></a> <div class="imsc"><div class="imsubc" style="width:115px;top:0px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Mission & Goals</a></li> <li><a href="#">History</a></li> <li><a href="#">Management</a></li> <li><a href="#">Working at Tyco</a></li> <li><a href="#">Press Center</a></li> <li><a href="#">Customers</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#" himg="Image/organize.gif" style="background-image:url(Image/organize_hl.gif);background-repeat:no-repeat;background-position:center center;"><span class="imea imeam"><span></span></span></a> <div class="imsc"><div class="imsubc" style="width:140px;top:0px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">People & Values</a></li> <li><a href="#"><span class="imea imeas"><span></span></span>Worldwide</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:132px;"><ul style=""> <li><a href="#">Europe</a></li> <li><a href="#">Asia</a></li> <li><a href="#">US & Canada</a></li> <li><a href="#">Mexico</a></li> <li><a href="#">Australia</a></li> <li><a href="#">Middle East</a></li> </ul></div></div></li> <li><a href="#"><span class="imea imeas"><span></span></span>Board of Directors</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:132px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li><a href="#">Governance</a></li> <li><a href="#">Community</a></li> <li><a href="#">Environmental</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#" himg="Image/purchase.gif" style="background-image:url(Image/purchase_hl.gif);background-repeat:no-repeat;background-position:center center;"><span class="imea imeam"><span></span></span></a> <div class="imsc"><div class="imsubc" style="width:140px;top:0px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li class="imatm" style="width:120px;"><a href="#" himg="Image/thirst.gif" style="background-image:url(Image/thirst_hl.gif);background-repeat:no-repeat;background-position:center center;"><span class="imea imeam"><span></span></span></a> <div class="imsc"><div class="imsubc" style="width:115px;top:0px;left:-1px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> </ul></div></div></li> </ul><div class="imclear"> </div></div></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Image/ocscript.js" type="text/javascript"></script>
Menu poziome graficzne
rozwijane po najechaniu kursorem
size: [68.61 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!-- ****** Infinite Menus Rounded Corners Add-On ****** --> <script language="JavaScript" type="text/javascript"> ulm_round_corner_size_main = 2; ulm_round_corner_size_sub = 2; </script> <div id="ssimrc" style="position:absolute;visibility:hidden;"><style type="text/css">.imgl .imrc{font-size:1px;line-height:0px;height:1px;border-width:0px;border-style:solid;border-right-width:1px;border-left-width:1px;}.imgl .imbrc{border-width:0px;border-bottom-width:1px;height:0px;}</style></div><!--[if lte IE 6]><style type="text/css">.imgl .imrc{overflow:hidden;}.imgl .imroundcorner{height:1px;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imgl .imroundcorner{zoom:1;}</style><![endif]--><script language="JavaScript" type="text/javascript">;function im_round_corners(tb,ms,isget,inner){var size=window["ulm_round_corner_size_"+ms];var pos=0;var wv="";if(!inner)wv+='<div class="imroundcorner" imrctype="'+tb+'" imrcgroup="'+ms+'">';if(tb=="top"){wv+=im_rcs(size,1," imtopspace");for(var i=size-1;i>=0;i--)wv+=im_rcs(i);}else {for(var i=0;i<size;i++)wv+=im_rcs(i);wv+=im_rcs(size,1,"");}if(!inner)wv+='</div>';if(isget)return wv;else document.write(wv);};function im_rcs(pos,is_cap,topclass){if(is_cap)return '<div class="imrbcolor imrc imbrc'+topclass+'" style="margin-left:'+pos+'px;margin-right:'+pos+'px;"></div>';else return '<div class="imrbcolor imrcolor imrc" style="vertical-align:top;margin-left:'+pos+'px;margin-right:'+pos+'px;"></div>';}</script> <!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <style type="text/css"> /* --[[ Main Expand Icons ]]-- */ #imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(Stret/squares_0.gif); width:13px; height:8px; left:-12px; top:4px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(Stret/squares_0_hl.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Sub Expand Icons ]]-- */ #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(Stret/small_red_pointer.gif); width:7px; height:8px; left:-7px; top:3px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(Stret/small_red_pointer.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {border-style:none; border-color:#6a6a6a; border-width:1px; padding:0px; margin:0px; } /* [Rounded Corner Styles] */ .imrcmain0 .imrcolor {} .imrcmain0 .imrbcolor {border-color:#444444; } .imrcmain0 .imtopspace {height:0px; } /* --[[ Sub Container ]]-- */ #imenus0 li ul {background-color:#e4f5a9; border-style:solid; border-color:#cccccc; border-width:0px 1px; padding:5px; margin:0px; } /* [Rounded Corner Styles] */ #imenus0 .imrcolor {background-color:#e4f5a9; } #imenus0 .imrbcolor {border-color:#b0b0b0; } #imenus0 .imtopspace {height:4px; } /* --[[ Main Items ]]-- */ #imenus0 li a, #imenus0 .imctitle {color:#333333; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; text-decoration:underline; border-style:none; border-color:#dddddd; border-width:1px; padding:0px 2px 0px 0px; } /* [hover] - These settings must be duplicated for IE compatibility.*/ #imenus0 li:hover>a {text-decoration:underline; border-style:none; } #imenus0 li a.ihover, .imde imenus0 a:hover {text-decoration:underline; border-style:none; } /* [active] */ #imenus0 li a.iactive {border-style:none; } /* [Main Graphic Button Text Content] */ #imenus0 .imbuttons {padding:2px 0px 0px 4px; } /* --[[ Sub Items ]]-- */ #imenus0 ul a, #imenus0 .imsubc li .imctitle {color:#555555; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; } /* [hover] - These settings must be duplicated for IE comptatibility.*/ #imenus0 ul li:hover>a {color:#000000; text-decoration:underline; } #imenus0 ul li a.ihover {color:#000000; text-decoration:underline; } /* [active] */ #imenus0 ul li a.iactive {background-color:#ffffff; } /* [Dividers] */ #imenus0 .dvs {border-bottom-width:1px; border-style:dotted; border-color:#9d9268; padding-bottom:2px; margin-bottom:2px; } </style><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:580px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:145px;"><a class="" href="#"><span class="imea imeam"><span></span></span>Who We Are</a> <div class="imsc"><div class="imsubc" style="width:140px;top:0px;left:2px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style=""> <li class="dvs"><a href="#">Overview</a></li> <li class="dvs"><a href="#">Mission & Goals</a></li> <li class="dvs"><a href="#">History</a></li> <li class="dvs"><a href="#">Management</a></li> <li class="dvs"><a href="#">Working at Tyco</a></li> <li class="dvs"><a href="#">Press Center</a></li> <li class="dvs"><a href="#"><span class="imea imeas"><span></span></span>Worldwide</a> <div class="imsc"><div class="imsubc" style="width:119px;top:-23px;left:132px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style=""> <li class="dvs"><a href="#">Europe</a></li> <li class="dvs"><a href="#">Asia</a></li> <li class="dvs"><a href="#">US & Canada</a></li> <li class="dvs"><a href="#">Mexico</a></li> <li class="dvs"><a href="#">Australia</a></li> <li><a href="#">Middle East</a></li> </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li> <li class="dvs"><a href="#"><span class="imea imeas"><span></span></span>Board of Directors</a> <div class="imsc"><div class="imsubc" style="width:128px;top:-23px;left:132px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style=""> <li class="dvs"><a href="#">Overview</a></li> <li class="dvs"><a href="#">Electronics</a></li> <li class="dvs"><a href="#">Fire & Security</a></li> <li class="dvs"><a href="#">Healthcare</a></li> <li class="dvs"><a href="#">Plastics & Adhesives</a></li> <li class="dvs"><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li> <li><a href="#">Customers</a></li> </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Commitment</a> <div class="imsc"><div class="imsubc" style="width:140px;top:0px;left:2px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style=""> <li class="dvs"><a href="#">Overview</a></li> <li class="dvs"><a href="#">People & Values</a></li> <li class="dvs"><a href="#">Governance</a></li> <li class="dvs"><a href="#">Community</a></li> <li><a href="#">Environmental</a></li> </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Business</a> <div class="imsc"><div class="imsubc" style="width:140px;top:0px;left:3px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style=""> <li class="dvs"><a href="#">Overview</a></li> <li class="dvs"><a href="#">Electronics</a></li> <li class="dvs"><a href="#">Fire & Security</a></li> <li class="dvs"><a href="#">Healthcare</a></li> <li class="dvs"><a href="#">Plastics & Adhesives</a></li> <li class="dvs"><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a> <div class="imsc"><div class="imsubc" style="width:140px;top:0px;left:2px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style=""> <li class="dvs"><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li> </ul><div class="imclear"> </div></div></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Stret/ocscript.js" type="text/javascript"></script>
Menu poziome
rozwijane po najechaniu kursorem
size: [53.51 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <link rel="stylesheet" href="Example/imenus0.css" type="text/css"><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:580px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:145px;"><a class="" href="#"><span class="imea imeam"><span></span></span>Who We Are</a> <div class="imsc"><div class="imsubc" style="width:145px;top:0px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Mission & Goals</a></li> <li><a href="#">History</a></li> <li><a href="#">Management</a></li> <li><a href="#">Working at Tyco</a></li> <li><a href="#">Press Center</a></li> <li><a href="#"><span class="imea imeas"><span></span></span>Worldwide</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:132px;"><ul style=""> <li><a href="#">Europe</a></li> <li><a href="#">Asia</a></li> <li><a href="#">US & Canada</a></li> <li><a href="#">Mexico</a></li> <li><a href="#">Australia</a></li> <li><a href="#">Middle East</a></li> </ul></div></div></li> <li><a href="#"><span class="imea imeas"><span></span></span>Board of Directors</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:132px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li><a href="#">Customers</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Commitment</a> <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:-1px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">People & Values</a></li> <li><a href="#">Governance</a></li> <li><a href="#">Community</a></li> <li><a href="#">Environmental</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Business</a> <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a> <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:-1px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> </ul></div></div></li> </ul><div class="imclear"> </div></div></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Example/ocscript.js" type="text/javascript"></script>
Menu poziome
rozwijane po najechaniu kursorem
size: [50.64 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <style type="text/css"> /* --[[ Main Expand Icons ]]-- */ #imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(Drop/light_arrow_down.gif); width:9px; height:6px; left:-9px; top:5px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(Drop/light_arrow_down.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Sub Expand Icons ]]-- */ #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(Drop/medium_purple_right.gif); width:6px; height:9px; left:-6px; top:3px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(Drop/medium_purple_right.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {border-style:none; border-color:#6a6a6a; border-width:1px; padding:0px; margin:0px; } /* --[[ Sub Container ]]-- */ #imenus0 li ul {background-color:#d3d2df; border-style:solid; border-color:#333333; border-width:1px; padding:5px; margin:4px 0px 0px; } /* [Underlayment (Drop Shadow)] */ #imenus0 .imunder {background-color:#a2a2a2; top:3px; left:3px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);opacity:0.50;-moz-opacity:0.50;} /* --[[ Main Items ]]-- */ #imenus0 li a, #imenus0 .imctitle {background-color:#585575; color:#dddddd; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; text-decoration:none; border-style:none; border-color:#ffffff; border-width:1px; padding:2px 8px; margin:0px 2px 0px 0px; } /* [hover] - These settings must be duplicated for IE compatibility.*/ #imenus0 li:hover>a {text-decoration:underline; } #imenus0 li a.ihover, .imde imenus0 a:hover {text-decoration:underline; } /* [active] */ #imenus0 li a.iactive {} /* --[[ Sub Items ]]-- */ #imenus0 ul a, #imenus0 .imsubc li .imctitle {background-color:transparent; color:#555555; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; } /* [hover] - These settings must be duplicated for IE comptatibility.*/ #imenus0 ul li:hover>a {color:#000000; text-decoration:underline; } #imenus0 ul li a.ihover {color:#000000; text-decoration:underline; } /* [active] */ #imenus0 ul li a.iactive {background-color:#ffffff; } </style><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:580px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:145px;"><a class="" href="#"><span class="imea imeam"><span></span></span>Who We Are</a> <div class="imsc"><div class="imsubc" style="width:145px;top:0px;left:0px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Mission & Goals</a></li> <li><a href="#">History</a></li> <li><a href="#">Management</a></li> <li><a href="#">Working at Tyco</a></li> <li><a href="#">Press Center</a></li> <li><a href="#"><span class="imea imeas"><span></span></span>Worldwide</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:132px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Europe</a></li> <li><a href="#">Asia</a></li> <li><a href="#">US & Canada</a></li> <li><a href="#">Mexico</a></li> <li><a href="#">Australia</a></li> <li><a href="#">Middle East</a></li> </ul></div></div></li> <li><a href="#"><span class="imea imeas"><span></span></span>Board of Directors</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:132px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li><a href="#">Customers</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Commitment</a> <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:-1px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">People & Values</a></li> <li><a href="#">Governance</a></li> <li><a href="#">Community</a></li> <li><a href="#">Environmental</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Business</a> <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:0px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a> <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:-1px;"><div class="imunder"></div><div></div><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> </ul></div></div></li> </ul><div class="imclear"> </div></div></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Drop/ocscript.js" type="text/javascript"></script>
Menu poziome
rozwijane po najechaniu kursorem
size: [35.15 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <style type="text/css"> /* --[[ Main Expand Icons ]]-- */ #imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(Gradient/sample2_main_arrow.gif); width:16px; height:9px; left:-16px; top:3px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(sample2_main_arrow.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Sub Expand Icons ]]-- */ #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(Gradient/sample2_sub_arrow.gif); width:10px; height:13px; left:-10px; top:0px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(sample2_sub_arrow.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {background-image:url(Gradient/sample2_bg.gif); border-style:solid; border-color:#111111; border-width:1px; padding:0px; } /* --[[ Sub Container ]]-- */ #imenus0 li ul {background-color:#fef5d8; border-style:solid; border-color:#111111; border-width:1px; padding:5px; } /* --[[ Main Items ]]-- */ #imenus0 li a, #imenus0 .imctitle {color:#333333; text-align:center; font-family:Arial; font-size:12px; font-weight:bold; text-decoration:none; border-style:none; border-color:#000000; border-width:0px; padding:2px 5px; } /* [hover] - These settings must be duplicated for IE compatibility.*/ #imenus0 li:hover>a {color:#ff0000; } #imenus0 li a.ihover, .imde imenus0 a:hover {color:#ff0000; } /* [active] */ #imenus0 li a.iactive {text-decoration:underline; } /* --[[ Sub Items ]]-- */ #imenus0 ul a, #imenus0 .imsubc li .imctitle {color:#111111; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; } /* [hover] - These settings must be duplicated for IE comptatibility.*/ #imenus0 ul li:hover>a {color:#ff0000; } #imenus0 ul li a.ihover {color:#ff0000; } /* [active] */ #imenus0 ul li a.iactive {text-decoration:underline; } </style><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:540px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:140px;"><a class="" href="#"><span class="imea imeam"><span></span></span>Who We Are</a> <div class="imsc"><div class="imsubc" style="width:140px;top:0px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Mission & Goals</a></li> <li><a href="#">History</a></li> <li><a href="#">Management</a></li> <li><a href="#">Working at Tyco</a></li> <li><a href="#">Press Center</a></li> <li><a href="#"><span class="imea imeas"><span></span></span>Board of Directors</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-18px;left:128px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li><a href="#"><span class="imea imeas"><span></span></span>Worldwide</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-18px;left:128px;"><ul style=""> <li><a href="#">Europe</a></li> <li><a href="#">Asia</a></li> <li><a href="#">US & Canada</a></li> <li><a href="#">Mexico</a></li> <li><a href="#">Australia</a></li> <li><a href="#">Middle East</a></li> </ul></div></div></li> <li><a href="#">Customers</a></li> </ul></div></div></li> <li class="imatm" style="width:142px;"><a href="#"><span class="imea imeam"><span></span></span>Our Commitment</a> <div class="imsc"><div class="imsubc" style="width:140px;top:0px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">People & Values</a></li> <li><a href="#">Governance</a></li> <li><a href="#">Community</a></li> <li><a href="#">Environmental</a></li> </ul></div></div></li> <li class="imatm" style="width:125px;"><a href="#"><span class="imea imeam"><span></span></span>Our Business</a> <div class="imsc"><div class="imsubc" style="width:130px;top:0px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li class="imatm" style="width:125px;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a> <div class="imsc"><div class="imsubc" style="width:126px;top:0px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> </ul></div></div></li> </ul><div class="imclear"> </div></div></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Gradient/ocscript.js" type="text/javascript"></script>
Menu poziome
rozwijane po najechaniu kursorem
size: [23.62 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <style type="text/css"> /* --[[ Main Expand Icons ]]-- */ #imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(Scale/sample3_main_arrow.gif); width:7px; height:5px; left:-7px; top:5px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(Scale/sample3_main_arrow.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Sub Expand Icons ]]-- */ #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(Scale/sample13_sub_expand_default.gif); width:7px; height:9px; left:-7px; top:3px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(Scale/sample13_sub_expand_on.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {background-image:url(Scale/sample13_main_bg.gif); border-style:none; border-width:0px; padding:0px; margin:10px 0px 0px; } /* --[[ Sub Container ]]-- */ #imenus0 li ul {background-color:#404040; border-style:outset; border-color:#404040; border-width:0px 1px 1px; padding:5px; margin:4px 0px 0px; } /* --[[ Main Items ]]-- */ #imenus0 li a, #imenus0 .imctitle {color:#ffffff; text-align:center; font-family:Arial; font-size:12px; font-weight:bold; text-decoration:none; border-style:outset; border-color:#999999; border-width:2px 1px 0px; padding:0px 4px 4px 0px; } /* [hover] - These settings must be duplicated for IE compatibility.*/ #imenus0 li:hover>a {background-color:#404040; color:#dddddd; border-style:inset; border-color:#dddddd; } #imenus0 li a.ihover, .imde imenus0 a:hover {background-color:#404040; color:#dddddd; border-style:inset; border-color:#dddddd; } /* [active] */ #imenus0 li a.iactive {} /* --[[ Sub Items ]]-- */ #imenus0 ul a, #imenus0 .imsubc li .imctitle {color:#ffffff; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#ff0000; border-width:1px; padding:2px 5px; } /* [hover] - These settings must be duplicated for IE comptatibility.*/ #imenus0 ul li:hover>a {background-color:#606060; color:#ffffcc; border-style:none; border-color:#333333; } #imenus0 ul li a.ihover {background-color:#606060; color:#ffffcc; border-style:none; border-color:#333333; } /* [active] */ #imenus0 ul li a.iactive {text-decoration:underline; } </style><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:720px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:120px;"><a class="" href="#"><span class="imea imeam"><span></span></span>Home</a> <div class="imsc"><div class="imsubc" style="width:119px;top:-4px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">People & Values</a></li> <li><a href="#">Governance</a></li> </ul></div></div></li> <li class="imatm" style="width:120px;"><a href="#"><span class="imea imeam"><span></span></span>E-mail</a> <div class="imsc"><div class="imsubc" style="width:119px;top:-4px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Mission & Goals</a></li> <li><a href="#">History</a></li> </ul></div></div></li> <li class="imatm" style="width:120px;"><a href="#"><span class="imea imeam"><span></span></span>Windows</a> <div class="imsc"><div class="imsubc" style="width:119px;top:-4px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> </ul></div></div></li> <li class="imatm" style="width:120px;"><a href="#"><span class="imea imeam"><span></span></span>Skype</a> <div class="imsc"><div class="imsubc" style="width:119px;top:-4px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> <li><a href="#">Investor Relations</a></li> </ul></div></div></li> <li class="imatm" style="width:120px;"><a href="#"><span class="imea imeam"><span></span></span>Sms</a> <div class="imsc"><div class="imsubc" style="width:119px;top:-4px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> <li><a href="#">Investor Relations</a></li> </ul></div></div></li> <li class="imatm" style="width:120px;"><a href="#"><span class="imea imeam"><span></span></span>Search</a> <div class="imsc"><div class="imsubc" style="width:119px;top:-4px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> <li><a href="#">Investor Relations</a></li> </ul></div></div></li> </ul><div class="imclear"> </div></div></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Scale/ocscript.js" type="text/javascript"></script>
Menu poziome
rozwijane po najechaniu kursorem
size: [24.81 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <style type="text/css"> /* --[[ Main Expand Icons ]]-- */ #imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(Basic/sample3_main_arrow.gif); width:7px; height:5px; left:-7px; top:5px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(Basic/sample3_main_arrow.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Sub Expand Icons ]]-- */ #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(Basic/sample3_sub_arrow.gif); width:5px; height:7px; left:-5px; top:3px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(Basic/sample3_sub_arrow.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {background-color:#ffffff; border-style:none; border-color:#6a6a6a; border-width:1px; padding:0px; margin:0px; } /* --[[ Sub Container ]]-- */ #imenus0 li ul {background-color:#efefef; border-style:solid; border-color:#ff0000; border-width:1px 0px; padding:5px; margin:4px 0px 0px; } /* --[[ Main Items ]]-- */ #imenus0 li a, #imenus0 .imctitle {color:#333333; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; text-decoration:underline; border-style:solid; border-color:#dddddd; border-width:1px; padding:2px 8px; } /* [hover] - These settings must be duplicated for IE compatibility.*/ #imenus0 li:hover>a {background-color:#efefef; text-decoration:underline; } #imenus0 li a.ihover, .imde imenus0 a:hover {background-color:#efefef; text-decoration:underline; } /* [active] */ #imenus0 li a.iactive {background-color:#efefef; } /* --[[ Sub Items ]]-- */ #imenus0 ul a, #imenus0 .imsubc li .imctitle {color:#555555; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; } /* [hover] - These settings must be duplicated for IE comptatibility.*/ #imenus0 ul li:hover>a {color:#000000; text-decoration:underline; } #imenus0 ul li a.ihover {color:#000000; text-decoration:underline; } /* [active] */ #imenus0 ul li a.iactive {background-color:#ffffff; } </style><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:580px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:145px;"><a class="" href="#"><span class="imea imeam"><span></span></span>Who We Are</a> <div class="imsc"><div class="imsubc" style="width:145px;top:0px;left:0px;"><ul boxatype="center" style=""> <li><a href="#">Overview</a></li> <li><a href="#">Mission & Goals</a></li> <li><a href="#">History</a></li> <li><a href="#">Management</a></li> <li><a href="#">Working at Tyco</a></li> <li><a href="#">Press Center</a></li> <li><a href="#"><span class="imea imeas"><span></span></span>Worldwide</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:132px;"><ul style=""> <li><a href="#">Europe</a></li> <li><a href="#">Asia</a></li> <li><a href="#">US & Canada</a></li> <li><a href="#">Mexico</a></li> <li><a href="#">Australia</a></li> <li><a href="#">Middle East</a></li> </ul></div></div></li> <li><a href="#"><span class="imea imeas"><span></span></span>Board of Directors</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:132px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li><a href="#">Customers</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Commitment</a> <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:-1px;"><ul boxatype="center" style=""> <li><a href="#">Overview</a></li> <li><a href="#">People & Values</a></li> <li><a href="#">Governance</a></li> <li><a href="#">Community</a></li> <li><a href="#">Environmental</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Business</a> <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:0px;"><ul boxatype="center" style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a> <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:-1px;"><ul boxatype="center" style=""> <li><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> </ul></div></div></li> </ul><div class="imclear"> </div></div></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Basic/ocscript.js" type="text/javascript"></script>
Menu poziome
rozwijane po najechaniu kursorem
size: [33.95 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <style type="text/css"> /* --[[ Main Expand Icons ]]-- */ #imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(Tones/sample3_main_arrow.gif); width:7px; height:5px; left:-8px; top:5px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(Tones/sample3_main_arrow.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Sub Expand Icons ]]-- */ #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(Tones/arrow_sub.gif); width:10px; height:13px; left:-10px; top:0px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(Tones/arrow_sub.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {background-color:#06437d; border-style:solid; border-color:#769bba; border-width:1px; padding:0px; margin:0px; } /* --[[ Sub Container ]]-- */ #imenus0 li ul {background-color:#cce3f8; border-style:solid; border-color:#356595; border-width:1px; padding:5px; } /* --[[ Main Items ]]-- */ #imenus0 li a, #imenus0 .imctitle {color:#e6e6e6; text-align:center; font-family:Arial; font-size:12px; font-weight:bold; text-decoration:none; border-style:none; border-color:#000000; border-width:0px; padding:4px 5px 4px 12px; } /* [hover] - These settings must be duplicated for IE compatibility.*/ #imenus0 li:hover>a {background-color:#cce3f8; color:#111111; } #imenus0 li a.ihover, .imde imenus0 a:hover {background-color:#cce3f8; color:#111111; } /* [active] */ #imenus0 li a.iactive {background-color:#cce3f8; color:#111111; } /* --[[ Sub Items ]]-- */ #imenus0 ul a, #imenus0 .imsubc li .imctitle {color:#111111; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; } /* [hover] - These settings must be duplicated for IE comptatibility.*/ #imenus0 ul li:hover>a {background-color:#ffffff; color:#255585; } #imenus0 ul li a.ihover {background-color:#ffffff; color:#255585; } /* [active] */ #imenus0 ul li a.iactive {background-color:#ffffff; color:#255585; } </style><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:534px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:140px;"><a class="" href="#"><span class="imea imeam"><span></span></span>Who We Are</a> <div class="imsc"><div class="imsubc" style="width:140px;top:0px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Mission & Goals</a></li> <li><a href="#">History</a></li> <li><a href="#">Management</a></li> <li><a href="#">Working at Tyco</a></li> <li><a href="#">Press Center</a></li> <li><a href="#"><span class="imea imeas"><span></span></span>Board of Directors</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-18px;left:128px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li><a href="#"><span class="imea imeas"><span></span></span>Worldwide</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-18px;left:128px;"><ul style=""> <li><a href="#">Europe</a></li> <li><a href="#">Asia</a></li> <li><a href="#">US & Canada</a></li> <li><a href="#">Mexico</a></li> <li><a href="#">Australia</a></li> <li><a href="#">Middle East</a></li> </ul></div></div></li> <li><a href="#">Customers</a></li> </ul></div></div></li> <li class="imatm" style="width:142px;"><a href="#"><span class="imea imeam"><span></span></span>Our Commitment</a> <div class="imsc"><div class="imsubc" style="width:142px;top:0px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">People & Values</a></li> <li><a href="#">Governance</a></li> <li><a href="#">Community</a></li> <li><a href="#">Environmental</a></li> </ul></div></div></li> <li class="imatm" style="width:125px;"><a href="#"><span class="imea imeam"><span></span></span>Our Business</a> <div class="imsc"><div class="imsubc" style="width:125px;top:0px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li class="imatm" style="width:125px;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a> <div class="imsc"><div class="imsubc" style="width:126px;top:0px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> </ul></div></div></li> </ul><div class="imclear"> </div></div></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Tones/ocscript.js" type="text/javascript"></script>
Menu poziome
rozwijane po najechaniu kursorem
size: [21.94 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <style type="text/css"> /* --[[ Main Expand Icons ]]-- */ #imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(none); width:7px; height:5px; left:-7px; top:5px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(none); background-repeat:no-repeat;background-position:top left;} /* --[[ Sub Expand Icons ]]-- */ #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(none); width:5px; height:7px; left:-5px; top:3px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(none); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {border-style:none; border-color:#6a6a6a; border-width:1px; padding:0px; margin:10px 0px 0px; } /* --[[ Sub Container ]]-- */ #imenus0 li ul {background-color:#cccccc; border-style:solid; border-color:#999999; border-width:1px; padding:0px; margin:4px 0px 0px; } /* --[[ Main Items ]]-- */ #imenus0 li a, #imenus0 .imctitle {color:#666666; text-align:left; font-family:Arial; font-size:12px; font-weight:bold; text-decoration:none; border-style:solid; border-color:#666666; border-width:0px 0px 8px; padding:2px 0px 4px 2px; margin:0px 2px 0px 0px; } /* [hover] - These settings must be duplicated for IE compatibility.*/ #imenus0 li:hover>a {color:#000000; border-color:#ff0000; } #imenus0 li a.ihover, .imde imenus0 a:hover {color:#000000; border-color:#ff0000; } /* [active] */ #imenus0 li a.iactive {} /* --[[ Sub Items ]]-- */ #imenus0 ul a, #imenus0 .imsubc li .imctitle {color:#000000; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:3px 2px 3px 3px; margin:0px; } /* [hover] - These settings must be duplicated for IE comptatibility.*/ #imenus0 ul li:hover>a {background-color:#999999; color:#ffffff; } #imenus0 ul li a.ihover {background-color:#999999; color:#ffffff; } /* [active] */ #imenus0 ul li a.iactive {} </style><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:495px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:99px;"><a class="" href="#"><span class="imea imeam"><span></span></span>Products</a> <div class="imsc"><div class="imsubc" style="width:97px;top:-4px;left:0px;"><ul style=""> <li><a href="#">All</a></li> <li><a href="#">Acrobat Family</a></li> <li><a href="#">Creative Suite</a></li> <li><a href="#">Document Services</a></li> <li><a href="#">Digital Imaging</a></li> <li><a href="#">Video and audio</a></li> <li><a href="#">Web publishing</a></li> <li><a href="#">Print Publishing</a></li> </ul></div></div></li> <li class="imatm" style="width:99px;"><a href="#"><span class="imea imeam"><span></span></span>Solutions</a> <div class="imsc"><div class="imsubc" style="width:97px;top:-4px;left:0px;"><ul style=""> <li><a href="#">Enterprise</a></li> <li><a href="#">Government</a></li> <li><a href="#">Education</a></li> <li><a href="#">Partners</a></li> <li><a href="#">Developers</a></li> </ul></div></div></li> <li class="imatm" style="width:99px;"><a href="#"><span class="imea imeam"><span></span></span>Support</a> <div class="imsc"><div class="imsubc" style="width:97px;top:-4px;left:0px;"><ul style=""> <li><a href="#">Support main</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">Training</a></li> <li><a href="#">Forums</a></li> <li><a href="#">Announcements</a></li> <li><a href="#">Resource Center</a></li> </ul></div></div></li> <li class="imatm" style="width:99px;"><a href="#"><span class="imea imeam"><span></span></span>Purchase</a> <div class="imsc"><div class="imsubc" style="width:97px;top:-4px;left:0px;"><ul style=""> <li><a href="#">Adobe Store</a></li> <li><a href="#">Your Account</a></li> <li><a href="#">Volume Licensing</a></li> <li><a href="#">Other ways to buy</a></li> <li><a href="#">Customer Service</a></li> </ul></div></div></li> <li class="imatm" style="width:99px;"><a href="#"><span class="imea imeam"><span></span></span>Company</a> <div class="imsc"><div class="imsubc" style="width:97px;top:-4px;left:0px;"><ul style=""> <li><a href="#">About Adobe</a></li> <li><a href="#">Press</a></li> <li><a href="#">Jobs</a></li> <li><a href="#">Investors</a></li> <li><a href="#">Community</a></li> <li><a href="#">Contact Adobe</a></li> </ul></div></div></li> </ul><div class="imclear"> </div></div></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Adobe/ocscript.js" type="text/javascript"></script>
Menu poziome
rozwijane po najechaniu kursorem
size: [15.83 KB]
Wstaw w ramach HEAD <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. --> <style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!--end--> <!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. --> <style type="text/css"> /* --[[ Main Expand Icons ]]-- */ #imenus0 .imeam span,#imenus0 .imeamj span {background-image:url(Bounce/sample3_main_arrow.gif); width:7px; height:5px; left:-7px; top:5px; background-repeat:no-repeat;background-position:top left;} #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(Bounce/sample3_main_arrow.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Sub Expand Icons ]]-- */ #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(Bounce/sample3_sub_arrow.gif); width:5px; height:7px; left:-5px; top:3px; background-repeat:no-repeat;background-position:top left;} #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(Bounce/sample3_sub_arrow.gif); background-repeat:no-repeat;background-position:top left;} /* --[[ Main Container ]]-- */ #imouter0 {background-color:#ffffff; border-style:none; border-color:#6a6a6a; border-width:1px; padding:0px; margin:0px; } /* --[[ Sub Container ]]-- */ #imenus0 li ul {background-color:#efefef; border-style:solid; border-color:#cccccc; border-width:1px; padding:5px; margin:4px 0px 0px; } /* --[[ Main Items ]]-- */ #imenus0 li a, #imenus0 .imctitle {color:#333333; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; text-decoration:underline; border-style:solid; border-color:#dddddd; border-width:1px; padding:2px 8px; } /* [hover] - These settings must be duplicated for IE compatibility.*/ #imenus0 li:hover>a {background-color:#efefef; text-decoration:underline; } #imenus0 li a.ihover, .imde imenus0 a:hover {background-color:#efefef; text-decoration:underline; } /* [active] */ #imenus0 li a.iactive {} /* --[[ Sub Items ]]-- */ #imenus0 ul a, #imenus0 .imsubc li .imctitle {color:#555555; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; } /* [hover] - These settings must be duplicated for IE comptatibility.*/ #imenus0 ul li:hover>a {color:#000000; text-decoration:underline; } #imenus0 ul li a.ihover {color:#000000; text-decoration:underline; } /* [active] */ #imenus0 ul li a.iactive {background-color:#ffffff; } </style><!--end--> Wstaw w ramach BODY <!--|**START IMENUS**|imenus0,inline--> <!-- ****** Infinite Menus Structure & Links ***** --> <div class="imrcmain0 imgl" style="width:580px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0"> <li class="imatm" style="width:145px;"><a class="" href="#"><span class="imea imeam"><span></span></span>Who We Are</a> <div class="imsc"><div class="imsubc" style="width:145px;top:0px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Mission & Goals</a></li> <li><a href="#">History</a></li> <li><a href="#">Management</a></li> <li><a href="#">Working at Tyco</a></li> <li><a href="#">Press Center</a></li> <li><a href="#"><span class="imea imeas"><span></span></span>Worldwide</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:132px;"><ul style=""> <li><a href="#">Europe</a></li> <li><a href="#">Asia</a></li> <li><a href="#">US & Canada</a></li> <li><a href="#">Mexico</a></li> <li><a href="#">Australia</a></li> <li><a href="#">Middle East</a></li> </ul></div></div></li> <li><a href="#"><span class="imea imeas"><span></span></span>Board of Directors</a> <div class="imsc"><div class="imsubc" style="width:140px;top:-23px;left:132px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li><a href="#">Customers</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Commitment</a> <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:-1px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">People & Values</a></li> <li><a href="#">Governance</a></li> <li><a href="#">Community</a></li> <li><a href="#">Environmental</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Our Business</a> <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:0px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fire & Security</a></li> <li><a href="#">Healthcare</a></li> <li><a href="#">Plastics & Adhesives</a></li> <li><a href="#">Engineered Producs</a></li> <li><a href="#">Tyco Worldwide</a></li> </ul></div></div></li> <li class="imatm" style="width:145px;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a> <div class="imsc"><div class="imsubc" style="width:146px;top:0px;left:-1px;"><ul style=""> <li><a href="#">Overview</a></li> <li><a href="#">Stock Quotes</a></li> </ul></div></div></li> </ul><div class="imclear"> </div></div></div> <!--|**END IMENUS**|--> <!--[imcode]*** Infinite Menus Settings / Code - This script reference must appear last. *** *Note: This script is required for scripted add on support and IE 6 sub menu functionality. *Note: This menu will fully function in all CSS2 browsers with the script removed.--> <script language="JavaScript" src="Bounce/ocscript.js" type="text/javascript"></script>
Menu poziome
rozwijane po najechaniu kursorem
size: [26.15 KB]
Pozycjonowanie stron Lublin
|
Łożysko (zestaw) T MISUBISHI CARI
|
faktura
|
Projektowanie Stron
|
programowanie
copyright © 2008-2010 by
int24
Design. All Rights Reserved
