Template:Http://2014.igem.org/Team:Colombia

From 2013.igem.org

(Difference between revisions)
Line 76: Line 76:
-
<div class="css3splitmenu">
 
-
<a href="http://www.dynamicdrive.com">Dynamic Drive</a> <input type="checkbox" />
 
-
<ul id="t">
 
-
<li><a href="http://www.dynamicdrive.com/new.htm">What's New</a></li>
 
-
<li><a href="http://www.dynamicdrive.com/revised.htm">Revised</a></li>
 
-
<li><a href="http://www.dynamicdrive.com/forums/">DD Forums</a></li>
 
-
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
 
-
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
 
-
<li><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></li>
 
-
<li><a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a></li>
 
-
</ul>
 
-
</div> 
 
-
<div class="css3splitmenu">
+
body
-
<a href="http://www.javascriptkit.com">JavaScript Kit</a> <input type="checkbox" />
+
{
-
<ul>
+
background: url(https://static.igem.org/mediawiki/2014/5/54/Fondo_iGEM.png) repeat;
-
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
+
background-color: #8A4117;
-
<li><a href="http://www.javascriptkit.com/">JS Tutorials</a></li>
+
}
-
<li><a href="http://www.javascriptkit.com/jsref/">JS Reference</a></li>
+
-
<li><a href="http://www.javascriptkit.com/howto/">Web Design Tutorials</a></li>
+
-
</ul>
+
-
</div> 
+
-
<div class="css3splitmenu nocss3splitmenu">
 
-
<a href="http://www.cssdrive.com">CSS Drive</a>
 
-
</div>
 
 +
body {
 +
  font: 65%/1.2 Arial, Helvetica, sans-serif;
 +
  background-color: #eee; }
 +
#wrap {
 +
  font-size: 1.1em;
 +
  width: 180px;
 +
  padding: 0px;
 +
  margin-left: 15px;
 +
  background-color: #fff;
 +
  position: relative;
 +
  height: 100%;
-
<!-- Script below should follow all split menus -->
+
margin-right: 20px;
 +
margin-bottom: 20px;
 +
margin-top: 10px;
 +
float: left;
-
<script type="text/javascript">
 
-
( function(){ // local scope
+
}
-
if (!document.querySelectorAll || !document.addEventListener)
+
.right_box{
-
return
+
width: 730px;
-
var uls = document.querySelectorAll('div.css3splitmenu > ul'),
+
margin-left: 210px;
-
docbody = document.documentElement || document.body,
+
margin-top: 20px;
-
checkboxes = document.querySelectorAll('div.css3splitmenu > input[type="checkbox"]'),
+
-
zindexvalue = 100
+
-
for (var z=0; z<uls.length; z++){
+
}
-
( function(x){ // closure to capture each i value
+
-
checkboxes[z].addEventListener('click', function(e){
+
-
uls[x].style.zIndex = ++zindexvalue
+
-
for (var y=0; y<uls.length; y++){ // loop through checkboxes other than current and uncheck them (since Chrome doesn't respond to onblur event on checkboxes)
+
-
if (y != x)
+
-
checkboxes[y].checked = false
+
-
}
+
-
e.cancelBubble = true
+
-
})
+
-
checkboxes[z].addEventListener('blur', function(e){
+
-
setTimeout(function(), 100) // delay before menu closes, for Opera's sake (otherwise links are un-navigatable)
+
-
e.cancelBubble = true
+
-
})
+
-
}) (i)
+
-
}
+
-
docbody.addEventListener('click', function(e){
 
-
for (var z=0; z<uls.length; z++){
 
-
checkboxes[z].checked = false
 
-
}
 
-
})
 
-
 
-
})();
 
-
 
-
 
-
</script>
 
-
 
-
 
-
 
-
body
 
-
{
 
-
 
-
background: url(https://static.igem.org/mediawiki/2014/5/54/Fondo_iGEM.png) repeat;
 
-
background-color:  #8A4117;
 
-
}
 

Revision as of 22:27, 20 August 2014