Difference between revisions of "Team:Imperial College/Templates/NavBar"

Line 155: Line 155:
  
 
/********************************* NAVBAR  ********************************/
 
/********************************* NAVBAR  ********************************/
−
 
−
.nav{
 
−
 
−
width:100%;
 
−
      height:auto;
 
−
background:white;
 
−
margin-bottom: 2%;
 
−
        position:fixed;
 
−
        z-index: 40;
 
−
}
 
  
 
.logo{
 
.logo{
Line 188: Line 178:
 
}
 
}
  
−
.dropdown {
+
// Navigation Variables
−
    float: right;
+
$content-width: 1000px;
−
    width: 80%;
+
$breakpoint: 799px;
−
    text-align: center;
+
$nav-height: 70px;
−
    background-color:none;
+
$nav-background: white;
−
}
+
$nav-font-color: #24305E;
 +
$link-hover-color: #7EF397;
 +
$link-hover-shadow: 1px 1px #D0FADE;
 +
$link-hover-color: #7EF397;
 +
$sub-link-hover-color: rgb(248, 59, 122);
 +
$sub-link-hover-shadow lightpink;
  
−
.dropdown ul {
+
// Outer navigation wrapper
−
    margin:0;
+
.navigation {
−
    padding-top:45px;
+
  height: $nav-height;
−
list-style: none;
+
  background: $nav-background;
−
    background-color:none;
+
−
   
+
 
}
 
}
−
.dropdown ul li {
+
.navigation {
−
    float: left;
+
  height: 70px;
−
    cursor:pointer;
+
  background: white;
−
    color:white;
+
−
    font-size: 14px;
+
−
    background-color:none;
+
−
    padding-right:8px;
+
−
    width:150px;
+
−
    height:30px;
+
−
    position: relative;
+
−
    margin-top:5px;
+
 
}
 
}
  
−
.dropdown ul li a{
+
// Container with no padding for navbar
−
    padding:0;
+
.nav-container {
−
    color: #24305E ;
+
  max-width: 1000px $content-width;
−
    background-color: none;
+
  margin: 0 auto;
−
    text-decoration: none;
+
−
    position: relative;
+
−
    display: block;
+
−
    text-shadow: 1px 1px lightgrey;
+
−
    transition:0.65s;
+
 
}
 
}
  
−
.dropdown ul ul li a{
+
// Navigation
−
     padding:0;
+
nav {
−
     background-color: none;
+
  float: right;
 +
  ul {
 +
    list-style: none;
 +
    margin: 0;
 +
     padding: 0;
 +
     li {
 +
      float: left;
 +
      position: relative;
 +
      a,
 +
      a:visited {
 +
        display: block;
 +
        padding: 0 20px;
 +
        line-height: $nav-height;
 +
        background: $nav-background;
 +
        color: $nav-font-color;
 +
        text-shadow: 1px 1px lightgrey;
 +
        transition:0.65s;
 +
        text-decoration: none;
 +
        &:hover {
 +
          text-shadow: $link-hover-shadow;
 +
          color: $link-hover-color;
 +
        }
 +
        &:not(:only-child):after {
 +
          padding-left: 4px;
 +
          content: ' ▾';
 +
        }
 +
      } // Dropdown list
 +
      ul li {
 +
        min-width: 190px;
 +
        a {
 +
          padding: 15px;
 +
          line-height: 20px;
 +
          &:hover{
 +
            color: $sub-link-hover-color;
 +
            text-shadow: $sub-link-hover-shadow;
 +
          }
 +
        }
 +
      }
 +
    }
 +
  }
 
}
 
}
  
−
.dropdown ul ul{
+
// Dropdown list binds to JS toggle event
−
    margin:0;
+
.nav-dropdown {
−
    padding:0;
+
  position: absolute;
−
    top:30px;
+
  display: none;
−
list-style: none;
+
  z-index: 1;
−
    background-color:white;
+
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
−
    box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
+
−
    position: absolute;
+
−
    display: none;
+
 
}
 
}
  
 +
/* Mobile navigation */
  
−
 
