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

Line 1: Line 1:
−
{{Open_Science_Global/main}}
 
−
 
 
<html>
 
<html>
 
<style>
 
<style>
 +
    .hamburger-menu {
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -webkit-box-orient: vertical;
 +
  -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.1%;
 +
  top: 3%;
 +
  position: absolute;
 +
  z-index: 1000;
 +
}
  
−
@import url("https://fonts.googleapis.com/css2?family=Otomanopee+One&display=swap");
+
.hamburger-menu .top {
 +
  -webkit-transform: rotate(0deg);
 +
          transform: rotate(0deg);
 +
}
  
 +
.hamburger-menu .middle {
 +
  opacity: 100%;
 +
}
  
−
.navbar {
+
.hamburger-menu .bottom {
 +
  -webkit-transform: rotate(0deg);
 +
          transform: rotate(0deg);
 +
}
 +
 
 +
.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%;
 +
  /* 100% Full-height */
 +
  width: 0;
 +
  /* 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 */
 +
}
 +
 
 +
.sidenav .sidenav-content {
 +
  height: 85%;
 +
  display: none;
 +
  -webkit-box-orient: vertical;
 +
  -webkit-box-direction: normal;
 +
      -ms-flex-direction: column;
 +
          flex-direction: column;
 +
  gap: 9px;
 +
}
 +
 
 +
.sidenav .sidenav-content .sidenav-item {
 
   display: -webkit-box;
 
   display: -webkit-box;
 
   display: -ms-flexbox;
 
   display: -ms-flexbox;
 
   display: flex;
 
   display: flex;
−
   background: #262C54;
+
   font-family: Roboto;
−
   -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
+
  text-transform: uppercase;
−
           box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);,
+
  text-decoration: none;
 +
  font-size: 2vh;
 +
  color: #000000;
 +
   -webkit-transition: 0.3s;
 +
  transition: 0.3s;
 +
  -webkit-writing-mode: vertical-rl;
 +
      -ms-writing-mode: tb-rl;
 +
           writing-mode: vertical-rl;
 +
  font-weight: bold;
 +
  cursor: pointer;
 
   width: 100%;
 
   width: 100%;
 +
  -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;
 
}
 
}
  
−
.navbar img {
+
.sidenav .sidenav-content .sidenav-item:hover {
−
  height: 50px;
+
   background-color: #FF5875;
−
  width: auto;
+
−
  margin-top: 2px;
+
−
   margin-left: 15px;
+
 
}
 
}
  
−
.logo {
+
.subpages a {
−
   text-decoration: none!important;
+
  font-family: Roboto;
−
   font-weight: 300;
+
   text-decoration: none;
−
   color: #FFFFFF!important;
+
   font-size: 1.2rem;
−
   font-size: 1.7em;
+
   color: #000000;
−
   font-family: "Otomanopee One";
+
   cursor: pointer;
−
   margin-top: 20px;
+
   font-weight: bold;
−
   margin-left: 12px;
+
   margin-left: 60px;
 +
   border-bottom: 3px solid #000000;
 +
  width: 70%;
 +
  -webkit-transition: all 0.25s linear;
 +
  transition: all 0.25s linear;
 
}
 
}
  
−
.logo span {
+
.subpages a:before {
−
   color: #AEB6D8;
+
   content: "";
 +
  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; */
 
}
 
}
  
−
nav {
+
.subpages a:hover:before {
 +
  -webkit-transform: scale(1);
 +
          transform: scale(1);
 +
}
 +
 
 +
.subpages a:hover {
 +
  color: #ffffff;
 +
}
 +
 
 +
.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;
 +
  z-index: 9999;
 +
  background: #FF5875;
 +
  width: 30rem;
 +
  height: 85%;
 +
  top: 0px;
 +
  right: 100%;
 +
  font-family: Roboto;
 +
  text-decoration: none;
 +
  font-size: 1rem;
 +
  color: #000000;
 +
  cursor: pointer;
 +
  font-weight: bold;
 +
}
 +
 
 +
