Difference between revisions of "Template:Ruperto Carola/navbar"

 
(111 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
  
<nav class="navbar navbar-expand-lg navbar-dark bg-t-dark">
+
<script>
 +
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
 +
  if (!$(this).next().hasClass('show')) {
 +
    $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
 +
  }
 +
  var $subMenu = $(this).next(".dropdown-menu");
 +
  $subMenu.toggleClass('show');
  
<a class="navbar-brand" href="https://2019.igem.org/Team:Ruperto_Carola">Ruperto_Carola</a>
 
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarTogglerDemo02">
 
<span class="navbar-toggler-icon"></span>
 
</button>
 
  
<div class="collapse navbar-collapse" id="navbarNavDropdown">
+
  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
 +
    $('.dropdown-submenu .show').removeClass("show");
 +
  });
  
<ul class="navbar-nav">
 
  
<li class="nav-item">
+
  return false;
<a class="nav-link" href="https://2019.igem.org/Team:Ruperto_Carola">Home</a>
+
});
</li>
+
</script>
  
<!-- TEAM -->
+
<style>
  
<li class="nav-item dropdown">
+
.noline{
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+
        line-height: 0 px;
TEAM
+
        margin: 0px 0px !important ;
</a>
+
}
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Team">
+
Team Members
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Collaborations">
+
Collaborations
+
</a>
+
</div>
+
</li>
+
  
<!-- PROJECT -->
+
.narrow{
 +
        margin: 0px 5px 0px 5px !important ;
 +
}
  
<li class="nav-item dropdown">
+
.dice-expand{
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+
        float:right;
Project
+
        margin-left: 5px;
</a>
+
}
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Description">
+
Description
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Design">
+
Design
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Experiments">
+
Experiments
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Notebook">
+
Notebook
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Contribution">
+
Contribution
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Results">
+
Results
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Demonstrate">
+
Demonstrate
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Improve">
+
Improve
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Attributions">
+
Attributions
+
</a>
+
</div>
+
</li>
+
  
<!-- PARTS -->
 
  
<li class="nav-item dropdown">
+
#content-desktop {display: flex;}
<a class="nav-link dropdown-toggle" href="https://2019.igem.org/Team:Ruperto_Carola/Parts" role="button" data-toggle="dropdown">
+
#content-mobile {display: none;}
Parts
+
</a>
+
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Parts">
+
Parts Overview
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Basic_Part">
+
Basic Parts
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Composite_Part">
+
Composite Parts
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Part_Collection">
+
Part Collection
+
</a>
+
</div>
+
</li>
+
  
<li class="nav-item">
+
@media only screen and (max-width: 600px) {
<a class="nav-link" href="https://2019.igem.org/Team:Ruperto_Carola/Safety">Safety</a>
+
</li>
+
  
<!-- HUMAN PRACTICES -->
+
#content-desktop {display: none;}
 +
#content-mobile {display: flex;}
  
<li class="nav-item dropdown">
+
}
<a class="nav-link dropdown-toggle" href="https://2019.igem.org/Team:Ruperto_Carola/Human_Practices" role="button" data-toggle="dropdown">
+
Human Practices
+
</a>
+
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Human_Practices">
+
Human Practices
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Public_Engagement">
+
Education & Engagement
+
</a>
+
</div>
+
</li>
+
  
<!-- AWARDS -->
+
/*
 +
*
 +
* ==========================================
 +
* CUSTOM UTIL CLASSES
 +
* ==========================================
 +
*
 +
*/
  
<li class="nav-item dropdown">
+
.dropdown-submenu {
<a class="nav-link dropdown-toggle" href="https://2019.igem.org/Team:Ruperto_Carola/Entrepreneurship" role="button" data-toggle="dropdown">
+
  position: relative;
Awards
+
}
</a>
+
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Entrepreneurship">
+
Entrepreneurship
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Hardware">
+
Hardware
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Measurement">
+
Measurement
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Model">
+
Model
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Plant">
+
Plant
+
</a>
+
<a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Software">
+
Software
+
</a>
+
</div>
+
</li>
+
  
<li class="nav-item">
+
.dropdown-submenu>a:after {
<a class="nav-link" href="https://igem.org/2019_Judging_Form?team=Ruperto_Carola">JUDGING FORM ⇗ </a>
+
  content: "\f0da";
</li>
+
  float: right;
 +
  border: none;
 +
  font-family: 'FontAwesome';
 +
}
  