+
// Binds to JS Toggle
−
.dropdown ul ul a{
+
.nav-mobile {
−
    background-color:none;
+
  display: none;
−
    width:100%;
+
  position: absolute;
−
    text-align: left;
+
  top: 0;
−
    margin:0;
+
  right: 0;
−
    padding-left:2px;
+
  background: $nav-background;
−
    box-sizing: border-box;
+
  height: $nav-height;
−
}
+
  width: $nav-height;
−
ul.sub1 li {
+
−
    background-color:none;
+
−
    margin-left: 25%;
+
−
    width:110px;
+
−
}
+
−
ul.sub2 li {
+
−
    background-color: none;
+
−
    margin-left: 5%;
+
−
    padding:0;
+
−
    width: 180px;
+
 
}
 
}
  
−
ul.sub3 li {
+
@media only screen and (max-width: 798px) {
−
     background-color:none;
+
  // Hamburger nav visible on mobile only
−
    margin-left: 25%;
+
  .nav-mobile {
−
     width:80px;
+
     display: block;
 +
  }
 +
  nav {
 +
  width: 100%;
 +
    padding: $nav-height 0 15px;
 +
    ul {
 +
      display: none;
 +
      li {
 +
        float: none;
 +
        a {
 +
          padding: 15px;
 +
          line-height: 20px;
 +
        }
 +
        ul li a {
 +
          padding-left: 30px;
 +
        }
 +
      }
 +
     }
 +
  }
 +
  .nav-dropdown {
 +
    position: static;
 +
  }
 
}
 
}
−
 
+
@media screen and (min-width: $breakpoint) {
−
.dropdown ul li a:hover{
+
  .nav-list {
−
     color: #7EF397;
+
     display: block !important;
−
    text-shadow: 1px 1px #D0FADE;
+
  }
 
}
 
}
−
 
+
#nav-toggle {
−
.dropdown ul li ul li a:hover{
+
  position: absolute;
−
     color: rgb(248, 59, 122);
+
  left: 18px;
−
     text-shadow: lightpink;
+
  top: 22px;
−
}
+
  cursor: pointer;
−
 
+
  padding: 10px 35px 16px 0px;
−
.dropdown ul li:hover > ul {
+
  span,
−
     display:block;
+
  span:before,
 +
  span:after {
 +
     cursor: pointer;
 +
    border-radius: 1px;
 +
    height: 5px;
 +
    width: 35px;
 +
    background: $nav-font-color;
 +
    position: absolute;
 +
     display: block;
 +
    content: '';
 +
    transition: all 300ms ease-in-out;
 +
  }
 +
  span:before {
 +
    top: -10px;
 +
  }
 +
  span:after {
 +
    bottom: -10px;
 +
  }
 +
  &.active span {
 +
    background-color: transparent;
 +
    &:before,
 +
    &:after {
 +
      top: 0;
 +
     }
 +
    &:before {
 +
      transform: rotate(45deg);
 +
    }
 +
    &:after {
 +
      transform: rotate(-45deg);
 +
    }
 +
  }
 
}
 
}
  
Line 393: Line 451:
  
 
<body>
 
<body>
−
<div class="nav">
+
<section class="navigation">
−
                <div class="logo">
+
  <div class="nav-container">
−
                    <a href="#"> <img class="pixcell" src= "https://static.igem.org/mediawiki/2018/8/80/T--Imperial_College--pixcell.png" ></a>
+
    <div class="logo">
−
                    <a href="#"> <img class="iclogo "src="https://static.igem.org/mediawiki/2018/8/8b/T--Imperial_College--college.png" ></a>
+
      <a href="#"> <img class="pixcell" src="https://static.igem.org/mediawiki/2018/8/80/T--Imperial_College--pixcell.png"></a>
−
                </div>
+
      <a href="#"> <img class="iclogo " src="https://static.igem.org/mediawiki/2018/8/8b/T--Imperial_College--college.png"></a>
−
           
+
  </div>
−
                <div class="dropdown">
+
    <nav>
−
                    <ul>
+
      <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
−
                        <li><a href="#">PROJECT<i class="fa fa-caret-down" aria-hidden="true"></i></a>
