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 203: Line 144:
<!-- /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>
-
</html>
+
</head>

Revision as of 22:00, 16 August 2012