Difference between revisions of "Template:SCUT-China"

(Prototype team template page)
 
Line 119: Line 119:
  
 
/*MENU STYLING */
 
/*MENU STYLING */
 +
@charset "utf-8";
 +
/* CSS Document */
  
−
/*Styling for the links in the menu */
+
*{
−
#menuContainer a {
+
font-family:Myriad Pro !important;
−
color: #565656;
+
letter-spacing:1px;
−
text-decoration:none;
+
}
−
font-weight: bold;
+
−
}
+
  
−
/* Sets the style for lists inside menuContainer  */
+
html,body{
−
#menuContainer ul {  
+
width:100%;
−
list-style: none;
+
background-color:#f8f8f8;
−
margin-left:0px;
+
margin:0;
−
}
+
padding:0;
 +
position:relative;
 +
}
  
−
/*Styles the list items to become menu buttons */
+
#menuContainer{
−
#menuContainer ul li {  
+
width:100%;
−
text-align: center;
+
background-color:#fff;
−
display: block;
+
    border-bottom:3px solid #fff;
−
width: 100%;
+
opacity:0.95;
−
height:30px;
+
text-align:center;
−
padding-top:10px;
+
position:fixed;
−
}
+
top:0;
 +
font-size:16px;
 +
}
  
−
/*For the menu buttons, changes the color when hovering*/
+
#menuContainer>ul{
−
#menuContainer li:hover {
+
margin:0px auto;
−
color: #FFF;
+
text-align:center;
−
background-color: #24B694;
+
position:relative;
−
}
+
height: 60px;
 +
}
  
−
/*Submenus are not displayed as default*/
+
#menuContainer ul li{
−
#menuContainer li ul {
+
list-style:none;
−
display: none;
+
float:left;
−
padding-top:15px;
+
display:block;
−
margin-left: -19px;
+
font-weight:thin;
−
}
+
padding:0 15px;
 +
line-height:60px;
 +
transition:0.3s ease;
  
−
/*Submenus are displayed when hovering the menu button */
+
−
#menuContainer li:hover ul {
+
}
−
/*display: inline-block; */
+
#menuContainer>ul >li:hover{
−
display: block;  
+
    color:#343434;
−
position: absolute;  
+
border-bottom:3px solid #e5004f;
−
float:right;
+
opacity:1;
−
margin-left: 134px;
+
}
−
margin-top:-42px;
+
#menuContainer  a{
−
}
+
    color:#343434;
 +
    transition:0.4s ease;
 +
text-decoration:none;
 +
height:60px;
 +
display:block;
 +
}
 +
#menuContainer  a:hover{
 +
color:#e5004f;
 +
}
  
−
/*Style the submenu buttons*/
+
 
−
#menuContainer li ul li{
+
#menuContainer ul li ul{
−
background-color: #59BF92;  
+
margin-top:3px;
−
padding-left:20px;
+
margin-left:-20px;
−
padding-right:20px;
+
position:absolute;
−
height:30px;
+
background:#fff;
−
padding-top:10px;
+
display:none;
−
margin-top:-2px;
+
padding:0px;
−
color: #565656;
+
z-index:9999;
−
width: 150px;
+
}
−
}
+
 
 +
#menuContainer ul li ul li{
 +
float:none;
 +
background:#fff;
 +
transition:0.1s linear;
 +
}
 +
 
 +
#menuContainer ul li ul li:hover{
 +
opacity:1;
 +
color:#e5004f;
 +
}
 +
 
 +
#menuLogo{
 +
display:inline-block;
 +
line-height:60px;
 +
}
 +
#menuLogo:hover{
 +
border:0 !important;
 +
}
 +
#menuLogo img{
 +
width:50px;
 +
padding:5px;
 +
}
 +
 
 +
 
 +
#menuNav{
 +
display:inline-block;
 +
padding:0px;
 +
margin:0 auto;
 +
}
  
 
/*CLASSES */
 
/*CLASSES */
Line 206: Line 250:
  
  
−
<div id="bannerContainer">
 
−
<br><br>
 
−
<h2> Add a banner to your wiki! </h2>
 
−
 
−
<p>You can make the image 980px  by  200px</p>
 
−
<p> Remember to call the file: "<i>Team_SCUT-China_banner.jpg</i>" </p>
 
−
</div>
 
−
 
−
<!-- Start of menu -->
 
−
<div id="menuContainer">
 
−
 
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
 
−
<ul>
 
−
<a href="https://2015.igem.org/Team:SCUT-China"><li>HOME</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Team"><li>TEAM</li></a>
 
