Template:Team:MSOE

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<HTML>
<HTML>
<HEAD>
<HEAD>
-
<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.css" />
+
<link rel="stylesheet" type="text/css" href="ddmegamenu.css" />
-
<script src="http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.js" type="text/javascript">
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
 +
 
 +
<script src="ddmegamenu.js">
/***********************************************
/***********************************************
-
* Mouseover Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
+
* DD Mega Menu (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* This notice MUST stay intact for legal use
-
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
+
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
***********************************************/
 +
 +
</script>
 +
 +
<script>
 +
 +
ddmegamenu.docinit({
 +
menuid:'solidmenu',
 +
dur:200 //<--no comma after last setting
 +
})
 +
 +
 +
ddmegamenu.docinit({
 +
menuid:'megaanchorlink',
 +
dur:500,
 +
easing:'easeInOutCirc' //<--no comma after last setting
 +
})
</script>
</script>
</HEAD>
</HEAD>
<BODY>
<BODY>
-
<div id="mytabsmenu" class="tabsmenuclass">
+
<h2>Example 1</h2>
-
<ul>
+
 
-
<li><a href="http://www.javascriptkit.com" rel="gotsubmenu[selected]">JavaScript Kit</a></li>
+
<ul id="solidmenu" class="solidblockmenu">
-
<li><a href="http://www.cssdrive.com" rel="gotsubmenu">CSS Drive</a></li>
+
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
-
<li><a href="http://www.codingforums.com">No Sub Menu</a></li>
+
<li><a href="http://www.javascriptkit.com" rel="jkmenu">JavaScript v</a></li>
 +
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
 +
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
 +
<li><a href="http://www.cssdrive.com" rel="cssdrivemenu[left]">CSS Drive v</a></li>
</ul>
</ul>
-
</div>
 
-
<div id="mysubmenuarea" class="tabsmenucontentclass">
+
<!--First mega menu (1) -->
 +
<div id="jkmenu" class="mega solidblocktheme">
 +
 +
<p style="margin:5px 0 10px 0"><b>Visit the following main content areas of JavaScript Kit:</b></p>
 +
 +
<div class="column">
 +
<ul>
 +
<li><a href="http://www.javascriptkit.com"  rel="freescripts">Free JavaScripts</a></li>
 +
<li><a href="http://www.javascriptkit.com">JavaScript Tutorials</a></li>
 +
<li><a href="http://www.javascriptkit.com">Free Java Applets</a></li>
 +
</ul>
 +
</div>
 +
<div class="column">
 +
<ul>
 +
<li><a href="http://www.javascriptkit.com">JavaScript Tutorials</a></li>
 +
<li><a href="http://www.javascriptkit.com">DHTML Tutorials</a></li>
 +
<li><a href="http://www.javascriptkit.com">Web Design Tutorials</a></li>
 +
</ul>
 +
</div>
 +
<br style="clear:left" />
 +
<p>Need help with JavaScript? <a href="http://www.codingforums.com">Coding Forums</a> should be your next stop!</p>
-
<div class="tabsmenucontent">
 
-
<ul>
 
-
<li><a href="http://www.javascriptkit.com">Home</a></li>
 
-
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a></li>
 
-
<li><a href="http://www.javascriptkit.com/javatutors/">JS Tutorials</a></li>
 
-
<li><a href="http://www.javascriptkit.com/jsref/">JS Reference</a></li>
 
-
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
 
-
<li><a href="http://www.javascriptkit.com/java/">Applets</a></li>
 
-
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
 
-
</ul>
 
</div>
</div>
-
<div class="tabsmenucontent">
+
<!--Second mega menu (1.1) -->
-
<ul>
+
 
