Difference between revisions of "Team:NTNU Trondheim/Header"

 
(210 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
{{:Team:NTNU_Trondheim/Style}}
 
<html>
 
<html>
 +
 
<head>
 
<head>
−
    <link rel="stylesheet" href="https://static.igem.org/mediawiki/2018/b/bf/T--NTNU_Trondheim--style.txt">
+
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
−
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
 +
 
 +
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
</head>
 
</head>
  
 
<style>
 
<style>
−
/* ---- */
+
  html {
 +
    padding: 0 !important;
 +
  }
  
−
body {
+
  #top-menu-under.noprint {
−
  font-family: 'PT Sans', Arial, Verdana;
+
    display: none !important;
−
   background-color: #eee;
+
   }
−
}
+
</style>
  
−
ul {
+
  <a href="https://2018.igem.org/Team:NTNU_Trondheim">
−
    list-style-type: none;
+
     <img class="homebtn" src="https://static.igem.org/mediawiki/2018/e/eb/T--NTNU_Trondheim--navlogo.png">
−
    margin: 0;
+
  </a>
−
     padding: 0;
+
−
    overflow: hidden;
+
−
    background-color: #333;
+
−
}
+
  
−
li {
+
<body>
−
    float: left;
+
−
}
+
  
−
li a, .dropbtn {
 
−
    display: inline-block;
 
−
    color: white;
 
−
    text-align: center;
 
−
    padding: 14px 16px;
 
−
    text-decoration: none;
 
−
}
 
  
−
li a:hover, .dropdown:hover .dropbtn {
+
  <div class="toggle">
−
     background-color: rgba(0,0,0,0.1);
+
     <i class="fas fa-bars menu_bar fa-2x" style="color: #fff"></i>
−
}
+
  </div>
 +
  <div class="nav-wrapper">
 +
    <ul class="ntnu_navbar">
  
−
/* ---- HOVER COLORS NAVIGATION BAR ---- */
 
−
li #menu-home:hover {  background-color: red;  }
 
−
li #menu-team:hover {  background-color: #ff8a23;  }
 
−
li #menu-project:hover {  background-color: #f8b732;  }
 
−
li #menu-parts:hover {  background-color: #4CAF50;  }
 
−
li #menu-safety:hover {  background-color: #5bc7d8;  }
 
−
li #menu-hp:hover {  background-color: #4286f4;  }
 
−
li #menu-awards:hover {  background-color: #a851db;  }
 
  
−
li.dropdown {
+
        <li class="ntnu_menu_option ntnu_dropdown no-icon">
−
    display: inline-block;
+
          <a class="ntnu_dropbtn" href="https://2018.igem.org/Team:NTNU_Trondheim" id="menu-home">
−
}
+
            <i class="fas fa-home"></i>
 +
          </a>
 +
        </li>
  
−
.dropdown-content {
 
−
    display: none;
 
−
    position: absolute;
 
−
    background-color: #f9f9f9;
 
−
    min-width: 160px;
 
−
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
−
    z-index: 1;
 
−
}
 
  
−
.dropdown-content a {
+
      <li class="ntnu_menu_option ntnu_dropdown no-icon">
−
    color: black;
+
        <a href="javascript:void(0)" class="ntnu_dropbtn" onclick="void(0)" id="menu-team">Team</a>
−
    padding: 12px 16px;
+
        <div class="ntnu_dropdown_content">
−
    text-decoration: none;
+
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Team">Team Members</a>
−
    display: block;
+
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Collaborations">Collaborations</a>
−
    text-align: left;
+
        </div>
−
}
+
      </li>
  
