Difference between revisions of "Template:Open Science Global/navbar"

Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
−
    .hamburger-menu {
+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
−
   display: -webkit-box;
+
@import url('https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css');
−
   display: -ms-flexbox;
+
* {
 +
   margin: 0;
 +
  padding: 0;
 +
  box-sizing: border-box;
 +
   font-family: 'Poppins', sans-serif;
 +
}
 +
.sidebar {
 +
  position: fixed;
 +
  top: 0;
 +
  left: 0;
 +
  height: 100%;
 +
  width: 340px;
 +
  background: #11101d;
 +
  z-index: 100;
 +
  transition: all 0.5s ease;
 +
}
 +
.sidebar.close {
 +
  width: 78px;
 +
}
 +
.sidebar .logo-details {
 +
  height: 60px;
 +
  width: 100%;
 
   display: flex;
 
   display: flex;
−
   -webkit-box-orient: vertical;
+
   align-items: center;
−
  -webkit-box-direction: normal;
+
−
      -ms-flex-flow: column wrap;
+
−
          flex-flow: column wrap;
+
−
  -webkit-box-pack: justify;
+
−
      -ms-flex-pack: justify;
+
−
          justify-content: space-between;
+
−
    height: 31px;
+
−
    width: 36px;
+
−
  cursor: pointer;
+
−
  left: 96%;
+
−
  top: 10px;
+
−
  position: absolute;
+
−
  z-index: 1000;
+
 
}
 
}
−
 
+
.sidebar .logo-details i {
−
.hamburger-menu .top {
+
   font-size: 30px;
−
   -webkit-transform: rotate(0deg);
+
  color: #fff;
−
          transform: rotate(0deg);
+
  height: 50px;
 +
  min-width: 78px;
 +
  text-align: center;
 +
  line-height: 50px;
 
}
 
}
−
 
+
.sidebar .logo-details .logo_name {
−
.hamburger-menu .middle {
+
   font-size: 22px;
−
   opacity: 100%;
+
  color: #fff;
 +
  font-weight: 600;
 +
  transition: 0.3s ease;
 +
  transition-delay: 0.1s;
 
}
 
}
−
 
+
.sidebar.close .logo-details .logo_name {
−
.hamburger-menu .bottom {
+
   transition-delay: 0s;
−
   -webkit-transform: rotate(0deg);
+
  opacity: 0;
−
          transform: rotate(0deg);
+
  pointer-events: none;
 
}
 
}
−
 
+
.sidebar .nav-links {
−
.hamburger-menu .bar {
+
−
  height: 4px;
+
−
  background: black;
+
−
  border-radius: 5px;
+
−
  margin: 2.5px 0px;
+
−
  -webkit-transform-origin: left;
+
−
          transform-origin: left;
+
−
  -webkit-transition: all 0.5s;
+
−
  transition: all 0.5s;
+
−
}
+
−
 
+
−
.sidenav {
+
 
   height: 100%;
 
   height: 100%;
−
   /* 100% Full-height */
+
   padding: 30px 0 150px 0;
−
  width: 0;
+
   overflow: auto;
−
  /* 0 width - change this with JavaScript */
+
−
  position: fixed;
+
−
   /* Stay in place */
+
−
  z-index: 1;
+
−
  /* Stay on top */
+
−
  top: 0;
+
−
  /* Stay at the top */
+
−
  right: 0;
+
−
  background-color: #C3D6CA;
+
−
  padding-top: 5%;
+
−
  /* Place content 60px from the top */
+
−
  -webkit-transition: 0.5s;
+
−
  transition: 0.5s;
+
−
  /* 0.5 second transition effect to slide in the sidenav */
+
 
}
 
}
−
 
+
.sidebar.close .nav-links {
−
.sidenav .sidenav-content {
+
   overflow: visible;
−
   height: 85%;
+
}
 +
.sidebar .nav-links::-webkit-scrollbar {
 
   display: none;
 
   display: none;
−
  -webkit-box-orient: vertical;
 
−
  -webkit-box-direction: normal;
 
−
      -ms-flex-direction: column;
 
−
          flex-direction: column;
 
−
  gap: 9px;
 
 
}
 
}
−
 