-
<li><a href="http://www.cssdrive.com">Gallery</a></li>
+
<div id="freescripts" class="mega solidblocktheme" style="width:150px">
-
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Designs</a></li>
+
<ul class="ulmenu">
-
<li><a href="http://www.cssdrive.com/index.php/news/">News</a></li>
+
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScript Clocks</a></li>
-
<li><a href="http://www.cssdrive.com/index.php/examples/">Examples</a></li>
+
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScript Scrollers</a></li>
-
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">Compressor</a></li>
+
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Text Effects</a></li>
-
<li><a href="http://www.cssdrive.com/index.php/forums/">Forums</a></li>
+
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Password Protecting</a></li>
-
<li><a href="http://www.cssdrive.com/index.php/main/submit/">Submit</a></li>
+
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Form Validation</a></li>
-
<li><a href="http://www.cssdrive.com/index.php/search/">Search</a></li>
+
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Ajax Scripts</a></li>
-
</ul>
+
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Image Effects</a></li>
 +
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Link Effects</a></li>
 +
</ul>
</div>
</div>
-
<br style="clear:left" />
+
 
 +
<!--Forth mega menu (2) -->
 +
 
 +
<div id="cssdrivemenu" class="mega solidblocktheme">
 +
 
 +
<p style="margin-top:10px">Looking for web design inspiration? CSS Drive showcases some of the most attractive, CSS driven sites on the net.</p>
 +
 
 +
<div class="column">
 +
<ul>
 +
<li><a href="http://www.cssdrive.com/">Gallery</a></li>
 +
<li><a href="http://www.cssdrive.com/">CSS Menus</a></li>
 +
<li><a href="http://www.cssdrive.com/">CSS Examples</a></li>
 +
</ul>
 +
</div>
 +
<div class="column">
 +
<ul>
 +
<li><a href="http://www.cssdrive.com/">Design News</a></li>
 +
<li><a href="http://www.cssdrive.com/">Design Resources</a></li>
 +
<li><a href="http://www.cssdrive.com/">Design Tools</a></li>
 +
</ul>
 +
</div>
 +
 
</div>
</div>
-
<script type="text/javascript">
+
<br />
-
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
+
-
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)
+
-
</script>
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<h2>Example 2</h2>
 +
 
 +
 
 +
 
 +
<a id="megaanchorlink" href="http://www.javascriptkit.com" rel="megacontent">JavaScript Kit</a>
 +
 
 +
<!--First mega menu (1) -->
 +
 
 +
<div id="megacontent" class="mega">
 +
 
 +
<p style="margin:5px 0 10px 0"><b>Visit the following main content areas of JavaScript Kit:</b></p>
 +
 
 +
<div class="column">
 +
<ul>
 +
<li><a href="http://www.javascriptkit.com"  rel="megasubcontent">Free JavaScripts</a></li>
 +
<li><a href="http://www.javascriptkit.com">JavaScript Tutorials</a></li>
 +
<li><a href="http://www.javascriptkit.com">Free Java Applets</a></li>
 +
</ul>
 +
</div>
 +
<div class="column">
 +
<ul>
 +
<li><a href="http://www.javascriptkit.com">JavaScript Tutorials</a></li>
 +
<li><a href="http://www.javascriptkit.com">DHTML Tutorials</a></li>
 +
<li><a href="http://www.javascriptkit.com">Web Design Tutorials</a></li>
 +
</ul>
 +
</div>
 +
<br style="clear:left" />
 +
<p>Need help with JavaScript? <a href="http://www.codingforums.com">Coding Forums</a> should be your next stop!</p>
 +
 
 +
</div>
 +
 
 +
<!--Second mega menu (1.1) -->
 +
 
 +
<div id="megasubcontent" class="mega" style="width:150px">
 +
<ul class="ulmenu">
 +
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScript Clocks</a></li>
 +
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScript Scrollers</a></li>
 +
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Text Effects</a></li>
 +
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Password Protecting</a></li>
 +
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Form Validation</a></li>
 +
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Ajax Scripts</a></li>
 +
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Image Effects</a></li>
 +
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Link Effects</a></li>
 +
</ul>
 +
</div>
</BODY>
</BODY>
</HTML>
</HTML>

Revision as of 19:13, 18 June 2013

Example 1

Visit the following main content areas of JavaScript Kit:


Need help with JavaScript? Coding Forums should be your next stop!

Looking for web design inspiration? CSS Drive showcases some of the most attractive, CSS driven sites on the net.


Example 2

JavaScript Kit

Visit the following main content areas of JavaScript Kit:


Need help with JavaScript? Coding Forums should be your next stop!

Retrieved from "http://2013.igem.org/Template:Team:MSOE"