Version complète: jsB@nk » Menu » Navigation » Dropdown Navigation Controller
URL: https://www.javascriptbank.com/dropdown-navigation-controller.html
Voir le nom, vous avez peut-être penser que ce Le code JavaScript avoir le code source de complexes et d'excellentes fonctionnalités? Si vous pensez comme ça, peut-être l'auteur vous a déçu, car ce code est assez simple, mais l'auteur donne le nom. Ce JavaScript crée un menu déroulant pour votre contenu sur la page, tels que menu de navigation, menu vertical ou d'un search form. Le contenu de lien vers menu déroulant est caché dans un conteneur et dynamiquement montré onMouseOver ou onClick. Voir aussi: Overlapping lien contenu si vous le souhaitez.
Version complète: jsB@nk » Menu » Navigation » Dropdown Navigation Controller
URL: https://www.javascriptbank.com/dropdown-navigation-controller.html
<STYLE type=text/css>#menu_parent {BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: black 1px solid; PADDING-LEFT: 2px; FONT-WEIGHT: bold; PADDING-BOTTOM: 1px; BORDER-LEFT: black 1px solid; WIDTH: 100px; PADDING-TOP: 1px; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #e6f3ff}#menu_child {BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; VISIBILITY: hidden; BORDER-LEFT: black 1px solid; WIDTH: 200px; BORDER-BOTTOM: black 0px solid; POSITION: absolute; BACKGROUND-COLOR: #e6f3ff}#menu_child A {PADDING-RIGHT: 2px; DISPLAY: block; PADDING-LEFT: 2px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; WIDTH: 98%; COLOR: navy; PADDING-TOP: 2px; BORDER-BOTTOM: black 1px solid; TEXT-DECORATION: none}#menu_child A:hover {BACKGROUND-COLOR: lightyellow}#src_parent {BORDER-RIGHT: blue 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: blue 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; BORDER-LEFT: blue 1px solid; WIDTH: 120px; PADDING-TOP: 1px; BORDER-BOTTOM: blue 1px solid; BACKGROUND-COLOR: #eaddff}#src_child {BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: black 1px solid; PADDING-LEFT: 5px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: black 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: black 1px solid; POSITION: absolute; BACKGROUND-COLOR: #eaddff}</STYLE><script type="text/javascript">// <script>// Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.// Technical support: http://www.php-development.ru/// This code featured on/availabe at Dynamic Drive code library: http://www.dynamicdrive.com//// YOU MAY NOT// (1) Remove or modify this copyright notice.// (2) Distribute this code, any part or any modified version of it.// Instead, you can link to the homepage of this code:// http://www.php-development.ru/javascripts/dropdown.php//// YOU MAY// (1) Use this code on your website.// (2) Use this code as a part of another product provided that// its main use is not creating javascript menus.//// NO WARRANTY// This code is provided "as is" without warranty of any kind, either// expressed or implied, including, but not limited to, the implied warranties// of merchantability and fitness for a particular purpose. You expressly// acknowledge and agree that use of this code is at your own risk.// If you find my script useful, you can support my site in the following ways:// 1. Vote for the script at HotScripts.com (you can do it on my site)// 2. Link to the homepage of this script or to the homepage of my site:// http://www.php-development.ru/javascripts/smart-forms.php// http://www.php-development.ru/// You will get 50% commission on all orders made by your referrals.// More information can be found here:// http://www.php-development.ru/affiliates.php// ----- Popup Control ---------------------------------------------------------function at_display(x){ win = window.open(); for (var i in x) win.document.write(i+' = '+x[i]+'<br>');}// ----- Show Aux -----function at_show_aux(parent, child){ var p = document.getElementById(parent); var c = document.getElementById(child); var top = (c["at_position"] == "y") ? p.offsetHeight+2 : 0; var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0; for (; p; p = p.offsetParent) { top += p.offsetTop; left += p.offsetLeft; } c.style.position = "absolute"; c.style.top = top +'px'; c.style.left = left+'px'; c.style.visibility = "visible";}// ----- Show -----function at_show(){ p = document.getElementById(this["at_parent"]); c = document.getElementById(this["at_child" ]); at_show_aux(p.id, c.id); clearTimeout(c["at_timeout"]);}// ----- Hide -----function at_hide(){ c = document.getElementById(this["at_child"]); c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);}// ----- Click -----function at_click(){ p = document.getElementById(this["at_parent"]); c = document.getElementById(this["at_child" ]); if (c.style.visibility != "visible") at_show_aux(p.id, c.id); else c.style.visibility = "hidden"; return false;}// ----- Attach -----// PARAMETERS:// parent - id of visible html element// child - id of invisible html element that will be dropdowned// showtype - "click" = you should click the parent to show/hide the child// "hover" = you should place the mouse over the parent to show// the child// position - "x" = the child is displayed to the right of the parent// "y" = the child is displayed below the parent// cursor - Omit to use default cursor or check any CSS manual for possible// values of this fieldfunction at_attach(parent, child, showtype, position, cursor){ p = document.getElementById(parent); c = document.getElementById(child); p["at_parent"] = p.id; c["at_parent"] = p.id; p["at_child"] = c.id; c["at_child"] = c.id; p["at_position"] = position; c["at_position"] = position; c.style.position = "absolute"; c.style.visibility = "hidden"; if (cursor != undefined) p.style.cursor = cursor; switch (showtype) { case "click": p.onclick = at_click; p.onmouseout = at_hide; c.onmouseover = at_show; c.onmouseout = at_hide; break; case "hover": p.onmouseover = at_show; p.onmouseout = at_hide; c.onmouseover = at_show; c.onmouseout = at_hide; break; }}</script><div id="menu_parent">Main Menu</div><div id="menu_child"><a href="#">Item 1</a><a href="#">Item 2</a><a href="#">Item 3</a></div><script type="text/javascript">at_attach("menu_parent", "menu_child", "hover", "y", "pointer");</script><br /><div id="src_parent">Site Search</div><form id="src_child"> <b>Enter search terms:</b> <br /> <input type="text" name="terms" size="35" /> <center> <input type="submit" value="Submit" /> </center></form><script type="text/javascript">at_attach("src_parent", "src_child", "click", "x", "pointer");</script><br /><br /><br /><div style="text-align: left; width: 70%;"><P align=left><B>Parameters for main function:</B> <DIV align=left><PRE>at_attach(parent, child, showtype, position, cursor)</PRE></DIV> <UL> <LI> <P align=left>parent - id of visible html element </P> <LI> <P align=left>child - id of invisible html element that will be dropdowned </P> <LI> <P align=left>showtype - "click" or "hover"- first value causes content to be shown onClick, and the second, onMouseover. </P> <LI> <P align=left>position - "x" or "y"- first value causes content to drop down and to the right, and the second, just down. </P> <LI> <P align=left>cursor: The CSS cursor to display for this control. <A href="/javascript/snippet/types-of-cursor/detail/" target=_blank>See here</A> for a list of valid CSS cursor values. </P></LI></UL></div>