+
.sidebar .nav-links li {
−
.sidenav .sidenav-content .sidenav-item {
+
   position: relative;
−
   display: -webkit-box;
+
  list-style: none;
−
   display: -ms-flexbox;
+
   transition: all 0.4s ease;
 +
}
 +
.sidebar .nav-links li:hover {
 +
  background: #1d1b31;
 +
}
 +
.sidebar .nav-links li .iocn-link {
 
   display: flex;
 
   display: flex;
−
   font-family: Roboto;
+
   align-items: center;
−
   text-transform: uppercase;
+
   justify-content: space-between;
−
  text-decoration: none!important;
+
}
−
   font-size: 1.2vw;
+
.sidebar.close .nav-links li .iocn-link {
−
   color: #000000!important;
+
   display: block
−
   -webkit-transition: 0.3s;
+
}
−
   transition: 0.3s;
+
.sidebar .nav-links li i {
−
   -webkit-writing-mode: vertical-rl;
+
   height: 50px;
−
      -ms-writing-mode: tb-rl;
+
   min-width: 78px;
−
          writing-mode: vertical-rl;
+
   text-align: center;
−
   font-weight: bold;
+
   line-height: 50px;
 +
  color: #fff;
 +
   font-size: 20px;
 
   cursor: pointer;
 
   cursor: pointer;
−
   width: 100%;
+
   transition: all 0.3s ease;
−
  -webkit-box-align: center;
+
−
      -ms-flex-align: center;
+
−
          align-items: center;
+
−
  -webkit-box-pack: center;
+
−
      -ms-flex-pack: center;
+
−
          justify-content: center;
+
−
  -ms-flex-preferred-size: 0;
+
−
      flex-basis: 0;
+
−
  -webkit-box-flex: 1;
+
−
      -ms-flex-positive: 1;
+
−
          flex-grow: 1;
+
 
}
 
}
−
 
+
.sidebar .nav-links li.showMenu i.arrow {
−
.sidenav .sidenav-content .sidenav-item:hover {
+
   transform: rotate(-180deg);
−
   background-color: #FF5875;
+
 
}
 
}
−
 
+
.sidebar.close .nav-links i.arrow {
−
 
+
  display: none;
−
.subpages a {
+
}
−
   font-family: Roboto;
+
.sidebar .nav-links li a {
 +
   display: flex;
 +
  align-items: center;
 
   text-decoration: none;
 
   text-decoration: none;
−
  font-size: 1.2rem;
 
−
  color: #000000;
 
−
  cursor: pointer;
 
−
  font-weight: bold;
 
−
  margin-left: 60px;
 
−
  border-bottom: 3px solid #000000;
 
−
  width: 70%;
 
−
  -webkit-transition: all 0.25s linear;
 
−
  transition: all 0.25s linear;
 
 
}
 
}
−
 
+
.sidebar .nav-links li a .link_name {
−
.subpages a:before {
+
  font-size: 18px;
−
   content: "";
+
  font-weight: 400;
 +
  color: #fff;
 +
  transition: all 0.4s ease;
 +
}
 +
.sidebar.close .nav-links li a .link_name {
 +
  opacity: 0;
 +
  pointer-events: none;
 +
}
 +
.sidebar .nav-links li .sub-menu {
 +
   padding: 6px 6px 14px 80px;
 +
  margin-top: -10px;
 +
  background: #1d1b31;
 +
  display: none;
 +
}
 +
.sidebar .nav-links li.showMenu .sub-menu {
 
   display: block;
 
   display: block;
−
  width: 70%;
 
−
  height: 3px;
 
−
  background-color: #ffffff;
 
−
  position: absolute;
 
−
  left: 60px;
 
−
  margin-top: 19px;
 
−
  -webkit-transform-origin: left;
 
−
          transform-origin: left;
 
−
  -webkit-transform: scale(0);
 
−
          transform: scale(0);
 
−
  -webkit-transition: 0.25s linear;
 
−
  transition: 0.25s linear;
 
−
  /*  will-change: transform; */
 
 
}
 
}
−
 
