MenuTab

From 2014.igem.org

(Difference between revisions)
(Created page with "<html> <!-- Declare that you are going to use html code instead of wiki code --> <html> <!-- The styling for the website is placed here --> <head> <!-- start of css --> ...")
 
(9 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 9: Line 6:
<!-- start of css -->
<!-- start of css -->
<style type="text/css">
<style type="text/css">
-
 
-
/* Clear the default wiki settings */
 
-
 
-
/* Remove footer, catlinks and logos */
 
-
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading {
 
-
display: none;
 
-
}
 
-
 
-
/* set up a white background */
 
-
body {
 
-
width: 100%;
 
-
height: 100%;
 
-
background-color: #fff;
 
-
}
 
-
 
-
/*-- Make page full width and remove borders */
 
-
#globalWrapper, #content {
 
-
width: 100%;
 
-
height: 100%;
 
-
border: 0px;
 
-
background-color: transparent;
 
-
margin: 0px;
 
-
padding: 0px;
 
-
}
 
-
 
-
 
-
/*Clear wiki default settings for the top part and create mock "black navigation bar" */
 
-
#top-section {
 
-
background-color: #383838;
 
-
border: 0 none;
 
-
height: 14px;
 
-
z-index: 100;
 
-
top: 0;
 
-
position: fixed;
 
-
width: 100%;
 
-
margin:auto;
 
-
}
 
-
 
-
 
-
/* Create layout divs */
 
-
 
-
/* General content wrap */
 
-
#contentWrap { 
 
-
width: 975px;
 
-
height: auto;
 
-
margin-left: auto;
 
-
margin-right: auto;
 
-
padding-top: 5px;
 
-
}
 
-
 
-
#fullWidthBanner {
 
-
margin:auto;
 
-
width: 975px;
 
-
}
 
-
 
-
#leftColumn {
 
-
background-color: #f9f9f9;
 
-
width: 215px;
 
-
height: 100%;
 
-
float: left;
 
-
padding: 15px 5px 5px 5px;
 
-
}
 
-
 
-
#rightColumn {
 
-
background-color: #fff;
 
-
width: 740px;
 
-
height: 100%;
 
-
padding: 5px 5px 5px 5px;
 
-
float: left;
 
-
}
 
-
 
-
#featureBoxLeft {
 
-
background-color: #ffffff;
 
-
padding: 5px 10px 5px 10px;
 
-
border: 1px solid #cccccc;
 
-
border-radius: 5px;
 
-
margin:auto;
 
-
text-align: center;
 
-
}
 
-
 
-
 
-
.fullWidthRight {
 
-
background-color: #ffffff;
 
-
padding: 5px 10px 10px 10px;
 
-
margin-bottom: 5px;
 
-
}
 
-
 
-
 
-
.smallBlockRight{
 
-
margin-bottom: 5px;
 
-
padding: 5px 20px 10px 20px;
 
-
width : 200px;
 
-
float: left;
 
-
}
 
-
 
-
.newsItem {
 
-
background-color: #f9f9f9;
 
-
padding: 5px 20px 5px 20px;
 
-
border: 1px solid #cccccc;
 
-
margin-bottom: 5px;
 
-
border-radius: 5px;
 
-
}
 
-
 
-
.newsDate {
 
-
font-style: italic;
 
-
display: inline-block;
 
-
color: #383838;
 
-
float: right;
 
-
padding: 7px 0px 10px 15px;
 
-
}
 
-
 
-
.clear {
 
-
    clear: both;
 
-
}
 
-
 
-
        .button {
 
-
    width: 120px;
 
-
    border: 1px solid #cccccc;
 
-
    background-color: fff;
 
-
    height: 30px;
 
-
    text-align: center;
 
-
        border-radius: 5px;
 
-
        padding-top: 10px;
 
-
        margin: auto;
 
-
    }       
 
-
 
-
    .button:hover {
 
-
    background-color: #c1dfa6;
 
-
    }
 
-
 
-
 
-
/* general styling */
 
 +
/* menu 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 149: 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 302: Line 107:
<!-- jquery -->
<!-- jquery -->
-
 
<script ="text/javascript">
<script ="text/javascript">
Line 312: 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 326: 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 347: 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 498: 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