.project-item:hover .project-subpages {
 
   display: -webkit-box;
 
   display: -webkit-box;
 
   display: -ms-flexbox;
 
   display: -ms-flexbox;
 
   display: flex;
 
   display: flex;
−
  -webkit-box-pack: end;
 
−
      -ms-flex-pack: end;
 
−
          justify-content: flex-end;
 
−
  background: none;
 
−
  height: 60px;
 
−
  width: 100%;
 
−
  padding: 0;
 
 
}
 
}
  
−
nav ul {
+
.labs-subpages {
−
   display: -webkit-inline-box;
+
   display: none;
−
   display: -ms-inline-flexbox;
+
  -ms-flex-pack: distribute;
−
  display: inline-flex;
+
      justify-content: space-around;
−
   list-style: none;
+
   -webkit-writing-mode: horizontal-tb;
−
   -webkit-box-align: center;
+
      -ms-writing-mode: lr-tb;
−
       -ms-flex-align: center;
+
          writing-mode: horizontal-tb;
−
           align-items: center;
+
   -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: 77px;
 +
  font-family: Roboto;
 +
  text-decoration: none;
 +
  font-size: 1rem;
 +
  color: #000000;
 +
  cursor: pointer;
 +
  font-weight: bold;
 
}
 
}
  
−
nav a {
+
.lab-item:hover .labs-subpages {
−
   color: #FFFFFF!important;
+
   display: -webkit-box;
−
   font-size: 1.3em;
+
   display: -ms-flexbox;
−
   padding: .1em 1.3em;
+
  display: flex;
−
   text-decoration: none!important;
+
}
−
   font-family: Arial, Helvetica, sans-serif;
+
 
 +
.software-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;
 +
  z-index: 9999;
 +
  background: #FF5875;
 +
  width: 30rem;
 +
  height: 85%;
 +
  top: 0px;
 +
  right: 77px;
 +
  font-family: Roboto;
 +
   text-decoration: none;
 +
   font-size: 1rem;
 +
  color: #000000;
 +
  cursor: pointer;
 
   font-weight: bold;
 
   font-weight: bold;
 
}
 
}
  
−
</style>
+
.software-item:hover .software-subpages {
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
}
  
−
    <div class = "navbar">
+
.hardware-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;
 +
  z-index: 9999;
 +
  background: #FF5875;
 +
  width: 30rem;
 +
  height: 85%;
 +
  top: 0px;
 +
  right: 77px;
 +
  font-family: Roboto;
 +
  text-decoration: none;
 +
  font-size: 1rem;
 +
  color: #000000;
 +
  cursor: pointer;
 +
  font-weight: bold;
 +
}
  
−
          <a href="#"> <img src="https://static.igem.org/mediawiki/2021/6/6b/T--Open_Science_Global--freddie.png" alt="Freddie"></a>
+
.hardware-item:hover .hardware-subpages {
−
            <a href="#" class="logo"> Friend<span>zymes</span> </a>           
+
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
}
  
−
            <nav>
+
.hp-subpages {
−
                <ul>
+
  display: none;
−
                   
+
  -ms-flex-pack: distribute;
−
                    <li><a href="#">Project</a></li>
+
      justify-content: space-around;
−
                    <li><a href="#">Labs</a></li>
+
  -webkit-writing-mode: horizontal-tb;
−
                    <li><a href="#">Parts</a></li>
+
      -ms-writing-mode: lr-tb;
−
                    <li><a href="#">Software</a></li>
+
          writing-mode: horizontal-tb;
−
                    <li><a href="#">Hardware</a></li>
+
  -webkit-box-orient: vertical;
−
                    <li><a href="#">Human Practices</a></li>
+
  -webkit-box-direction: normal;
−
                    <li><a href="#">Team</a></li>
+
      -ms-flex-direction: column;
−
                    <li><a href="#">For Judges</a></li>
+
          flex-direction: column;
−
                   
+
  position: absolute;
−
                </ul>
+
  z-index: 9999;
 +
  background: #FF5875;
 +
  width: 30rem;
 +
  height: 85%;
 +
  top: 0px;
 +
  right: 77px;
 +
  font-family: Roboto;
 +
  text-decoration: none;
 +
  font-size: 1rem;
 +
  color: #000000;
 +
  cursor: pointer;
 +
  font-weight: bold;
 +
}
  