+
.sidebar .nav-links li .sub-menu a {
−
.subpages a:hover:before {
+
  color: #fff;
−
   -webkit-transform: scale(1);
+
  font-size: 15px;
−
          transform: scale(1);
+
   padding: 5px 0;
 +
  white-space: nowrap;
 +
  opacity: 0.6;
 +
  transition: all 0.3s ease;
 
}
 
}
−
 
+
.sidebar .nav-links li .sub-menu a:hover {
−
.subpages a:hover {
+
   opacity: 1;
−
   color: #ffffff;
+
 
}
 
}
−
 
+
.sidebar.close .nav-links li .sub-menu {
−
.project-subpages {
+
−
  display: none;
+
−
  -ms-flex-pack: distribute;
+
−
      justify-content: space-around;
+
−
  -webkit-writing-mode: horizontal-tb;
+
−
      -ms-writing-mode: lr-tb;
+
−
          writing-mode: horizontal-tb;
+
−
  -webkit-box-orient: vertical;
+
−
  -webkit-box-direction: normal;
+
−
      -ms-flex-direction: column;
+
−
          flex-direction: column;
+
 
   position: absolute;
 
   position: absolute;
−
   z-index: 9999;
+
   left: 100%;
−
  background: #FF5875;
+
   top: -10px;
−
  width: 30rem;
+
   margin-top: 0;
−
  height: 85%;
+
   padding: 10px 20px;
−
   top: 0px;
+
   border-radius: 0 6px 6px 0;
−
   right: 100%;
+
   opacity: 0;
−
   font-family: Roboto;
+
   display: block;
−
   text-decoration: none;
+
   pointer-events: none;
−
   font-size: 1rem;
+
   transition: 0s;
−
   color: #000000;
+
−
   cursor: pointer;
+
−
   font-weight: bold;
+
 
}
 
}
−
 
+
.sidebar.close .nav-links li:hover .sub-menu {
−
.project-item:hover .project-subpages {
+
   top: 0;
−
   display: -webkit-box;
+
   opacity: 1;
−
   display: -ms-flexbox;
+
  pointer-events: auto;
−
   display: flex;
+
   transition: all 0.4s ease;
 
}
 
}
−
 
+
.sidebar .nav-links li .sub-menu .link_name {
−
.labs-subpages {
+
 
   display: none;
 
   display: none;
−
  -ms-flex-pack: distribute;
 
−
      justify-content: space-around;
 
−
  -webkit-writing-mode: horizontal-tb;
 
−
      -ms-writing-mode: lr-tb;
 
−
          writing-mode: horizontal-tb;
 
−
  -webkit-box-orient: vertical;
 
−
  -webkit-box-direction: normal;
 
−
      -ms-flex-direction: column;
 
−
          flex-direction: column;
 
−
  position: absolute;
 
−
  z-index: 9999;
 
−
  background: #FF5875;
 
−
  width: 30rem;
 
−
  height: 85%;
 
−
  top: 0px;
 
−
  right: 100%!important;
 
−
  font-family: Roboto;
 
−
  text-decoration: none;
 
−
  font-size: 1rem;
 
−
  color: #000000;
 
−
  cursor: pointer;
 
−
  font-weight: bold;
 
 
}
 
}
−
 
+
.sidebar.close .nav-links li .sub-menu .link_name {
−
.lab-item:hover .labs-subpages {
+
   font-size: 18px;
−
   display: -webkit-box;
+
   opacity: 1;
−
   display: -ms-flexbox;
+
   display: block;
−
   display: flex;
+
 
}
 
}
−
 
