Difference between revisions of "Template:ElanVitalKorea"

 
(41 intermediate revisions by 3 users not shown)
Line 4: Line 4:
 
<head>
 
<head>
 
<style>
 
<style>
html, body, .wrapper{         
+
  html, body, .wrapper{         
 
         width: 100%;
 
         width: 100%;
 
         height: 100%;
 
         height: 100%;
Line 10: Line 10:
 
     }
 
     }
  
#cssmenu {padding: 0; margin: 0; border: 0; text-align:center;}
+
    #cssmenu
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
+
    {
#cssmenu ul {position: relative; z-index: 597; display:inline-block; list-style:none;}
+
    padding: 0;
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
+
    margin: 0; border: 0;
#cssmenu ul li.hover,
+
    text-align:center;
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
+
    }
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
+
#cssmenu ul ul li {float: none;}
+
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
+
#cssmenu ul li:hover > ul { visibility: visible;}
+
#cssmenu ul ul {bottom: 0; left: 0;}
+
#cssmenu ul ul {margin-top: 0; }
+
#cssmenu ul ul li {font-weight: normal;}
+
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
+
  
#cssmenu li {
+
    #cssmenu ul, #cssmenu li
text-align:left;
+
    {
}
+
    list-style: none;
 +
    margin: 0;
 +
    padding: 0;
 +
    }
  
#cssmenu {
+
    #cssmenu ul
  background: #333;
+
    {
  border-bottom: 4px solid #1b9bff;
+
    position: relative;
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
+
    z-index: 597;
  font-size: 12px;
+
    display:inline-block;
}
+
    list-style:none;
 +
    }
  
  #cssmenu > ul { *display: inline-block; }
+
    #cssmenu ul li
 +
    {
 +
    float: left;
 +
    min-height: 1px;
 +
    vertical-align: middle;
 +
    }
  
  #cssmenu:after, #cssmenu ul:after {
+
    #cssmenu ul li.hover,
 +
    #cssmenu ul li:hover
 +
    {
 +
    position: relative;
 +
    z-index: 599;
 +
    cursor: default;
 +
    }
 +
 
 +
    #cssmenu ul ul
 +
    {
 +
    visibility: hidden;
 +
    position: absolute;
 +
    top: 100%;
 +
    left: 0;
 +
    z-index: 598;
 +
    width: 100%;
 +
    }
 +
 
 +
    #cssmenu ul ul li
 +
    {
 +
    float: none;
 +
    }
 +
 
 +
    #cssmenu ul ul ul
 +
    {
 +
    top: 0;
 +
    left: auto;
 +
    right: -99.5%;
 +
    }
 +
 
 +
    #cssmenu ul li:hover > ul
 +
    {
 +
    visibility: visible;
 +
    }
 +
 
 +
    #cssmenu ul ul
 +
    {bottom: 0; left: 0;
 +
    }
 +
 
 +
    #cssmenu ul ul
 +
    {margin-top: 0;
 +
    }
 +
 
 +
    #cssmenu ul ul li
 +
    {
 +
    font-weight: normal;
 +
    }
 +
 
 +
    #cssmenu a
 +
    {
 +
    display: block; line-height: 1em; text-decoration: none;
 +
    }
 +
 
 +
    #cssmenu li
 +
    {
 +
    text-align:left;
 +
    }
 +
 
 +
    #cssmenu
 +
    {
 +
    background: #333;
 +
    border-bottom: 4px solid #1b9bff;
 +
    font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
 +
    font-size: 16px;
 +
    }
 +
 
 +
    #cssmenu > ul
 +
    {
 +
    *display: inline-block;
 +
    }
 +
 
 +
    #cssmenu:after, #cssmenu ul:after
 +
    {
 
     content: '';
 
     content: '';
 
     display: block;
 
     display: block;
 
     clear: both;
 
     clear: both;
}
+
    }
  
#cssmenu a {
+
    #cssmenu a
 +
    {
 
     background: #333;
 
     background: #333;
 
     color: #CBCBCB;
 
     color: #CBCBCB;
 
     padding: 0 20px;
 
     padding: 0 20px;
}
+
    }
#cssmenu ul { text-transform: uppercase; }
+
  
     #cssmenu ul ul {
+
     #cssmenu ul
      border-top: 4px solid #1b9bff;