</ul>
+
.dropdown-submenu>.dropdown-menu {
 +
  top: 0;
 +
  left: 100%;
 +
  margin-top: 0px;
 +
  margin-left: 0px;
 +
}
  
</div>
+
<!-- End -->
 +
</style>
  
 +
<!-- <div id="particles"></div> -->
  
 +
<nav class="navbar fixed-top navbar-expand-lg navbar-light">
  
</nav>
+
<div class="text-center container-fluid" id="content-desktop">
  
 +
  <a class="navbar-brand" href="https://2019.igem.org/Team:Ruperto_Carola">
 +
    <img src="https://static.igem.org/mediawiki/2019/8/8a/T--Ruperto_Carola--logo_navbar_test1.png" style="height:60px">
 +
  </a>
 +
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarTogglerDemo02">
 +
    <span class="navbar-toggler-icon"></span>
 +
  </button>
 +
 +
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
 +
 +
    <ul class="navbar-nav">
 +
 +
      <li class="nav-item narrow">
 +
        <a class="nav-link noline text-center" href="https://2019.igem.org/Team:Ruperto_Carola">
 +
          <img class="nav-pic" src="https://static.igem.org/mediawiki/2019/e/e7/T--Ruperto_Carola--Home.png"><br>Home
 +
        </a>
 +
      </li>
 +
 +
      <!-- TEAM -->
 +
 +
      <li class="nav-item dropdown narrow">
 +
        <a class="nav-link dropdown-toggle noline text-center" href="#" role="button" data-toggle="dropdown">
 +
          <img class="nav-pic" src="https://static.igem.org/mediawiki/2019/a/a6/T--Ruperto_Carola--Team.png"><br>Team
 +
        </a>
 +
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Team">
 +
            Team Members
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Attributions">
 +
          Attributions
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Sponsors">
 +
            Sponsors
 +
          </a>
 +
        </div>
 +
      </li>
 +
 +
      <!-- PROJECT -->
 +
 +
      <li class="nav-item dropdown narrow">
 +
        <a class="nav-link dropdown-toggle noline text-center" href="#" role="button" data-toggle="dropdown">
 +
          <img class="nav-pic" src="https://static.igem.org/mediawiki/2019/9/9b/T--Ruperto_Carola--Project.png"><br>Project
 +
        </a>
 +
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Description">
 +
          Description
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Notebook">
 +
          Notebook
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Contribution">
 +
          Contribution
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Results">
 +
          Results
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Demonstrate">
 +
          Demonstrate
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Improve">
 +
          Improve
 +
          </a>
 +
        </div>
 +
      </li>
 +
 +
      <!-- PARTS -->
 +
 +
      <li class="nav-item dropdown narrow">
 +
        <a class="nav-link dropdown-toggle noline text-center" href="#" role="button" data-toggle="dropdown">
 +
          <img class="nav-pic" src="https://static.igem.org/mediawiki/2019/5/57/T--Ruperto_Carola--Parts.png"><br>Parts
 +
        </a>
 +
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Parts">
 +
          Parts Overview
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Basic_Part">
 +
          Basic Parts
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Composite_Part">
 +
          Composite Parts
 +
          </a>
 +
        </div>
 +
      </li>
 +
 +
      <li class="nav-item narrow">
 +
        <a class="nav-link noline text-center" href="https://2019.igem.org/Team:Ruperto_Carola/Safety">
 +
          <img class="nav-pic" src="https://static.igem.org/mediawiki/2019/2/25/T--Ruperto_Carola--Safety.svg"><br>Safety
 +
        </a>
 +
      </li>
 +
 +
      <!-- HUMAN PRACTICES -->
 +
 +
      <li class="nav-item dropdown narrow">
 +
        <a class="nav-link dropdown-toggle noline text-center" href="#" role="button" data-toggle="dropdown">
 +
          <img class="nav-pic" src="https://static.igem.org/mediawiki/2019/1/11/T--Ruperto_Carola--Human.png"><br>Human Practices
 +
        </a>
 +
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Human_Practices">
 +
          Overview
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/HP/integrated">
 +
          Integrated Human Practices
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Public_Engagement">
 +
          Education & Engagement
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/HP/Expert_Interviews">
 +
          Expert Interviews
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Collaborations">
 +
          Collaborations
 +
          </a>
 +
        </div>
 +
      </li>
 +
 +
      <!-- In Silico -->
 +
 +
      <li class="nav-item dropdown narrow">
 +
        <a class="nav-link dropdown-toggle noline text-center" href="#" role="button" data-toggle="dropdown">
 +
          <img class="nav-pic" src="https://static.igem.org/mediawiki/2019/7/73/T--Ruperto_Carola--Modelling.png"><br>In Silico
 +
        </a>
 +
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Model">
 +
          Model
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Software">
 +
          Software
 +
          </a>
 +
        </div>
 +
      </li>
 +
 +
 +
      <li class="nav-item narrow align-content-center" style="font-size: .7rem !important;">
 +
        <a class="nav-link noline text-center" href="https://igem.org/2019_Judging_Form?team=Ruperto_Carola">
 +
                                      <img class="nav-pic" src="https://static.igem.org/mediawiki/2019/0/0c/T--Ruperto_Carola--Form.png"><br>
 +
                                      JUDGING FORM ⇗</a>
 +
      </li>
 +
 +
    </ul>
 +
 +
  </div>
 +
 +
 +