+
.sidebar .nav-links li .sub-menu.blank {
−
.software-subpages {
+
   opacity: 1;
−
   display: none;
+
   pointer-events: auto;
−
   -ms-flex-pack: distribute;
+
   padding: 3px 20px 6px 16px;
−
      justify-content: space-around;
+
   opacity: 0;
−
   -webkit-writing-mode: horizontal-tb;
+
   pointer-events: none;
−
      -ms-writing-mode: lr-tb;
+
−
          writing-mode: horizontal-tb;
+
−
   -webkit-box-orient: vertical;
+
−
   -webkit-box-direction: normal;
+
−
      -ms-flex-direction: column;
+
−
          flex-direction: column;
+
−
  position: absolute;
+
−
  z-index: 9999;
+
−
  background: #FF5875;
+
−
  width: 30rem;
+
−
  height: 85%;
+
−
  top: 0px;
+
−
  right: 100%!important;
+
−
  font-family: Roboto;
+
−
  text-decoration: none;
+
−
  font-size: 1rem;
+
−
  color: #000000;
+
−
  cursor: pointer;
+
−
  font-weight: bold;
+
 
}
 
}
−
 
+
.sidebar .nav-links li:hover .sub-menu.blank {
−
.software-item:hover .software-subpages {
+
   top: 50%;
−
   display: -webkit-box;
+
   transform: translateY(-50%);
−
   display: -ms-flexbox;
+
}
 +
.sidebar .profile-details {
 +
  position: fixed;
 +
  bottom: 0;
 +
  width: 400px;
 
   display: flex;
 
   display: flex;
 +
  align-items: center;
 +
  justify-content: space-between;
 +
  background: #1d1b31;
 +
  padding: 12px 0;
 +
  transition: all 0.5s ease;
 
}
 
}
−
 
+
.sidebar.close .profile-details {
−
.hardware-subpages {
+
   background: none;
−
   display: none;
+
}
−
  -ms-flex-pack: distribute;
+
.sidebar.close .profile-details {
−
      justify-content: space-around;
+
   width: 78px;
−
  -webkit-writing-mode: horizontal-tb;
+
−
      -ms-writing-mode: lr-tb;
+
−
          writing-mode: horizontal-tb;
+
−
  -webkit-box-orient: vertical;
+
−
  -webkit-box-direction: normal;
+
−
      -ms-flex-direction: column;
+
−
          flex-direction: column;
+
−
  position: absolute;
+
−
  z-index: 9999;
+
−
  background: #FF5875;
+
−
   width: 30rem;
+
−
  height: 85%;
+
−
  top: 0px;
+
−
  right: 100%!important;
+
−
  font-family: Roboto;
+
−
  text-decoration: none;
+
−
  font-size: 1rem;
+
−
  color: #000000;
+
−
  cursor: pointer;
+
−
  font-weight: bold;
+
 
}
 
}
−
 
+
.sidebar .profile-details .profile-content {
−
.hardware-item:hover .hardware-subpages {
+
−
  display: -webkit-box;
+
−
  display: -ms-flexbox;
+
 
   display: flex;
 
   display: flex;
 +
  align-items: center;
 
}
 
}
−
 
+
.sidebar .profile-details img {
−
.hp-subpages {
+
  height: 52px;
 +
  width: 52px;
 +
  object-fit: cover;
 +
  border-radius: 16px;
 +
  margin: 0 14px 0 12px;
 +
  background: #1d1b31;
 +
  transition: all 0.5s ease;
 +
}
 +
.sidebar.close .profile-details img {
 +
  padding: 10px;
 +
}
 +
.sidebar .profile-details .profile_name,
 +
.sidebar .profile-details .job {
 +
  color: #fff;
 +
  font-size: 18px;
 +
  font-weight: 500;
 +
  white-space: nowrap;
 +
}
 +
.sidebar.close .profile-details i,
 +
.sidebar.close .profile-details .profile_name,
 +
.sidebar.close .profile-details .job {
 
   display: none;
 
   display: none;
−
  -ms-flex-pack: distribute;
 
−
      justify-content: space-around;
 
−
  -webkit-writing-mode: horizontal-tb;
 
−
      -ms-writing-mode: lr-tb;
 
−
          writing-mode: horizontal-tb;
 
−
  -webkit-box-orient: vertical;
 
−
  -webkit-box-direction: normal;
 
−
      -ms-flex-direction: column;
 
−
          flex-direction: column;
 
−
  position: absolute;
 
−
  z-index: 9999;
 
−
  background: #FF5875;
 
−
  width: 30rem;
 
−
  height: 85%;
 
−
  top: 0px;
 
−
  right: 100%!important;
 
−
  font-family: Roboto;
 
−
  text-decoration: none;
 
−
  font-size: 1rem;
 
−
  color: #000000;
 
−
  cursor: pointer;
 
−
  font-weight: bold;
 
 
}
 
}
−
 
