MenuTab
From 2014.igem.org
(Difference between revisions)
(7 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | |||
- | |||
- | |||
<html> | <html> | ||
Line 10: | Line 7: | ||
<style type="text/css"> | <style type="text/css"> | ||
- | /* | + | /* menu styling */ |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
/* Titles are switched to Arial Black with no line decoration */ | /* Titles are switched to Arial Black with no line decoration */ | ||
- | + | h3 { | |
font-family: "Arial", Gadget, sans-serif; border-bottom:none; | font-family: "Arial", Gadget, sans-serif; border-bottom:none; | ||
font-weight: bold; | font-weight: bold; | ||
Line 101: | Line 15: | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
#menuWrap { | #menuWrap { | ||
background: #f9f9f9; | background: #f9f9f9; | ||
padding: 5px 10px 10px 10px; | padding: 5px 10px 10px 10px; | ||
+ | width: 215px; | ||
} | } | ||
Line 254: | Line 107: | ||
<!-- jquery --> | <!-- jquery --> | ||
- | |||
<script ="text/javascript"> | <script ="text/javascript"> | ||
Line 264: | Line 116: | ||
var contentwidth = $('.accordion-header').width(); | var contentwidth = $('.accordion-header').width(); | ||
$('.accordion-content').css({'width' : contentwidth }); | $('.accordion-content').css({'width' : contentwidth }); | ||
- | |||
var checkIfActive = 0; | var checkIfActive = 0; | ||
Line 278: | Line 129: | ||
$('.accordion-header').next().slideToggle().toggleClass('open-content'); | $('.accordion-header').next().slideToggle().toggleClass('open-content'); | ||
$('.collapseMenu').html("Expand All"); | $('.collapseMenu').html("Expand All"); | ||
- | |||
- | |||
} | } | ||
- | |||
}); | }); | ||
- | |||
- | |||
// The Accordion Effect | // The Accordion Effect | ||
$('.accordion-header').click(function () { | $('.accordion-header').click(function () { | ||
Line 299: | Line 145: | ||
} | } | ||
}); | }); | ||
- | |||
return false; | return false; | ||
}); | }); | ||
- | |||
</script> | </script> | ||
- | |||
<!-- end of jquery--> | <!-- end of jquery--> | ||
- | <!-- | + | <!-- menu --> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
<div id="menuWrap"> | <div id="menuWrap"> | ||
<h4 class="collapseMenu">Expand All</h4> | <h4 class="collapseMenu">Expand All</h4> | ||
Line 450: | Line 282: | ||
</ul> | </ul> | ||
</div> | </div> | ||
- | |||
</div> <!-- this closes the menu div --> | </div> <!-- this closes the menu div --> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</html> | </html> |
Latest revision as of 18:21, 15 January 2015