Difference between revisions of "Template:NTHU Taiwan/TopBar"
| (17 intermediate revisions by 2 users not shown) | |||
| Line 2: | Line 2: | ||
<head> | <head> | ||
<meta charset="utf-8" /> | <meta charset="utf-8" /> | ||
| − | |||
<!-- <script async src="../src/js/index.js"></script> --> | <!-- <script async src="../src/js/index.js"></script> --> | ||
<style> | <style> | ||
| − | + | #interlab a{ | |
| − | + | text-decoration: none; | |
| + | color: black; | ||
} | } | ||
| − | .menu{ | + | |
| + | .topbar-menu{ | ||
display: flex; | display: flex; | ||
| + | width: 100%; | ||
align-items: center; | align-items: center; | ||
height: fit-content; | height: fit-content; | ||
| + | background-color: gainsboro; | ||
} | } | ||
| − | .menuItem { | + | .topbar-menuItem { |
padding-right: 50px; | padding-right: 50px; | ||
white-space: nowrap; | white-space: nowrap; | ||
| Line 21: | Line 24: | ||
} | } | ||
| − | .icon{ | + | .topbar-icon{ |
height: 120px; | height: 120px; | ||
| − | padding | + | padding: 10px; |
cursor: pointer; | cursor: pointer; | ||
user-select: none; | user-select: none; | ||
} | } | ||
| − | .toggle{ | + | .topbar-toggle{ |
display: none; | display: none; | ||
position: absolute; | position: absolute; | ||
} | } | ||
| − | .menuItem:hover .toggle{ | + | .topbar-menuItem:hover .topbar-toggle{ |
display: block; | display: block; | ||
} | } | ||
| − | .item{ | + | .topbar-item{ |
padding-top: 5px; | padding-top: 5px; | ||
} | } | ||
| Line 43: | Line 46: | ||
<head> | <head> | ||
<body> | <body> | ||
| − | <div class="menu"> | + | <div class="topbar-menu"> |
<div> | <div> | ||
| − | <img class='icon' src="https://imgur.com/BxLfzBB"/> | + | <img class='topbar-icon' src="https://i.imgur.com/BxLfzBB.png"/> |
</div> | </div> | ||
| − | <div class="menuItem"> | + | <div class="topbar-menuItem"> |
<div>Team</div> | <div>Team</div> | ||
</div> | </div> | ||
| − | <div class="menuItem"> | + | <div class="topbar-menuItem"> |
<div>DryLab</div> | <div>DryLab</div> | ||
| − | <div class="toggle"> | + | <div class="topbar-toggle"> |
| − | <div class="item">BioReactor</div> | + | <div class="topbar-item">BioReactor</div> |
| − | <div class="item">MV Kit</div> | + | <div class="topbar-item">MV Kit</div> |
</div> | </div> | ||
</div> | </div> | ||
| − | <div class="menuItem"> | + | <div class="topbar-menuItem"> |
<div>WetLab</div> | <div>WetLab</div> | ||
| − | <div class="toggle"> | + | <div class="topbar-toggle"> |
| − | <div class="item">Experiment</div> | + | <div class="topbar-item">Experiment</div> |
| − | <div class="item">Parts</div> | + | <div class="topbar-item">Parts</div> |
| − | <div class="item">InterLab</div> | + | <div class="topbar-item" id="interlab"><a href="https://2018.igem.org/Team:NTHU_Taiwan/InterLab">InterLab</a></div> |
| − | <div class="item">Protocal</div> | + | <div class="topbar-item">Protocal</div> |
| − | <div class="item">Notebook</div> | + | <div class="topbar-item">Notebook</div> |
</div> | </div> | ||
</div> | </div> | ||
| − | <div class="menuItem">Humam Practices</div> | + | <div class="topbar-menuItem">Humam Practices</div> |
| − | <div class="menuItem">Awards</div> | + | <div class="topbar-menuItem">Awards</div> |
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> | ||
Latest revision as of 09:10, 29 August 2018
