MenuTab

From 2014.igem.org

(Difference between revisions)
 
(2 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
 
-
 
-
<!-- Declare that you are going to use html code instead of wiki code -->
 
<html>
<html>
Line 10: Line 7:
<style type="text/css">
<style type="text/css">
-
/* Create layout divs */
+
/* menu styling */
-
 
+
-
#leftColumn {
+
-
background-color: #f9f9f9;
+
-
width: 215px;
+
-
height: 100%;
+
-
float: left;
+
-
padding: 15px 5px 5px 5px;
+
-
}
+
-
 
+
-
 
+
-
/* general styling */
+
-
 
+
/* Titles are switched to Arial Black with no line decoration */
/* Titles are switched to Arial Black with no line decoration */
-
h1, h2, h3, h4, h5 {  
+
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 30: Line 15:
}
}
-
 
-
/* menu styling */
 
#menuWrap {
#menuWrap {
background: #f9f9f9;
background: #f9f9f9;
Line 124: Line 107:
<!-- jquery -->
<!-- jquery -->
-
 
<script ="text/javascript">
<script ="text/javascript">
Line 134: 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 148: 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 169: Line 145:
}
}
});
});
-
 
return false;
return false;
});
});
-
 
</script>
</script>
-
 
<!-- end of jquery-->
<!-- end of jquery-->
-
<!-- template content -->
+
<!-- menu -->
-
<div id ="contentWrap">
+
-
+
<div id="menuWrap">  
<div id="menuWrap">  
<h4 class="collapseMenu">Expand All</h4>  
<h4 class="collapseMenu">Expand All</h4>  
Line 311: Line 282:
</ul>
</ul>
</div>
</div>
-
 
</div> <!-- this closes the menu div -->
</div> <!-- this closes the menu div -->
-
 
-
</div> <!-- this closes the content wrap div -->
 
-
     
 
-
 
-
 
-
 
-
</div>
 
</html>
</html>

Latest revision as of 18:21, 15 January 2015