−
            </nav>
+
.hp-item:hover .hp-subpages {
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
}
 +
 
 +
.team-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;
 +
  z-index: 9999;
 +
  background: #FF5875;
 +
  width: 30rem;
 +
  height: 85%;
 +
  top: 0px;
 +
  right: 77px;
 +
  font-family: Roboto;
 +
  text-decoration: none;
 +
  font-size: 1rem;
 +
  color: #000000;
 +
  cursor: pointer;
 +
  font-weight: bold;
 +
}
 +
 
 +
.team-item:hover .team-subpages {
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
}
 +
 
 +
</style>
 +
 
 +
   
 +
    <!--#SIDE-NAVIGATION-MENU--------------------------------------------->
 +
    <body>
 +
    <div class="hamburger-menu">
 +
        <div class="bar top"></div>
 +
        <div class="bar middle"></div>
 +
        <div class="bar bottom"></div>
 
     </div>
 
     </div>
−
</html>
+
    <div id="mySidenav" class="sidenav">
 +
        <div class="sidenav-content">
 +
            <div class="sidenav-item project-item">Project
 +
                <div class="subpages project-subpages">
 +
                    <a href="#">Description</a>
 +
                    <a href="#">Engineering</a>
 +
                    <a href="#">Model</a>
 +
                    <a href="#">Contribution</a>
 +
                    <a href="#">Proof of Concept</a>
 +
                    <a href="#">Proposed Implementation</a>
 +
                </div>
 +
            </div>
 +
            <div class="sidenav-item software-item">Software
 +
                <div class="subpages software-subpages">
 +
                    <a href="#">subpage</a>
 +
                    <a href="#">subpage</a>
 +
                    <a href="#">subpage</a>
 +
                    <a href="#">subpage</a>
 +
                </div>
 +
            </div>
 +
            <div class="sidenav-item lab-item">Labs
 +
                <div class="subpages labs-subpages">
 +
                    <a href="#">Design</a>
 +
                    <a href="#">Results</a>
 +
                    <a href="#">Protocols</a>
 +
                    <a href="#">Notebook</a>
 +
                    <a href="#">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="#">Main/General</a>
 +
                    <a href="#">Integrated Human Practices</a>
 +
                    <a href="#">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="#">Attributions</a>
 +
                </div>
 +
            </div>
 +
            <div class="sidenav-item">Awards</div>
 +
        </div>
 +
    </div>
 +
   
 +
    <script>
 +
        //Open and Closing side navigation menu
 +
    function open_close_nav(){
 +
    //When open or closed, change width and animate hamburguer menu
 +
    if (document.querySelector(".sidenav").style.width === "0px"){
 +
        //hamburger animation
 +
        document.querySelector(".top").style.transform = ("rotate(39.55deg)")
 +
        document.querySelector(".middle").style.opacity = "0"
 +
        document.querySelector(".bottom").style.transform = ("rotate(-38deg)")
 +
        //side menu width
 +
        document.querySelector(".sidenav").style.width = "5.9vw"
 +
        document.querySelector(".sidenav-content").style.display = "flex"
 +
    }
 +
    else{
 +
        //hamburger animation
 +
        document.querySelector(".top").style.transform = ("rotate(0deg)")
 +
        document.querySelector(".middle").style.opacity = "100"
 +
        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 12:28, 21 October 2021