Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Bộ điều khiển định hướng
URL: https://www.javascriptbank.com/dropdown-navigation-controller.html
Nghe tên có lẽ bạn sẽ nghĩ rằng đoạn mã JavaScript này cực kì phức tạp về chức năng lẫn mã nguồn? Nếu bạn đang nghĩ như thế thì có thể tác giả đã làm bạn thất vọng rất nhiều, bởi bản thân đoạn mã không có gì là phức tạp và chức năng cũng vậy (jsB@nk nghĩ vậy); vấn đề chỉ là tên do tác giả đặt nên phải tuân theo.Hiệu ứng chỉ là hiển thị nội dung thông tin thêm dựa vào hành vi của người dùng với các sự kiện như rê con trỏ chuột và nhấn chuột để hiển thị khung chú thích ngay vị trí này. Bạn có thể xem hiệu ứng tương tự là Nội dung chồng lấn.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Bộ điều khiển định hướng
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>