Difference between revisions of "Template:NTHU Taiwan/TopBar"
| Line 5: | Line 5: | ||
<!-- <script async src="../src/js/index.js"></script> --> | <!-- <script async src="../src/js/index.js"></script> --> | ||
<style> | <style> | ||
| − | + | .topbar-menu{ | |
| − | + | ||
| − | + | ||
| − | .menu{ | + | |
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
| Line 14: | Line 11: | ||
} | } | ||
| − | .menuItem { | + | .topbar-menuItem { |
padding-right: 50px; | padding-right: 50px; | ||
white-space: nowrap; | white-space: nowrap; | ||
| Line 21: | Line 18: | ||
} | } | ||
| − | .icon{ | + | .topbar-icon{ |
height: 120px; | height: 120px; | ||
padding-top: 15px; | padding-top: 15px; | ||
| Line 28: | Line 25: | ||
} | } | ||
| − | .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 40: | ||
<head> | <head> | ||
<body> | <body> | ||
| − | <div class="menu"> | + | <div class="topbar-menu"> |
<div> | <div> | ||
| − | <img class='icon' src="https://i.imgur.com/BxLfzBB.png"/> | + | <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">InterLab</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> | ||
Revision as of 09:01, 19 August 2018