</div>
 +
 +
<!-- Mobile Navbar -- >
 +
<!-- DON'T TOUCH !!!!!!!  -->
 +
 +
<div class="text-center container-fluid" id="content-mobile">
 +
  <a class="navbar-brand" href="https://2019.igem.org/Team:Ruperto_Carola">
 +
    <img src="https://static.igem.org/mediawiki/2019/8/8a/T--Ruperto_Carola--logo_navbar_test1.png" style="height:60px">
 +
  </a>
 +
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarTogglerDemo02">
 +
    <span class="navbar-toggler-icon"></span>
 +
  </button>
 +
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
 +
    <ul class="navbar-nav">
 +
      <!--<li class="nav-item">
 +
        <a class="nav-link" href="https://2019.igem.org/Team:Ruperto_Carola">
 +
          Home
 +
        </a>
 +
      </li>-->
 +
 +
      <!-- TEAM -->
 +
      <li class="nav-item dropdown">
 +
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
 +
          Team
 +
        </a>
 +
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Team">
 +
            Team Members
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Attributions">
 +
          Attributions
 +
          </a>
 +
        </div>
 +
      </li>
 +
 +
      <!-- PROJECT -->
 +
 +
      <li class="nav-item dropdown">
 +
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
 +
          Project
 +
        </a>
 +
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Description">
 +
          Description
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Design">
 +
          Design
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Experiments">
 +
          Experiments
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Notebook">
 +
          Notebook
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Contribution">
 +
          Contribution
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Results">
 +
          Results
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Demonstrate">
 +
          Demonstrate
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Improve">
 +
          Improve
 +
        </div>
 +
      </li>
 +
 +
      <!-- PARTS -->
 +
 +
      <li class="nav-item dropdown">
 +
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
 +
          Parts
 +
        </a>
 +
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Parts">
 +
          Parts Overview
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Basic_Part">
 +
          Basic Parts
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Composite_Part">
 +
          Composite Parts
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Part_Collection">
 +
          Part Collection
 +
          </a>
 +
        </div>
 +
      </li>
 +
 +
      <!-- HUMAN PRACTICES -->
 +
 +
      <li class="nav-item dropdown">
 +
              <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
 +
          Human Practices
 +
        </a>
 +
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Human_Practices">
 +
          Human Practices
 +
          </a>
 +
        <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/HP/integrated">
 +
          Integrated Human Practices
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Public_Engagement">
 +
          Education & Engagement
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/HP/Expert_Interviews">
 +
          Expert Interviews
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/HP/Collaborations">
 +
          Collaborations
 +
          </a>
 +
        </div>
 +
      </li>
 +
 +
      <!-- AWARDS -->
 +
      <li class="nav-item dropdown">
 +
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
 +
          <it>In Silico</it>
 +
        </a>
 +
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Model">
 +
          Model
 +
          </a>
 +
          <a class="dropdown-item" href="https://2019.igem.org/Team:Ruperto_Carola/Software">
 +
          Software
 +
          </a>
 +
        </div>
 +
      </li>
 +
 +
 +
      <!-- SAFETY -->
 +
 +
      <li class="nav-item">
 +
        <a class="nav-link" href="https://2019.igem.org/Team:Ruperto_Carola/Safety">
 +
          Safety
 +
        </a>
 +
      </li>
 +
 +
      <!-- JUDGING FORM -->
 +
 +
      <li class="nav-item">
 +
        <a class="nav-link" href="https://igem.org/2019_Judging_Form?team=Ruperto_Carola">JUDGING FORM ⇗ </a>
 +
      </li>
 +
    </ul>
 +
  </div>
 +
</div>
 +
 +
</nav>
 
</html>
 
</html>

Latest revision as of 02:25, 13 December 2019