Difference between revisions of "Template:XJTU-China/header"
| Line 1: | Line 1: | ||
<html> | <html> | ||
| − | + | <section class="d-flex flex-column"> | |
| − | + | <header class="header_area" id="topHeader"> | |
| − | + | <a class="navbar-brand" href="index.html"><img class="logo" | |
| − | + | src="https://static.igem.org/mediawiki/2021/9/98/T--XJTU-China--logo.jpg" alt="logo of XJTU-China"></a> | |
| − | + | <nav class="navbar navbar-expand-lg navbar-light"> | |
| − | + | <div class="container"> | |
| − | + | <!-- Brand and toggle get grouped for better mobile display --> | |
| − | + | <button class="navbar-toggler" type="button" data-toggle="collapse" | |
| − | + | data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" | |
| − | + | aria-label="Toggle navigation">MENU | |
| − | + | <span class="fa fa-bars" aria-hidden="true"></span> | |
| − | + | </button> | |
| − | + | <!-- Collect the nav links, forms, and other content for toggling --> | |
| − | + | <div class="collapse navbar-collapse offset" id="navbarSupportedContent"> | |
| − | + | <ul class="nav navbar-nav menu_nav ml-auto"> | |
| − | + | <li class="nav-item active"><a class="nav-link" href="index.html">home</a></li> | |
| − | + | <li class="nav-item submenu dropdown"> | |
| − | + | <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" | |
| − | + | aria-haspopup="true" aria-expanded="false">Project <span class="fa fa-caret-down" | |
| − | + | aria-hidden="true"></span></a> | |
| − | + | <ul class="dropdown-menu"> | |
| − | + | <li class="nav-item"><a class="nav-link" href="Description.html">description</a></li> | |
| − | + | <li class="nav-item"> | |
| − | + | <a class="nav-link" href="upcomingevents.html">design</a> | |
| − | + | </li> | |
| − | + | <li class="nav-item"><a class="nav-link" href="events.html">others</a></li> | |
| − | + | </ul> | |
| + | </li> | ||
| − | + | <li class="nav-item submenu dropdown"> | |
| − | + | <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" | |
| − | + | aria-haspopup="true" aria-expanded="false">wetlab <span class="fa fa-caret-down" | |
| − | + | aria-hidden="true"></span></a> | |
| − | + | <ul class="dropdown-menu"> | |
| − | + | <li class="nav-item"><a class="nav-link" target="_blank" | |
| − | + | href="https://www.ieee.org/">lab note</a></li> | |
| − | + | </ul> | |
| − | + | </li> | |
| − | + | <li class="nav-item submenu dropdown"> | |
| − | + | <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" | |
| − | + | aria-haspopup="true" aria-expanded="false">drylab <span class="fa fa-caret-down" | |
| − | + | aria-hidden="true"></span></a> | |
| − | + | <ul class="dropdown-menu"> | |
| − | + | <li class="nav-item"><a class="nav-link" href="ieee.html">modeling</a></li> | |
| − | + | <li class="nav-item"><a class="nav-link" href="ieee.html">simulation</a></li> | |
| − | + | </ul> | |
| − | + | </li> | |
| − | + | <li class="nav-item"><a class="nav-link" href="contact.html">parts</a></li> | |
| − | + | <li class="nav-item submenu dropdown"> | |
| − | + | <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" | |
| − | + | aria-haspopup="true" aria-expanded="false">Human Practices <span | |
| − | + | class="fa fa-caret-down" aria-hidden="true"></span></a> | |
| − | + | <ul class="dropdown-menu"> | |
| − | + | <li class="nav-item"><a class="nav-link" href="ieee.html">explore</a></li> | |
| − | + | <li class="nav-item"><a class="nav-link" href="ieee.html">interview</a></li> | |
| − | + | </ul> | |
| − | + | </li> | |
| − | + | <li class="nav-item submenu dropdown end"> | |
| − | + | <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" | |
| − | + | aria-haspopup="true" aria-expanded="false">Team <span class="fa fa-caret-down" | |
| − | + | aria-hidden="true"></span></a> | |
| − | + | <ul class="dropdown-menu"> | |
| − | + | <li class="nav-item"><a class="nav-link" href="ieee.html">members</a></li> | |
| − | + | <li class="nav-item"><a class="nav-link" href="ieee.html">attibutions</a></li> | |
| − | + | </ul> | |
| − | + | </li> | |
| − | + | </ul> | |
| − | + | ||
</div> | </div> | ||
| − | </ | + | </div> |
| − | </ | + | </nav> |
| − | </section> | + | </header> |
| + | </section> | ||
| + | <!--smoothNav--> | ||
| + | <script> | ||
| + | window.addEventListener('scroll', () => { | ||
| + | var h = document.getElementById('topHeader'); | ||
| + | height = h.clientHeight; | ||
| + | let header = document.querySelector('header'); | ||
| + | let logo = document.querySelector('.logo'); | ||
| + | header.classList.toggle('sticky', window.scrollY > height); | ||
| + | logo.classList.toggle('sticky', window.scrollY > height); | ||
| + | }) | ||
| + | </script> | ||
</html> | </html> | ||
Revision as of 01:12, 29 June 2021
