Difference between revisions of "Template:NTHU Taiwan/TopBar"

 
(44 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
<html>
 +
<head>
 +
    <meta charset="utf-8" />
 +
    <!-- <script async src="../src/js/index.js"></script> -->
 +
    <style>
 +
      #interlab a{
 +
        text-decoration: none;
 +
        color: black;
 +
      }
  
 +
      .topbar-menu{
 +
        display: flex;
 +
        width: 100%;
 +
        align-items: center;
 +
        height: fit-content;
 +
        background-color: gainsboro;
 +
      }
  
−
.project-title{
+
      .topbar-menuItem {
−
    font-size: 30px;
+
        padding-right: 50px;
−
    padding: 10px 10px 0px 10px;
+
        white-space: nowrap;
−
}
+
        cursor: pointer;
 +
        user-select: none;
 +
      }
  
−
.description{
+
      .topbar-icon{
−
    padding: 10px;
+
        height: 120px;
−
    color: gray;
+
        padding: 10px;
−
}
+
        cursor: pointer;
 +
        user-select: none;
 +
      }
  
−
.title{
+
      .topbar-toggle{
−
    padding: 10px 10px 0px 10px;
+
        display: none;
−
    font-size: 20px;
+
        position: absolute;
−
}
+
      }
 +
      .topbar-menuItem:hover .topbar-toggle{
 +
        display: block;
 +
      }
  
−
.icon{
+
      .topbar-item{
−
    height: 30px;
+
        padding-top: 5px;
−
    width: 30px;
+
      }
−
    padding: 0 5px;
+
−
}
+
  
−
a{
+
    </style>
−
     text-decoration-line: none
+
<head>
−
}
+
<body>
 +
     <div class="topbar-menu">
 +
        <div>
 +
          <img class='topbar-icon' src="https://i.imgur.com/BxLfzBB.png"/>
 +
        </div>
 +
 
 +
       
 +
        <div class="topbar-menuItem">
 +
          <div>Team</div>
 +
        </div>
 +
           
 +
        <div class="topbar-menuItem">
 +
          <div>DryLab</div>
 +
          <div class="topbar-toggle">
 +
            <div class="topbar-item">BioReactor</div>
 +
            <div class="topbar-item">MV Kit</div>
 +
          </div>
 +
        </div>
 +
 
 +
        <div class="topbar-menuItem">
 +
          <div>WetLab</div>
 +
          <div class="topbar-toggle">
 +
            <div class="topbar-item">Experiment</div>
 +
            <div class="topbar-item">Parts</div>
 +
            <div class="topbar-item" id="interlab"><a href="https://2018.igem.org/Team:NTHU_Taiwan/InterLab">InterLab</a></div>
 +
            <div class="topbar-item">Protocal</div>
 +
            <div class="topbar-item">Notebook</div>
 +
          </div>
 +
        </div>
 +
 
 +
        <div class="topbar-menuItem">Humam Practices</div>
 +
        <div class="topbar-menuItem">Awards</div>
 +
    </div>
 +
</body>
 +
</html>

Latest revision as of 09:10, 29 August 2018

Team
DryLab
BioReactor
MV Kit
WetLab
Experiment
Parts
Protocal
Notebook
Humam Practices
Awards