Team:GeorgiaState/Test

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html><head>
+
/* Credits: Stu Nicholls */
-
<title>CSS DropDown Menu without JavaScript, PureCSS, Rollover</title>
+
/* URL: http://www.stunicholls.com/menu/pro_drop_1/stuHover.js */
-
<style type="text/css">
+
-
body { padding: 3em; }
+
-
#cssm1 *  { padding:0; margin: 0; font: 1em arial; }
+
stuHover = function() {
-
 
+
var cssRule;
-
#cssm1 { position: absolute;  z-index: 99; margin: 0 auto; float: left; line-height: 20px; }
+
var newSelector;
-
 
+
for (var i = 0; i < document.styleSheets.length; i++)
-
#cssm1 a { display: block; border: 1px solid #fff; background: #abc; text-decoration: none; padding: 3px 10px; }
+
for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
-
#cssm1 a:hover { background: #789; }
+
{
-
 
+
cssRule = document.styleSheets[i].rules[x];
-
 
+
if (cssRule.selectorText.indexOf("LI:hover") >= 0)
-
#cssm1 ul li, #cssm1 ul li ul li  { width: 120px; list-style-type:none; }
+
{
-
 
+
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
-
#cssm1 ul li { float: left; width: 120px; }
+
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
-
 
+
}
-
#cssm1 ul li ul, #cssm1:hover ul li ul, #cssm1:hover ul li:hover ul li ul{  
+
}
-
display:none;
+
var getElm = document.getElementById("nav").getElementsByTagName("LI");
-
list-style-type:none;  
+
for (var i=0; i<getElm.length; i++) {
-
width: 120px;
+
getElm[i].onmouseover=function() {
 +
this.className+=" iehover";
 +
}
 +
getElm[i].onmouseout=function() {
 +
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
 +
}
}
}
-
 
+
}
-
#cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul {
+
if (window.attachEvent) window.attachEvent("onload", stuHover);
-
display:block;
+
-
}
+
-
 
+
-
#cssm1:hover ul li:hover ul li:hover ul {
+
-
position: absolute;
+
-
margin-left: 120px;
+
-
margin-top: -20px;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
 
+
-
</style>
+
-
 
+
-
</head><body>
+
-
<div>
+
-
<h1>CSS DropDown/Rollover Menu without Javascript</h1>
+
-
</div>
+
-
 
+
-
<div id="cssm1">
+
-
<ul>
+
-
<li><a href="http://www.cafewebmaster.com">Home</a></li>
+
-
<li><a href="#">Design &nbsp; &nbsp; &#187;</a>
+
-
<ul>
+
-
<li><a href="#">Graphics</a></li>
+
-
<li><a href="#">Themes &nbsp; &nbsp; &#187;</a>
+
-
<ul>
+
-
<li><a href="#">Joomla</a>
+
-
<li><a href="#">Drupal</a>
+
-
<li><a href="#">Wordpress</a>
+
-
</ul>
+
-
</li>
+
-
</ul>
+
-
+
-
</li>
+
-
<li><a href="#">Download</a></li>
+
-
<li><a href="#">Menus &nbsp; &nbsp;  &#187;</a>
+
-
<ul>
+
-
<li><a href="#">Javascript</a></li>
+
-
<li><a href="#">CSS &nbsp; &nbsp; &#187;</a>
+
-
<ul>
+
-
<li><a href="#">Left Menu</a>
+
-
<li><a href="#">DropDown</a>
+
-
<li><a href="#">...</a>
+
-
</ul>
+
-
</li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="#">Contact</a></li>
+
-
<li><a href="#">...</a></li>
+
-
+
-
</ul>
+
-
</div>
+
-
</body></html>
+

Revision as of 14:36, 13 September 2012

/* Credits: Stu Nicholls */ /* URL: http://www.stunicholls.com/menu/pro_drop_1/stuHover.js */

stuHover = function() { var cssRule; var newSelector; for (var i = 0; i < document.styleSheets.length; i++) for (var x = 0; x < document.styleSheets[i].rules.length ; x++) { cssRule = document.styleSheets[i].rules[x]; if (cssRule.selectorText.indexOf("LI:hover") >= 0) { newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover"); document.styleSheets[i].addRule(newSelector , cssRule.style.cssText); } } var getElm = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<getElm.length; i++) { getElm[i].onmouseover=function() { this.className+=" iehover"; } getElm[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" iehover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", stuHover);

Retrieved from "http://2012.igem.org/Team:GeorgiaState/Test"