+
.sidebar .profile-details .job {
−
.hp-item:hover .hp-subpages {
+
  font-size: 12px;
−
   display: -webkit-box;
+
}
−
   display: -ms-flexbox;
+
.home-section {
 +
   position: relative;
 +
  background: #E4E9F7;
 +
  height: 100vh;
 +
  left: 340px;
 +
  width: calc(100% - 260px);
 +
  transition: all 0.5s ease;
 +
}
 +
.sidebar.close ~ .home-section {
 +
  left: 78px;
 +
   width: calc(100% - 78px);
 +
}
 +
.home-section .home-content {
 +
  height: 60px;
 
   display: flex;
 
   display: flex;
 +
  align-items: center;
 
}
 
}
−
 
+
.home-section .home-content .bx-menu,
−
.team-subpages {
+
.home-section .home-content .text {
−
  display: none;
+
   color: #11101d;
−
  -ms-flex-pack: distribute;
+
   font-size: 35px;
−
      justify-content: space-around;
+
}
−
  -webkit-writing-mode: horizontal-tb;
+
.home-section .home-content .bx-menu {
−
      -ms-writing-mode: lr-tb;
+
   margin: 0 15px;
−
          writing-mode: horizontal-tb;
+
−
   -webkit-box-orient: vertical;
+
−
   -webkit-box-direction: normal;
+
−
      -ms-flex-direction: column;
+
−
          flex-direction: column;
+
−
  position: absolute;
+
−
  z-index: 9999;
+
−
  background: #FF5875;
+
−
  width: 30rem;
+
−
  height: 85%;
+
−
  top: 0px;
+
−
  right: 100%!important;
+
−
  font-family: Roboto;
+
−
   text-decoration: none;
+
−
  font-size: 1rem;
+
−
  color: #000000;
+
 
   cursor: pointer;
 
   cursor: pointer;
−
   font-weight: bold;
+
}
 +
.home-section .home-content .text {
 +
  font-size: 26px;
 +
   font-weight: 600;
 +
}
 +
@media (max-width: 420px) {
 +
  .sidebar.close .nav-links li .sub-menu {
 +
    display: none;
 +
  }
 
}
 
}
  
−
.team-item:hover .team-subpages {
 
−
  display: -webkit-box;
 
−
  display: -ms-flexbox;
 
−
  display: flex;
 
−
}
 
  
 
</style>
 
</style>
  
 
      
 
      
−
    <!--#SIDE-NAVIGATION-MENU--------------------------------------------->
+
<body>
−
    <body>
+
  <div class="sidebar close">
−
    <div class="hamburger-menu">
+
    <div class="logo-details">
−
        <div class="bar top"></div>
+
      <i class='bx bxl-c-plus-plus'></i>
−
        <div class="bar middle"></div>
+
      <span class="logo_name">Friendzymes</span>
−
        <div class="bar bottom"></div>
+
 
     </div>
 
     </div>
−
     <div id="mySidenav" class="sidenav">
+
     <ul class="nav-links">
−
        <div class="sidenav-content">
+
      <li>
−
            <div class="sidenav-item project-item">Project
+
        <a href="#">
−
                <div class="subpages project-subpages">
+
          <i class='bx bx-grid-alt' ></i>
−
                    <a href="#">Description</a>
+
          <span class="link_name">Home</span>
−
                    <a href="#">Engineering</a>
+
        </a>
−
                    <a href="#">Model</a>
+
        <ul class="sub-menu blank">