+
      <ul class="nav-list">
−
                        <ul class= "sub1">
+
        <li>
−
                              <li><a href="https://2018.igem.org/Team:Imperial_College/Project"">DESCRIPTION</a>
+
          <a href="#">PROJECT<i class="fa fa-caret-down" aria-hidden="true"></i></a>
−
                              <li><a href="https://2018.igem.org/Team:Imperial_College/Design">DESIGN</a>
+
          <ul class="nav-dropdown">
−
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Applied_Design">APPLICATIONS</a>
+
            <li>
−
                              <li><a href="https://2018.igem.org/Team:Imperial_College/Achievements">ACHIEVEMENTS</a>
+
              <a href="https://2018.igem.org/Team:Imperial_College/Project" "="">DESCRIPTION</a>
−
                              <li><a href="https://2018.igem.org/Team:Imperial_College/Future">FUTURE WORK</a>
+
            </li>
−
                            <li><a href="https://2018.igem.org/Team:Imperial_College/Brainstorming">BRAINSTORM</a>
+
            <li>
−
                        </ul>
+
              <a href="https://2018.igem.org/Team:Imperial_College/Mechanisms">DESIGN</a>
−
                      </li>
+
            </li>
−
 
+
            <li>
−
                      <li><a href="#">DRY LAB<i class="fa fa-caret-down" aria-hidden="true"></i></a>
+
              <a href="https://2018.igem.org/Team:Imperial_College/Applications">APPLICATIONS</a>
−
                        <ul class= "sub1">
+
            </li>
−
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Dryover">OVERVIEW</a>
+
            <li>
−
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Model">MODELLING</a>
+
              <a href="https://2018.igem.org/Team:Imperial_College/Achievements">ACHIEVEMENTS</a>
−
                              <li><a href="https://2018.igem.org/Team:Imperial_College/Hardware">HARDWARE</a>
+
            </li>
−
                          </ul>
+
            <li>
−
                      </li>
+
              <a href="https://2018.igem.org/Team:Imperial_College/Future">FUTURE WORK</a>
−
                        <li><a href="#">WET LAB<i class="fa fa-caret-down" aria-hidden="true"></i></a>
+
          </li>
−
                            <ul class= "sub1">
+
          <li>
−
                                    <li><a href="https://2018.igem.org/Team:Imperial_College/Wetover">OVERVIEW</a>
+
              <a href="https://2018.igem.org/Team:Imperial_College/Brainstorming">BRAINSTORM</a>
−
                                  <li><a href="https://2018.igem.org/Team:Imperial_College/Demonstrate">RESULTS</a></li>
+
            </li>
−
                                  <li><a href="https://2018.igem.org/Team:Imperial_College/Experiments">EXPERIMENTS</a></li>
+
          </ul>
−
                                  <li><a href="https://2018.igem.org/Team:Imperial_College/Protocols">PROTOCOLS</a></li>
+
        </li>
−
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Parts">PARTS</a></li>
+
        <li>
−
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Measurement">BASIC</a></li>                              
+
          <a href="#">DRY LAB<i class="fa fa-caret-down" aria-hidden="true"></i></a>
−
                            </ul>
+
          <ul class="nav-dropdown">
−
                            </li>
+
            <li>
−
                    <li><a href=" https://2018.igem.org/Team:Imperial_College/Software">SOFTWARE<i class="fa fa-caret-down" aria-hidden="true"></i></a>
+
              <a href="https://2018.igem.org/Team:Imperial_College/Dryover">OVERVIEW</a>
−
                        <li><a href="#">HUMAN PRACTICES<i class="fa fa-caret-down" aria-hidden="true"></i></a>
+
            </li>
−
                            <ul class= "sub2">
+
            <li>
−
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Human_Practices">OVERVIEW</a></li>
+
              <a href="https://2018.igem.org/Team:Imperial_College/Modelling">MODELLING</a>
−
                                  <li><a href="https://2018.igem.org/Team:Imperial_College/IHP">INTEGRATED HP</a></li>
+
            </li>
