MenuTab

From 2014.igem.org

(Difference between revisions)
 
(6 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 34: Line 15:
}
}
-
/* Establish font size and family for all text */
 
-
p {
 
-
font-family: "Arial", Helvetica, sans-serif;
 
-
font-size: 13px;
 
-
}
 
-
 
-
/*styling for the links*/
 
-
#rightColumn a, #featureBoxLeft a {
 
-
color:#3aa76c;
 
-
font-weight: bold;
 
-
text-decoration: none;
 
-
opacity: 1.0;
 
-
    filter: alpha(opacity=100); /* For IE8 and earlier */
 
-
}
 
-
 
-
#rightColumn a:hover, #featureBoxLeft a:hover {
 
-
    opacity: 0.4;
 
-
    filter: alpha(opacity=40); /* For IE8 and earlier */
 
-
}
 
-
 
-
#featureBoxLeft img {
 
-
margin:auto;
 
-
text-align: center;
 
-
display: block;
 
-
opacity: 1.0;
 
-
filter: alpha(opacity=100); /* For IE8 and earlier */
 
-
}
 
-
 
-
#featureBoxLeft img:hover {
 
-
opacity: 0.4;
 
-
filter: alpha(opacity=40); /* For IE8 and earlier */
 
-
}
 
-
 
-
 
-
.featureBoxButtons {
 
-
display: inline-block;
 
-
}
 
-
 
-
#featureBoxImage{
 
-
display: inline-block;
 
-
margin:auto;
 
-
 
-
 
-
}
 
-
 
-
.smallBlockRight img {
 
-
width:200px;
 
-
height: 116px;
 
-
padding-bottom: 5px;
 
-
opacity: 1.0;
 
-
filter: alpha(opacity=100); /* For IE8 and earlier */
 
-
}
 
-
 
-
 
-
.smallBlockRight img:hover {
 
-
opacity: 0.4;
 
-
filter: alpha(opacity=40); /* For IE8 and earlier */
 
-
}
 
-
 
-
 
-
 
-
/* menu styling */
 
#menuWrap {
#menuWrap {
background: #f9f9f9;
background: #f9f9f9;
padding: 5px 10px 10px 10px;
padding: 5px 10px 10px 10px;
 +
width: 215px;
}
}
Line 187: Line 107:
<!-- jquery -->
<!-- jquery -->
-
 
<script ="text/javascript">
<script ="text/javascript">
Line 197: 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 211: 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 232: Line 145:
}
}
});
});
-
 
return false;
return false;
});
});
-
 
</script>
</script>
-
 
<!-- end of jquery-->
<!-- end of jquery-->
-
<!-- template content -->
+
<!-- menu -->
-
<div id ="contentWrap">
+
-
+
-
+
-
<div id="leftColumn">
+
-
<!-- this is where the menu and feature box go -->
+
-
+
-
 
+
-
 
+
-
<div class="clear"></div>
+
-
 
+
-
 
+
<div id="menuWrap">  
<div id="menuWrap">  
<h4 class="collapseMenu">Expand All</h4>  
<h4 class="collapseMenu">Expand All</h4>  
Line 383: Line 282:
</ul>
</ul>
</div>
</div>
-
 
</div> <!-- this closes the menu div -->
</div> <!-- this closes the menu div -->
-
 
-
</div>
 
-
<div id="clear"></div>
 
-
 
-
</div> <!-- this closes the content wrap div -->
 
-
     
 
-
 
-
 
-
 
-
</div>
 
</html>
</html>

Latest revision as of 18:21, 15 January 2015

Retrieved from "http://2014.igem.org/MenuTab"