−
                    <a href="#">Contribution</a>
+
          <li><a class="link_name" href="https://2021.igem.org/Team:Open_Science_Global">Home</a></li>
−
                    <a href="#">Proof of Concept</a>
+
        </ul>
−
                    <a href="#">Proposed Implementation</a>
+
      </li>
−
                </div>
+
      <li>
−
            </div>
+
        <div class="iocn-link">
−
            <div class="sidenav-item software-item"><a href="https://2021.igem.org/Team:Open_Science_Global/Software">Software</a>
+
          <a href="#">
−
            </div>
+
            <i class='bx bx-collection' ></i>
−
            <div class="sidenav-item lab-item">Labs
+
            <span class="link_name">Project</span>
−
                <div class="subpages labs-subpages">
+
          </a>
−
                    <a href="#">Design</a>
+
          <i class='bx bxs-chevron-down arrow' ></i>
−
                    <a href="#">Results</a>
+
−
                    <a href="#">Protocols</a>
+
−
                    <a href="#">Notebook</a>
+
−
                    <a href="https://2021.igem.org/Team:Open_Science_Global/Safety">Safety</a>
+
−
                </div>
+
−
            </div>
+
−
            <div class="sidenav-item hardware-item">Hardware
+
−
                <div class="subpages hardware-subpages">
+
−
                    <a href="#">subpage</a>
+
−
                    <a href="#">subpage</a>
+
−
                    <a href="#">subpage</a>
+
−
                    <a href="#">subpage</a>
+
−
                </div>
+
−
            </div>
+
−
            <div class="sidenav-item hp-item">HP
+
−
                <div class="subpages hp-subpages">
+
−
                    <a href="https://2021.igem.org/Team:Open_Science_Global/Human_Practices">Main/General</a>
+
−
                    <a href="https://2021.igem.org/Team:Open_Science_Global/Human_Practices">Integrated Human Practices</a>
+
−
                    <a href="https://2021.igem.org/Team:Open_Science_Global/Communication">Education &amp; Communication</a>
+
−
                </div>
+
−
            </div>
+
−
            <div class="sidenav-item team-item">Team
+
−
                <div class="subpages team-subpages">
+
−
                    <a href="#">About us</a>
+
−
                    <a href="#">Inclusivity</a>
+
−
                    <a href="#">Collaborations</a>
+
−
                    <a href="#">Sponsors</a>
+
−
                    <a href="#">Partnership</a>
+
−
                    <a href="https://2021.igem.org/Team:Open_Science_Global/Attributions">Attributions</a>
+
−
                </div>
+
−
            </div>
+
−
            <div class="sidenav-item">Awards</div>