+
    {
      text-transform: none;
+
    text-transform: uppercase;
      min-width: 190px;
+
    }
}
+
      #cssmenu ul ul a {
+
        background: #1b9bff;
+
        color: #FFF;
+
        border: 1px solid #0082e7;
+
        border-top: 0 none;
+
        line-height: 150%;
+
        padding: 16px 20px;
+
}
+
      #cssmenu ul ul ul { border-top: 0 none; }
+
  
      #cssmenu ul ul li { position: relative }
+
    #cssmenu ul ul
 +
    {
 +
    border-top: 4px solid #1b9bff;
 +
    text-transform: none;
 +
    min-width: 190px;
 +
    }
  
#cssmenu > ul > li > a { line-height: 48px; }
+
    #cssmenu ul ul a
 +
    {
 +
    background: #1b9bff;
 +
    color: #FFF;
 +
    border: 1px solid #0082e7;
 +
    border-top: 0 none;
 +
    line-height: 150%;
 +
    padding: 16px 20px;
 +
    }
  
#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
+
    #cssmenu ul ul ul
        #cssmenu ul ul li:hover > a { background: #35a6ff; }
+
    {
 +
    border-top: 0 none;
 +
    }
  
        #cssmenu ul ul li:last-child > a {
+
    #cssmenu ul ul li
          border-radius: 0 0 3px 3px;
+
    {
          box-shadow: 0 1px 0 #1b9bff;
+
    position: relative
}
+
    }
        #cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
+
  
        #cssmenu ul ul li.has-sub > a:after {
+
    #cssmenu > ul > li > a
          content: '+';
+
    {
          position: absolute;
+
    line-height: 48px;
          top: 50%;
+
    }
          right: 15px;
+
          margin-top: -8px;
+
}
+
  
     #cssmenu ul li:hover > a, #cssmenu ul li.active > a {
+
     #cssmenu ul ul li:first-child > a
      background: #1b9bff;
+
     {
      color: #FFF;
+
    border-top: 1px solid #0082e7;
}
+
    }
    #cssmenu ul li.has-sub > a:after {
+
      content: '+';
+
      margin-left: 5px;
+
}
+
     #cssmenu ul li.last ul {
+
      left: auto;
+
      right: 0;
+
}
+
      #cssmenu ul li.last ul ul {
+
        left: auto;
+
        right: 99.5%;
+
}
+
  
#center {
+
    #cssmenu ul ul li:hover > a
  /*Centering Method 2*/
+
    {
  margin: 10% 0 10% 0%;
+
    background: #35a6ff;
  left: 50%;
+
    }
  top: 50%;
+
}
+
  
 +
    #cssmenu ul ul li:last-child > a
 +
    {
 +
    border-radius: 0 0 3px 3px;
 +
    box-shadow: 0 1px 0 #1b9bff;
 +
    }
  
img.displayed {
+
     #cssmenu ul ul li:last-child:hover > a
     display: block;
+
     {
    margin-left: auto;
+
    border-radius: 0 0 0 3px;
     margin-right: auto;
+
    }
}
+
  
h4 {
+
    #cssmenu ul ul li.has-sub > a:after
color:white;
+
    {
letter-spacing:2px;
+
    content: '+';
font-size: 24px;
+
    position: absolute;
}
+
    top: 50%;
 +
    right: 15px;
 +
    margin-top: -8px;
 +
    }
  
a:link {
+
    #cssmenu ul li:hover > a, #cssmenu ul li.active > a
     text-decoration: none;
+
    {
}
+
     background: #1b9bff;
 +
    color: #FFF;
 +
    }
  
a:visited {
+
     #cssmenu ul li.has-sub > a:after
     text-decoration: none;
+
     {
}
+
     content: '+';
 
+
     margin-left: 5px;
a:hover {
+
     }
     text-decoration: none;
+
}
+
 
+
a:active {
+
     text-decoration: none;
+
}
+
 
