« »

See the name, maybe you think that this JavaScript code have the complex source code and excellent features? If you are thinking like that, maybe author has disappointed you because this code is quite simple, but author give the name.

This JavaScript creates a drop down control for your content on the page, such as navigation menu, menu vertical or a search form. The content link to drop down is simply hidden in a container and dynamically shown onClick or onMouseover. See also: Overlapping content link if you want.

Label: dropdown, navigation, controller, complex, excellent, feature, container

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<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>

Copy All x2

<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 field

function 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>

Copy All x2

<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>