−
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Communication">COMMUNICATION</a></li>
+
            <li>
−
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Public_Engagement">PUBLIC ENGAGEMENT</a></li>
+
              <a href="https://2018.igem.org/Team:Imperial_College/Hardware">HARDWARE</a>
−
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Collaborations">COLLABORATIONS</a></li>
+
            </li>
−
                                </ul>
+
          </ul>
−
                              </li>
+
        <li>
−
                       
+
          <a href="#">WET LAB<i class="fa fa-caret-down" aria-hidden="true"></i></a>
−
                        <li><a href="#">PEOPLE<i class="fa fa-caret-down" aria-hidden="true"></i></a>
+
          <ul class="nav-dropdown">
−
                          <ul class= "sub3">
+
            <li>
−
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Team">TEAM</a></li>
+
              <a href="https://2018.igem.org/Team:Imperial_College/Wetover">OVERVIEW</a>
−
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Attributions">ATTRIBUTIONS</a></li>
+
            </li>
−
                                <li><a href="https://2018.igem.org/Team:Imperial_College/Sponsors">SPONSORS</a></li>
+
            <li>
−
                              </ul>
+
              <a href="https://2018.igem.org/Team:Imperial_College/Results">RESULTS</a></li>
−
                            </li>
+
            <li>
−
                        <li><a href="https://2018.igem.org/Team:Imperial_College/Judges">FOR JUDGES</a></li>
+
              <a href="https://2018.igem.org/Team:Imperial_College/Experiments">EXPERIMENTS</a></li>
−
                        <li><a href="https://2018.igem.org/Team:Imperial_College/Journal">JOURNAL</a></li>
+
            <li>
−
                    </ul>
+
              <a href="https://2018.igem.org/Team:Imperial_College/Protocols">PROTOCOLS</a></li>
−
                </div>
+
            <li>
−
              </div>
+
              <a href="Parts">PARTS</a>
 +
            </li>
 +
          </ul>
 +
        </li>
 +
        <li>
 +
          <a href="#">HUMAN PRACTICES<i class="fa fa-caret-down" aria-hidden="true"></i></a>
 +
          <ul class="nav-dropdown">
 +
            <li>
 +
              <a href="https://2018.igem.org/Team:Imperial_College/HP">OVERVIEW</a>
 +
            </li>
 +
            <li>
 +
              <a href="https://2018.igem.org/Team:Imperial_College/IHP">INTEGRATED HP</a>
 +
            </li>
 +
            <li>
 +
              <a href="https://2018.igem.org/Team:Imperial_College/Communication">COMMUNICATION</a>
 +
            </li>
 +
            <li>
 +
              <a href="https://2018.igem.org/Team:Imperial_College/Outreach">OUTREACH</a>
 +
            </li>
 +
            <li>
 +
              <a href="https://2018.igem.org/Team:Imperial_College/Collaborations">COLLABORATIONS</a>
 +
            </li>
 +
          </ul>
 +
        </li>
 +
        <li>
 +
          <a href="#">PEOPLE<i class="fa fa-caret-down" aria-hidden="true"></i></a>
 +
          <ul class="nav-dropdown">
 +
            <li>
 +
              <a href="https://2018.igem.org/Team:Imperial_College/Team">TEAM</a>
 +
            </li>
 +
            <li>
 +
              <a href="https://2018.igem.org/Team:Imperial_College/Attributions">ATTRIBUTIONS</a></li>
 +
            <li>
 +
              <a href="https://2018.igem.org/Team:Imperial_College/Sponsors">SPONSORS</a>
 +
            </li>
 +
          </ul>
 +
        </li>
 +
        <li>
 +
          <a href="https://2018.igem.org/Team:Imperial_College/Judges">FOR JUDGES</a>
 +
        </li>
 +
        <li>
 +
          <a href="https://2018.igem.org/Team:Imperial_College/Journal">JOURNAL</a>
 +
        </li>
 +
      </ul>
 +
    </nav>
 +
  </div>
 +
</section>
 
    
 
    
 
</body>
 
</body>

Revision as of 11:21, 13 October 2018