−
.dropdown-content a:hover {background-color: #f1f1f1}
+
      <li class="ntnu_menu_option ntnu_dropdown no-icon">
 +
        <a href="javascript:void(0)" class="ntnu_dropbtn" id="menu-project">Project</a>
 +
        <div class="ntnu_dropdown_content">
 +
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Description">Description</a>
 +
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Design">Design</a>
 +
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Model">Model</a>
 +
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Results">Results</a>
 +
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Demonstrate">Demonstrate</a>
 +
        </div>
 +
      </li>
  
−
.dropdown:hover .dropdown-content {
+
      <li class="ntnu_menu_option ntnu_dropdown no-icon">
−
    display: block;
+
        <a href="javascript:void(0)" class="ntnu_dropbtn" id="menu-lab">Lab</a>
−
}
+
        <div class="ntnu_dropdown_content">
−
 
+
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Experiments">Lab Journal</a>
−
html {
+
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Protocols">Protocols</a>
−
  padding: 40px;
+
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Measurement">Measurement</a>
−
  background: #ecf0f1;
+
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Safety">Safety</a>
−
}
+
        </div>
−
 
+
      </li>
−
h1 {
+
−
  color: #2c3e50;
+
−
  text-transform: uppercase;
+
−
  text-align: center;
+
−
  font-size: 14px;
+
−
  line-height: 21px;
+
−
  letter-spacing: 10px;
+
−
  margin: 48px auto 0;
+
−
}
+
−
 
+
−
h1 + p {
+
−
  font-size: 14px;
+
−
  font-family: serif;
+
−
  font-style: italic;
+
−
  color: #b5bfc1;
+
−
  text-align: center;
+
−
  border-top: 1px dotted #ccc;
+
−
  width: 360px;
+
−
  padding: 12px;
+
−
  margin: 12px auto 48px;
+
−
}
+
−
</style>
+
−
 
+
−
 
+
−
<body>
+
  
−
<ul class="navbar">
+
        <li class="ntnu_menu_option ntnu_dropdown no-icon">
−
  <li><a href="#home" id="menu-home">Home</a></li>
+
        <a href="javascript:void(0)" class="ntnu_dropbtn" id="menu-parts">Parts</a>
 +
        <div class="ntnu_dropdown_content">
 +
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Parts">Parts Overview</a>
 +
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Improve">New Part</a>
 +
          <!--
 +
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Basic_Part">Basic Parts</a>
 +
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Composite_Part">Composite Parts</a>
 +
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Part_Collection">Part Collection</a>
 +
          -->
 +
        </div>
 +
      </li>
  
−
  <li class="dropdown">
+
        <li class="ntnu_menu_option ntnu_dropdown no-icon">
−
    <a href="javascript:void(0)" class="dropbtn" id="menu-team">Team</a>
+
          <a class="ntnu_dropbtn" href="https://2018.igem.org/Team:NTNU_Trondheim/InterLab" id="menu-interlabs">InterLab</a>
−
    <div class="dropdown-content">
+
        </li>
−
      <a href="#">Team Members</a>
+
−
      <a href="#">Instructors</a>
+
−
    </div>
+
−
  </li>
+
  
−
    <li class="dropdown">
+
        <li class="ntnu_menu_option ntnu_dropdown no-icon">
−
    <a href="javascript:void(0)" class="dropbtn" id="menu-project">Project</a>
+
        <a href="javascript:void(0)" class="ntnu_dropbtn" id="menu-hp">Human Practices</a>
−
    <div class="dropdown-content">
+
        <div class="ntnu_dropdown_content">
−
      <a href="#">Description</a>
+
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Human_Practices">Integrated Human Practices</a>
−
      <a href="#">Design</a>
+
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Public_Engagement">Education and Engangement</a>
−
      <a href="#">Experiments</a>
+
         </div>
−
        <a href="#">Notebook</a>
+
      </li>
−
        <a href="#">InterLab</a>
+
−
        <a href="#">Model</a>
+
−
        <a href="#">Results</a>
+
−
        <a href="#">Demonstrate</a>
+
−
        <a href="#">Improve</a>
+
−
         <a href="#">Attributions</a>
+
−
    </div>
+
−
  </li>
+
  
−
    <li class="dropdown">
+
      <li class="ntnu_menu_option ntnu_dropdown no-icon">
−
    <a href="javascript:void(0)" class="dropbtn" id="menu-parts">Parts</a>
+
        <a href="javascript:void(0)" class="ntnu_dropbtn" id="menu-acknowledge">Acknowledgements</a>
−
    <div class="dropdown-content">
+
        <div class="ntnu_dropdown_content" style="min-width: 170px">
−
      <a href="#">Parts Overview</a>
+
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Sponsors">Sponsors</a>
−
      <a href="#">Basic Parts</a>
+
          <a href="https://2018.igem.org/Team:NTNU_Trondheim/Attributions">Attributions</a>
−
        <a href="#">Composite Parts</a>
+
        </div>
−
    </div>
+
      </li>
−
  </li>
+
  
−
    <li><a href="#home" id="menu-safety">Safety</a></li>
+
      <li class="ntnu_menu_option ntnu_dropdown no-icon">
 +
        <a class="ntnu_dropbtn" href="https://2018.igem.org/Team:NTNU_Trondheim/Awards" id="menu-jamboree">Awards</a>
 +
        </li>
 +
    </ul>
  
−
        <li class="dropdown">
+
  </div>
−
    <a href="javascript:void(0)" class="dropbtn" id="menu-hp">Human Practices</a>
+
−
    <div class="dropdown-content">
+
−
      <a href="#">Human Practices</a>
+
−
      <a href="#">Education and Engangement</a>
+
−
    </div>
+
−
  </li>
+
  
−
        <li class="dropdown">
+
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
−
    <a href="javascript:void(0)" class="dropbtn" id="menu-awards">Awards</a>
+
<script type="text/javascript">
−
    <div class="dropdown-content">
+
  $(document).ready(function () {
−
       <a href="#">Coming soon....</a>
+
       $('.menu_bar').click(function () {
−
    </div>
+
          $('ul.ntnu_navbar').toggleClass('active');
−
   </li>
+
          $('.toggle').toggleClass('active');
 +
      })
 +
   })
 +
</script>
  
−
</ul>
+
<script>
 +
    $(document).ready(function () {
 +
      $(':hover').click(function () {
 +
          $(":hover").unbind('mouseenter mouseleave');
 +
      })
 +
  })
 +
</script>
  
−
</body>
+
<script type="text/javascript">
 +
$('#clickme').click(function() {
 +
  $('html, body').animate({ scrollTop: $('#welcome').offset().top }, 'slow');
 +
  });
 +
</script>
  
 
</html>
 
</html>

Latest revision as of 03:15, 18 October 2018