Template:Http://2014.igem.org/Team:Colombia
From 2013.igem.org
(Difference between revisions)
Line 74: | Line 74: | ||
display:none; | display:none; | ||
} | } | ||
+ | |||
+ | |||
+ | <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"> | ||
+ | <a href="http://www.javascriptkit.com">JavaScript Kit</a> <input type="checkbox" /> | ||
+ | |||
+ | <ul> | ||
+ | <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li> | ||
+ | <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> | ||
+ | |||
+ | |||
+ | <!-- Script below should follow all split menus --> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | |||
+ | ( function(){ // local scope | ||
+ | |||
+ | if (!document.querySelectorAll || !document.addEventListener) | ||
+ | return | ||
+ | var uls = document.querySelectorAll('div.css3splitmenu > ul'), | ||
+ | docbody = document.documentElement || document.body, | ||
+ | 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> | ||
+ | |||
Revision as of 22:24, 20 August 2014