Team:Columbia-Cooper-NYC/trial2

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<html>
<head>
<head>
 +
<title>Simple JavaScript Drop Down Menu with timeout effect v2.0 &laquo; JavaScript DHTML Tutorials</title>
 +
<meta name="keywords" content="" />
 +
<meta name="description" content="" />
 +
<link rel="alternate" type="application/rss+xml" title="JavaScript DHTML Tutorials" href="http://feeds.feedburner.com/JavascriptDhtmlTutorials" />
 +
<meta property="og:image" content="http://javascript-array.com/_img/img0.jpg" />
 +
<link rel="stylesheet" type="text/css" href="/_css/default.css" />
 +
 +
<!-- Syntax Highlighter -->
 +
<link rel="stylesheet" type="text/css" href="/_js/highlight/sample.css" />
 +
<script type="text/javascript" src="/_js/highlight/highlight.js"></script>
 +
<script type="text/javascript">initHighlightingOnLoad('html', 'css', 'javascript');</script>
 +
<!-- /Syntax Highlighter -->
 +
 +
<script type="text/javascript">
 +
  var _gaq = _gaq || [];
 +
  _gaq.push(['_setAccount', 'UA-336172-4']);
 +
  _gaq.push(['_trackPageview']);
 +
 +
  (function() {
 +
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 +
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 +
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 +
  })();
 +
</script>
 +
 +
</head>
<body>
<body>
 +
 +
<div id="all">
 +
<!-- top -->
 +
<div id="top">
 +
<img src="/_img/img0.jpg" width="750" height="84" border="0" alt="JavaScript Array" title="JavaScript Array. Incredible things on web page">
 +
</div>
 +
<!-- /top -->
 +
 +
<!-- topmenu -->
 +
<div id="topmenu"><ul><li><a href="/">Home</a></li><li><a href="/stuff/">All Stuff</a></li><li><a href="/resources/">Resources</a></li><li><a href="/contact/">Contact</a></li></ul></div>
 +
<!-- /topmenu -->
 +
 +
<!-- body -->
 +
<div id="center">
 +
 +
<div id="leftcol">
 +
<div id="path"><a href="/">Home</a> &raquo; <a href="/scripts/">Scripts and Tricks</a> &raquo; Drop Down Menu</div>
 +
<h1>Simple Javascript Drop-Down Menu v2.0</h1>
 +
 +
<p>It is a One Level Menu with Timeout effect.</p>
 +
 +
<p>If you are looking for advanced script, see the <a href="/scripts/multi_level_drop_down_menu/?st">Multi-Level Drop-Down Menu</a> based on simple treelike unordered list.</p>
 +
 +
<p>Internet has a lot of scripts with the name "Drop Down Menu". One day I needed to make such menu for my site. I have rummaged a heap of sites and archives with scripts. And not found what I looked for. On the Net scripts shared on two variants. The first - utterly worthless scripts. The second - too complex heap up and chargeable.</p>
 +
 +
<p>And I just wrote this simple script:</p>
 +
 +
<h2>Sample</h2>
 +
 +
<p>This menu can be located anywhere on the page:
 +
<!-- dd menu -->
<!-- dd menu -->
<script type="text/javascript">
<script type="text/javascript">
Line 144: Line 203:
<!-- /span></div -->
<!-- /span></div -->
<!-- /dd -->
<!-- /dd -->
 +
 +
<h2>HTML Code</h2>
 +
 +
<p>HTML code is very simple and without tables. It used unordered list for menu items and hidden layers near own parent items.</p>
 +
 +
<p>Parent items and hidden layers have unique identifiers. Also these have event handlers <span class="handler">onmouseover</span> and <span class="handler">onmouseout</span>:</p>
 +
 +