+
 
         </div>
 
         </div>
 +
        <ul class="sub-menu">
 +
          <li><a class="link_name" href="#">Project</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Description">Description</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Engineering">Engineering Success</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Implementation">Proposed Implementation</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Proof_Of_Concept">Proof of Concept</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Entrepreneurship">Entrepreneurship</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Notebook">Notebook</a></li>
 +
        </ul>
 +
      </li>
 +
      <li>
 +
        <div class="iocn-link">
 +
          <a href="#">
 +
            <i class='bx bx-book-alt' ></i>
 +
            <span class="link_name">Results</span>
 +
          </a>
 +
          <i class='bx bxs-chevron-down arrow' ></i>
 +
        </div>
 +
        <ul class="sub-menu">
 +
          <li><a class="link_name" href="#">Results</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Software">Software</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Wetware">Wetware</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Parts">Parts</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Part_Collection">Parts Collection</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Hardware">Hardware</a></li>
 +
        </ul>
 +
      </li>
 +
      <li>
 +
        <div class="iocn-link">
 +
          <a href="#">
 +
            <i class='bx bx-plug' ></i>
 +
            <span class="link_name">Engagement</span>
 +
          </a>
 +
          <i class='bx bxs-chevron-down arrow' ></i>
 +
        </div>
 +
        <ul class="sub-menu">
 +
          <li><a class="link_name" href="#">Engagement</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Human_Practices">Integrated Human Practices</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Education">Education</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Safety">Safety</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Communication">Communication</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Collaborations">Collaboration</a></li>
 +
        </ul>
 +
      </li>
 +
      <li>
 +
        <div class="iocn-link">
 +
          <a href="#">
 +
            <i class='bx bx-compass' ></i>
 +
            <span class="link_name">Team</span>
 +
          </a>
 +
          <i class='bx bxs-chevron-down arrow' ></i>
 +
        </div>
 +
        <ul class="sub-menu">
 +
          <li><a class="link_name" href="#">Team</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Team">Team Members</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Attributions">Attributions &amp; Sponsors</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Inclusivity">Inclusivity</a></li>
 +
        </ul>
 +
      </li>
 +
      <li>
 +
        <div class="iocn-link">
 +
          <a href="#">
 +
            <i class='bx bx-compass' ></i>
 +
            <span class="link_name">For Judges</span>
 +
          </a>
 +
          <i class='bx bxs-chevron-down arrow' ></i>
 +
        </div>
 +
        <ul class="sub-menu">
 +
          <li><a class="link_name" href="#">For Judges</a></li>
 +
          <li><a href="https://igem.org/2021_Judging_Form?id=4103">Judging Form</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Contribution">Contribution/Medals</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Part_Collection">Parts Collection</a></li>
 +
          <li><a href="https://github.com/Open-Science-Global">Software</a></li>
 +
          <li><a href="https://2021.igem.org/Team:Open_Science_Global/Excellence">Excellence: Diversity</a></li>
 +
        </ul>
 +
      </li>
 +
</ul>
 +
  </div>
 +
  <section class="home-section">
 +
    <div class="home-content">
 +
      <i class='bx bx-menu' ></i>
 +
      <span class="text">Drop Down Sidebar</span>
 
     </div>
 
     </div>
−
   
+
  </section>
−
    <script>
+
  <script>
−
        //Open and Closing side navigation menu
+
  let arrow = document.querySelectorAll(".arrow");
−
    function open_close_nav(){
+
  for (var i = 0; i < arrow.length; i++) {
−
    //When open or closed, change width and animate hamburguer menu
+
    arrow[i].addEventListener("click", (e)=>{
−
    if (document.querySelector(".sidenav").style.width === "0px"){
+
  let arrowParent = e.target.parentElement.parentElement;//selecting main parent of arrow
−
        //hamburger animation
+
  arrowParent.classList.toggle("showMenu");
−
        document.querySelector(".top").style.transform = ("rotate(39.55deg)")
+
     });
−
        document.querySelector(".middle").style.opacity = "0"
+
  }
−
        document.querySelector(".bottom").style.transform = ("rotate(-38deg)")
+
  let sidebar = document.querySelector(".sidebar");
−
        //side menu width
+
  let sidebarBtn = document.querySelector(".bx-menu");
−
        document.querySelector(".sidenav").style.width = "5.9vw"
+
  console.log(sidebarBtn);
−
        document.querySelector(".sidenav-content").style.display = "flex"
+
  sidebarBtn.addEventListener("click", ()=>{
−
     }
+
     sidebar.classList.toggle("close");
−
    else{
+
  });
−
        //hamburger animation
+
  </script>
−
        document.querySelector(".top").style.transform = ("rotate(0deg)")
+
</body>
−
        document.querySelector(".middle").style.opacity = "100"
+
</html>
−
        document.querySelector(".bottom").style.transform = ("rotate(0deg)")
+
−
        //side menu width
+
−
        document.querySelector(".sidenav").style.width = "0"
+
−
        document.querySelector(".sidenav-content").style.display = "none"
+
−
     }
+
−
}
+
−
 
+
−
document.querySelector(".sidenav").style.width = "0px"
+
−
document.querySelector(".hamburger-menu").onclick = open_close_nav;
+
−
    </script>
+
−
    </body>
+
−
    </html>
+

Revision as of 15:37, 21 October 2021

Friendzymes
Drop Down Sidebar