+
body {
+
  /* Location of the image */
+
  background-image: url(https://static.igem.org/mediawiki/2015/archive/2/24/20150829203509!ElanVital_Bg.png);
+
    width: 100%;  
+
     background-size:   cover;                    
+
     background-repeat: no-repeat;
+
    background-position: center center; 
+
}
+
  
 +
    #cssmenu ul li.last ul
 +
    {
 +
    left: auto;
 +
    right: 0;
 +
    }
 +
    #cssmenu ul li.last ul ul
 +
    {
 +
    left: auto;
 +
    right: 99.5%;
 +
    }
  
 
</style>
 
</style>
 
 
</head>
 
</head>
 
 
<body>
 
<body>
  
Line 160: Line 222:
 
     <li class='has-sub'><a href='#'>Team</a>
 
     <li class='has-sub'><a href='#'>Team</a>
 
         <ul>
 
         <ul>
           <li><a href='#'>Members</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Members'>Members</a>
           <li><a href='#'>Attribution</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Attributions'>Attributions</a>
 
         </ul>
 
         </ul>
 
     <li class='has-sub'><a href='#'>Project</a>
 
     <li class='has-sub'><a href='#'>Project</a>
 
         <ul>
 
         <ul>
           <li><a href='#'>Project Overview</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Project_Overview'>Project Overview</a>
           <li><a href='#'>Background Information</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Design'>Plasmids Design</a>
          <li class='has-sub '><a>Method & Materials</a>
+
          <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Background'>Background Information</a>
              <ul>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Parts'>Parts</a>
                <li><a href='#'>Plasmid Design</a></li>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Result'>Result</a>
                <li><a href='#'>Protocols</a></li>
+
              </ul>
+
          <li><a href='#'>Result</a>
+
           <li><a href='#'>Conclusions</a>
+
           <li><a href='#'>Future Plans</a>
+
 
</ul>
 
</ul>
 
</li>
 
</li>
Line 180: Line 237:
 
     <li class='has-sub'><a href='#'>Wetlab</a>
 
     <li class='has-sub'><a href='#'>Wetlab</a>
 
         <ul>
 
         <ul>
           <li><a href='#'>Notebook</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Protocol'>Protocol</a>
           <li><a href='#'>Protocal</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Notebook'>Notebook</a>
           <li><a href='#'>Safety</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Safety'>Safety</a>
 
</ul>
 
</ul>
 
</li>
 
</li>
Line 188: Line 245:
 
     <li class='has-sub'><a href='#'>Human Practice</a>
 
     <li class='has-sub'><a href='#'>Human Practice</a>
 
         <ul>
 
         <ul>
           <li><a href='#'>Focus</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Practices'>Practices</a>
          <li><a href='#'>Korea Youth Expo</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Collaborations'>Collaborations</a>
          <li><a href='#'>Education & Public Awareness</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Video'>Video</a>
          <li><a href='#'>Policy Recommendations</a>
+
          <li><a href='#'>Blog</a>
+
           <li><a href='#'>Interview</a>
+
          <li><a href='#'>Regional Meet-ups</a>
+
           <li><a href='#'>Articles</a>
+
          <li><a href='#'>Video</a>
+
          <li><a href='#'>Presentations</a>
+
 
</ul>
 
</ul>
 
</li>
 
</li>
 
 
     <li class='has-sub'><a href='#'>iGEM Resource</a>
 
     <li class='has-sub'><a href='#'>iGEM Resource</a>
 
         <ul>
 
         <ul>
           <li><a href='#'>Medal Requirement</a>
+
           <li><a href='https://2015.igem.org/Team:Elan_Vital_Korea/Medal_Requirement'>Medal Requirement</a>
          <li><a href='#'>Module Description</a>
+
 
   </ul>
 
   </ul>
 
</li>
 
</li>
 
</div>
 
</div>
 
<div id="center">
 
<a href=#"><img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d5/ElanVital_Logo.png"></a>
 
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
 
 
<h4 style="text-align:center;">
 
MEMBERS <br>
 
</h4>
 
 
 
<a href="#myAnchor" rel="" id="anchor1" class="anchorLink"><img class="displayed" src="https://static.igem.org/mediawiki/2015/d/d2/Scroll_arrow.png" width="1.8%;" height="1.8%;" ></a>
 
</div>
 
 
<br><br><br>
 
 
  
  
 
</body>
 
</body>
 
<script>
 
$('a').click(function(){
 
    $('html, body').animate({
 
        scrollTop: $( $(this).attr('href') ).offset().top
 
    }, 500);
 
    return false;
 
});
 
</script>
 
  
 
</html>
 
</html>

Latest revision as of 23:33, 18 September 2015