<pre><code class="html">&lt;ul id="sddm"&gt;
 +
    &lt;li&gt;&lt;a href="#"
 +
        onmouseover="mopen('m1')"
 +
        onmouseout="mclosetime()"&gt;Home&lt;/a&gt;
 +
        &lt;div id="m1"
 +
            onmouseover="mcancelclosetime()"
 +
            onmouseout="mclosetime()"&gt;
 +
        &lt;a href="#"&gt;HTML/CSS&lt;/a&gt;
 +
        &lt;a href="#"&gt;DHTML Menu&lt;/a&gt;
 +
        &lt;a href="#"&gt;JavaScript&lt;/a&gt;
 +
        &lt;/div&gt;
 +
    &lt;/li&gt;
 +
    &lt;li&gt;&lt;a href="#"
 +
        onmouseover="mopen('m2')"
 +
        onmouseout="mclosetime()"&gt;Download&lt;/a&gt;
 +
        &lt;div id="m2"
 +
            onmouseover="mcancelclosetime()"
 +
            onmouseout="mclosetime()"&gt;
 +
        &lt;a href="#"&gt;ASP Server-side&lt;/a&gt;
 +
        &lt;a href="#"&gt;Pulldown navigation&lt;/a&gt;
 +
        &lt;a href="#"&gt;AJAX Drop Submenu&lt;/a&gt;
 +
        &lt;a href="#"&gt;DIV Cascading &lt;/a&gt;
 +
        &lt;/div&gt;
 +
    &lt;/li&gt;
 +
    &lt;li&gt;&lt;a href="#"&gt;Order&lt;/a&gt;&lt;/li&gt;
 +
    &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
 +
    &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
 +
&lt;/ul&gt;
 +
&lt;div style="clear:both"&gt;&lt;/div&gt;
 +
</code></pre>
 +
 +
 +
<h2>CSS Code</h2>
 +
 +
<p>&lt;li&gt; tag have <span class="handler">loat: left;</span> declaration. sumbmenu layer have <span class="handler">visibility: hidden;</span> and <span class="handler">position: absolute;</span>. Anchor tag set to  <span class="handler">display: block;</span></p>
 +
<p>Everything else is usual decoration:</p>
 +
 +
<pre><code class="css">#sddm
 +
{ margin: 0;
 +
padding: 0;
 +
z-index: 30}
 +
 +
#sddm li
 +
{ margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
float: left;
 +
font: bold 11px arial}
 +
 +
#sddm li a
 +
{ display: block;
 +
margin: 0 1px 0 0;
 +
padding: 4px 10px;
 +
width: 60px;
 +
background: #5970B2;
 +
color: #FFF;
 +
text-align: center;
 +
text-decoration: none}
 +
 +