−
 
−
<a href="#"><li>PROJECT
 
−
            <ul>
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Description"><li>Description</li></a>
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Experiments"><li>Experiments &amp; Protocols</li></a> 
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Results"><li>Results</li></a> 
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Design"><li>Design</li></a>
 
−
</ul>
 
−
</li></a>
 
−
 
−
<a href="#"><li>PARTS
 
−
            <ul>
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Parts"><li>Team Parts</li></a>
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Basic_Part"><li>Basic Parts</li></a> 
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Composite_Part"><li>Composite Parts</li></a>
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Part_Collection"><li>Part Collection</li></a> 
 
−
</ul>
 
−
</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Notebook"><li>NOTEBOOK</li></a>
 
−
     
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Attributions"><li>ATTRIBUTIONS</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Collaborations"><li>COLLABORATIONS</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Practices"><li>HUMAN PRACTICES</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Safety"><li>SAFETY</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Modeling"><li>MODELING</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Measurement"><li>MEASUREMENT</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:SCUT-China/Software"><li>SOFTWARE</li></a>
 
  
−
<a href="https://2015.igem.org/Team:SCUT-China/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
<nav id="menuContainer">
 +
   
 +
    <!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
 +
    <ul id="menuNav">
 +
        <li id="menuLogo"> <img src="image/logo.png" /></li>
 +
        <li><a href="https://2015.igem.org/Team:SCUT-China">HOME</a></li>
 +
        <li><a href="https://2015.igem.org/Team:SCUT-China/Team">TEAM</a>
 +
        <ul>
 +
        <a href="https://2015.igem.org/Team:SCUT-China/Team"><li>Team Member</li></a>
 +
      <a href="https://2015.igem.org/Team:SCUT-China/Attributions">  <li>Attribution</li></a>
 +
       
 +
        </ul>
 +
       
 +
        </li>
 +
        <li><a href="#">PROJECT</a>
 +
            <ul>
 +
                <a href="https://2015.igem.org/Team:SCUT-China/Description">
 +
                <li>Description</li>
 +
                </a> <a href="https://2015.igem.org/Team:SCUT-China/Experiments">
 +
                <li>Experiments &amp; Protocols</li>
 +
                </a> <a href="https://2015.igem.org/Team:SCUT-China/Results">
 +
                <li>Results</li>
 +
                </a> <a href="https://2015.igem.org/Team:SCUT-China/Design">
 +
                <li>Design</li>
 +
                </a>
 +
                <a href="https://2015.igem.org/Team:SCUT-China/Notebook"><li>Notebook</li></a>
 +
            </ul>
 +
        </li>
 +
        <li><a href="#">PARTS</a>
 +
            <!-- <ul>
 +
                <a href="https://2015.igem.org/Team:SCUT-China/Parts">
 +
                <li>Team Parts</li>
 +
                </a> <a href="https://2015.igem.org/Team:SCUT-China/Basic_Part">
 +
                <li>Basic Parts</li>
 +
                </a> <a href="https://2015.igem.org/Team:SCUT-China/Composite_Part">
 +
                <li>Composite Parts</li>
 +
                </a> <a href="https://2015.igem.org/Team:SCUT-China/Part_Collection">
 +
                <li>Part Collection</li>
 +
                </a>
 +
            </ul>-->
 +
        </li>
 +
       
 +
       
 +
        <li><a href="https://2015.igem.org/Team:SCUT-China/Collaborations">COLLABORATIONS</a></li>
 +
        <li><a href="https://2015.igem.org/Team:SCUT-China/Practices">HUMAN PRACTICES</a></li>
 +
        <li><a href="https://2015.igem.org/Team:SCUT-China/Safety">SAFETY</a></li>
 +
        <li><a href="https://2015.igem.org/Team:SCUT-China/Modeling">MODELING</a></li>
 +
       
 +
        <!--<li><a href="https://2015.igem.org/Team:SCUT-China/Measurement">MEASUREMENT</a></li>
  
−
</ul>
+
<li><a href="https://2015.igem.org/Team:SCUT-China/Software">SOFTWARE</a></li>
−
</div>
+
−
<!-- End of menu  -->
+
  
−
<!-- Start of content -->
+
<li><a href="https://2015.igem.org/Team:SCUT-China/Entrepreneurship">ENTREPRENEURSHIP</a></li>
−
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
+
                    -->
 +
    </ul>
 +
</nav>
 +
<!-- End of menu  -->
 
</html>
 
</html>

Revision as of 04:12, 13 September 2015