#sddm li a:hover
 +
{ background: #49A3FF}
 +
 +
#sddm div
 +
{ position: absolute;
 +
visibility: hidden;
 +
margin: 0;
 +
padding: 0;
 +
background: #EAEBD8;
 +
border: 1px solid #5970B2}
 +
 +
#sddm div a
 +
{ position: relative;
 +
display: block;
 +
margin: 0;
 +
padding: 5px 10px;
 +
width: auto;
 +
white-space: nowrap;
 +
text-align: left;
 +
text-decoration: none;
 +
background: #EAEBD8;
 +
color: #2875DE;
 +
font: 11px arial}
 +
 +
#sddm div a:hover
 +
{ background: #49A3FF;
 +
color: #FFF}
 +
</code></pre>
 +
 +
<h2>JavaScript Code</h2>
 +
 +
<p>Insert this code between your &lt;head&gt;&lt;/head&gt; tags. Look to the code for the comments:
 +
 +
<pre><code class="javascript">// Copyright 2006-2007 javascript-array.com
 +
 +
var timeout = 500;
 +
var closetimer = 0;
 +
var ddmenuitem = 0;
 +
 +
// open hidden layer
 +
function mopen(id)
 +
{
 +
// cancel close timer
 +
mcancelclosetime();
 +
 +
// close old layer
 +
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 +
 +
// get new layer and show it
 +
ddmenuitem = document.getElementById(id);
 +
ddmenuitem.style.visibility = 'visible';
 +
 +
}
 +
// close showed layer
 +
function mclose()
 +
{
 +
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 +
}
 +
 +
// go close timer
 +
function mclosetime()
 +
{
 +
closetimer = window.setTimeout(mclose, timeout);
 +
}
 +
 +
// cancel close timer
 +
function mcancelclosetime()
 +
{
 +
if(closetimer)
 +
{
 +
window.clearTimeout(closetimer);
 +
closetimer = null;
 +
}
 +
}
 +
 +
// close layer when click-out
 +
document.onclick = mclose;
 +
</code></pre>
 +
 +
<p>That’s it! All you have to do now is add some hover styles and make it your own. Enjoy! <img src="/_img/dance.gif" width="29" height="21" border="0" alt="" align="absmiddle" style="display:inline"></p>
 +
 +
<p>If you want to use this script on your page, please place link to http://javascript-array.com at one of your pages.</p>
 +
 +
<p>Looking for Multi-Level Menu? See the <a href="/scripts/multi_level_drop_down_menu/?sb">Multi-Level Drop-Down Menu</a>.</p>
 +
 +
<div class="download">
 +
<a href="/data/scripts/simple_drop_down_menu/dropdownmenu.zip">Download&nbsp;Drop-Down&nbsp;Menu&nbsp;Sample</a>
 +
</div>
 +
 +
<div class="likebuttons">
 +
 +
<div id="fb-root"></div>
 +
<script>(function(d, s, id) {
 +
  var js, fjs = d.getElementsByTagName(s)[0];
 +
  if (d.getElementById(id)) {return;}
 +
  js = d.createElement(s); js.id = id;
 +
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 +
  fjs.parentNode.insertBefore(js, fjs);
 +
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-like" data-href="http://javascript-array.com/scripts/simple_drop_down_menu/" data-send="true" data-width="370" data-show-faces="false"></div>
 +
 +
<!-- Place this tag where you want the +1 button to render -->
 +
<g:plusone annotation="inline" width="400"></g:plusone>
 +
 +
<!-- Place this render call where appropriate -->
 +
<script type="text/javascript">
 +
  (function() {
 +
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
 +
po.src = 'https://apis.google.com/js/plusone.js';
 +
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 +
  })();
 +
</script>
 +
 +
<!-- a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script -->
 +
 +
</div>
 +
 +
<br>
 +
 +
<p style="margin: 20px 0 0 20px">
 +
 +
<script type="text/javascript"><!--
 +
google_ad_client = "ca-pub-8197335028214110";
 +
/* ja bot 1 */
 +
google_ad_slot = "2939764204";
 +
google_ad_width = 200;
 +
google_ad_height = 200;
 +
//-->
</script>
</script>
 +
<script type="text/javascript"
 +
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
 +
</script>
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 +
<script type="text/javascript"><!--
 +
google_ad_client = "ca-pub-8197335028214110";
 +
/* ja bot 2 */
 +
google_ad_slot = "7826597586";
 +
google_ad_width = 200;
 +
google_ad_height = 200;
 +
//-->
 +
</script>
 +
<script type="text/javascript"
 +
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
 +
</script>
 +
 +
</p>
 +
 +
<br><br><br><br><br><br><br><br>
 +
 +
<meta property="og:title" content="" />
 +
<meta property="og:type" content="article" />
 +
<meta property="og:url" content="http://javascript-array.com/scripts/simple_drop_down_menu/" />
 +
 +
<meta property="og:site_name" content="" /> </div>
 +
 +
<div id="rightcol">
 +
 +
<div class="menuhdr">Scripts and Tricks:</div>
 +
 +
<ul><li><a href="/scripts/jquery_simple_drop_down_menu/">jQuery Drop Down Menu</a></li><li><a href="/scripts/simple_rollover_button/">Correct RollOver Button</a></li><li><a href="/scripts/window_open/">window.open script</a></li><li><a href="/scripts/universal_getobj_function/">Universal GetObj Function</a></li><li><a href="/scripts/onclick_select_all_text_in_field/">Onclick Highlight Text</a></li><li><a href="/scripts/multi_level_drop_down_menu/">Multi-Level Drop Down Menu</a></li><li>Drop Down Menu</li></ul>
 +
 +
<!-- rss feed -->
 +
<a href="http://feeds.feedburner.com/JavascriptDhtmlTutorials"
 +
onmouseover = "document.getElementById('rssbutton').style.color = '#09008E';"
 +
onmouseout  = "document.getElementById('rssbutton').style.color = '#639DEB';">
 +
<div style="margin: 30px 10px 20px 25px;
 +
color:#639DEB;
 +
font: 0.8em trebuchet ms, georgia, tahoma, sans-serif;
 +
text-decoration: underline;" id="rssbutton">
 +
<img src="/_img/rss_icon16.PNG" with="16" height="16" border="0" style="float:left;margin:1px 7px" /> Subscribe
 +
</div></a>
 +
<!-- rss feed -->
 +
 +
<!-- buttons -->
 +
<div style="margin: 0px 0px 25px 32px">
 +
<div id="fb-root"></div>
 +
<script>(function(d, s, id) {
 +
  var js, fjs = d.getElementsByTagName(s)[0];
 +
  if (d.getElementById(id)) {return;}
 +
  js = d.createElement(s); js.id = id;
 +
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 +
  fjs.parentNode.insertBefore(js, fjs);
 +
}(document, 'script', 'facebook-jssdk'));</script>
 +
<div class="fb-like" data-href="http://javascript-array.com/" data-send="true" data-layout="button_count" data-width="150" data-show-faces="true"
 +
style="margin-bottom:5px"></div><br>
 +
 +
<!-- Place this tag where you want the +1 button to render -->
 +
<g:plusone size="medium" annotation="inline" width="150"></g:plusone>
 +
<!-- Place this render call where appropriate -->
 +
<script type="text/javascript">
 +
  (function() {
 +
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
 +
po.src = 'https://apis.google.com/js/plusone.js';
 +
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 +
  })();
 +
</script>
 +
</div>
 +
<!-- /buttons -->
 +
 +
 +
<div class="menuhdr">Guides and Tutorials:</div>
 +
<ul><li><a href="/guides/javascript_faq/">JavaScript FAQ</a></li></ul>
 +
 +
</div>
 +
 +
<div class="clear"></div>
 +
 +
</div>
 +
<!-- body -->
 +
 +
<!-- bottom -->
 +
<div id="bottom">&copy; 2006-2011 Javascript-Array.com</div>
 +
<!-- /bottom -->
 +
 +
</div>
 +
</body>
</body>
-
</head>
+
</html>

Revision as of 22:00, 16 August 2012

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Simple JavaScript Drop Down Menu with timeout effect v2.0 « JavaScript DHTML Tutorials

JavaScript Array
Home » Scripts and Tricks » Drop Down Menu

Simple Javascript Drop-Down Menu v2.0

It is a One Level Menu with Timeout effect.

If you are looking for advanced script, see the Multi-Level Drop-Down Menu based on simple treelike unordered list.

Internet has a lot of scripts with the name "Drop Down Menu". One day I needed to make such menu for my site. I have rummaged a heap of sites and archives with scripts. And not found what I looked for. On the Net scripts shared on two variants. The first - utterly worthless scripts. The second - too complex heap up and chargeable.

And I just wrote this simple script:

Sample

This menu can be located anywhere on the page:

HTML Code

HTML code is very simple and without tables. It used unordered list for menu items and hidden layers near own parent items.

Parent items and hidden layers have unique identifiers. Also these have event handlers onmouseover and onmouseout:

<ul id="sddm">
    <li><a href="#" 
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Home</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">HTML/CSS</a>
        <a href="#">DHTML Menu</a>
        <a href="#">JavaScript</a>
        </div>
    </li>
    <li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Download</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">ASP Server-side</a>
        <a href="#">Pulldown navigation</a>
        <a href="#">AJAX Drop Submenu</a>
        <a href="#">DIV Cascading </a>
        </div>
    </li>
    <li><a href="#">Order</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

CSS Code

<li> tag have loat: left; declaration. sumbmenu layer have visibility: hidden; and position: absolute;. Anchor tag set to display: block;

Everything else is usual decoration:

#sddm
{	margin: 0;
	padding: 0;
	z-index: 30}

#sddm li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 11px arial}

#sddm li a
{	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 60px;
	background: #5970B2;
	color: #FFF;
	text-align: center;
	text-decoration: none}

#sddm li a:hover
{	background: #49A3FF}

#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #EAEBD8;
	border: 1px solid #5970B2}

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #EAEBD8;
		color: #2875DE;
		font: 11px arial}

	#sddm div a:hover
	{	background: #49A3FF;
		color: #FFF}

JavaScript Code

Insert this code between your <head></head> tags. Look to the code for the comments:

// Copyright 2006-2007 javascript-array.com

var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose; 

That’s it! All you have to do now is add some hover styles and make it your own. Enjoy!

If you want to use this script on your page, please place link to http://javascript-array.com at one of your pages.

Looking for Multi-Level Menu? See the Multi-Level Drop-Down Menu.


      









Subscribe

© 2006-2011 Javascript-Array.com