Difference between revisions of "Team:UNOTT/NavBar"

Line 1: Line 1:
−
 
+
<html>
−
<html >
+
 
<head>
 
<head>
−
  <meta charset="UTF-8">
+
<link href="https://2016.igem.org/Team:Imperial_College/Resources/CSS:Bootstrap?action=raw&ctype=text/css" rel="stylesheet">
−
 
+
<link href="https://2016.igem.org/Team:Imperial_College/Resources/CSS:BootstrapStyling?action=raw&ctype=text/css" rel="stylesheet">
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
 
−
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Roboto:400,400i" rel="stylesheet">
 +
 
 +
<link href="https://2016.igem.org/Team:Imperial_College/Resources/CSS:NEStyle?action=raw&ctype=text/css" rel="stylesheet">
 +
 
 +
<script type="text/javascript" src="https://2016.igem.org/Team:Imperial_College/Resources/JS?action=raw&ctype=text/javascript"></script>
 +
 
 +
<link href="https://2017.igem.org/Team:UNOTT/Bootstrap?action=raw&ctype=text/css" rel="stylesheet">
 +
<link href="https://2017.igem.org/Team:UNOTT/CSSTest?action=raw&ctype=text/css" rel="stylesheet">
 +
 
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
  
−
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
 
−
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
 
  
  
 
<style>
 
<style>
−
      @import url(https://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic);
 
  
−
      /* Base Styles
+
/********************************* DEFAULT WIKI SETTINGS  ********************************/
−
      ===================================*/
+
−
      body {
+
−
      color: #183532;
+
−
      font-family: 'Lato', sans-serif;
+
−
      font-weight: 400;
+
−
      line-height: 1.8;
+
−
          background-color: #fff;
+
−
      }
+
  
 +
#sideMenu,
 +
#top_title {
 +
  display: none;
 +
}
  
−
      /* Layout Styles
+
#content {
−
      ===================================*/
+
  padding: 0px;
−
      section:not(:first-of-type),
+
  width: 100%;
−
      section:not(:nth-of-type(n2)) {
+
}
−
      margin-top: 80px;
+
−
      }
+
−
      .section-two,
+
−
      .section-three,
+
−
      footer {
+
−
      margin-top: 80px;
+
−
      }
+
  
 +
body {
 +
  background-color: white;
 +
  width: 100%;
 +
}
  
−
      /* Nav / Navbar Styles
+
#bodyContent h1,
−
      ===================================*/
+
#bodyContent h2,
−
      .navbar {
+
#bodyContent h3,
−
      background: transparent;
+
#bodyContent h4,
−
      border-bottom: none;
+
#bodyContent h5 {
−
      padding: 30px 0 10px;
+
  margin-bottom: 0px;
−
      -webkit-transition-duration: 0.6s;
+
}
−
              transition-duration: 0.6s;
+
−
      }
+
−
      .navbar-default .navbar-brand,
+
−
      .navbar-default .navbar-nav>li>a {
+
−
      color: #183532;
+
−
      }
+
−
      .navbar-default .navbar-nav>li {
+
−
      margin-right: 8px;
+
−
      }
+
−
      .navbar-default .navbar-nav>li:last-of-type {
+
−
      margin-right: 0;
+
−
      }
+
−
      .dropdown-menu,
+
−
      .navbar-default .navbar-nav>li>a:hover,
+
−
      .navbar-default .navbar-nav>.active>a,
+
−
      .navbar-default .navbar-nav>.active>a:hover,
+
−
      .navbar-default .navbar-nav>.active>a:focus,
+
−
      .navbar-default .navbar-nav>.open>a,
+
−
      .navbar-default .navbar-nav>.open>a:hover,
+
−
      .navbar-default .navbar-nav>.open>a:focus {
+
−
      background: rgba(24,53,50, 0.1);
+
−
      }
+
−
      .dropdown-menu {
+
−
      padding: 8px;
+
−
      box-shadow: none;
+
−
      border: none;
+
−
      }
+
−
      .dropdown-menu li a {
+
−
      padding: 4px 8px;
+
−
      border-radius: 6px;
+
−
      }
+
−
      .nav-dropdown-scroll {
+
−
      background: #e7eaea;
+
−
      box-shadow: 0px 10px 9px rgba(0, 0, 0, 0.4);
+
−
      }
+
−
      .navbar-toggle,
+
−
      .navbar-default .navbar-toggle:focus,
+
−
      .navbar-default .navbar-toggle:hover {
+
−
      background: #fff;
+
−
      }
+
  
 +
#bodyContent {
 +
  padding-right: 0px;
 +
}
  
−
      /* Cover / Jumbotron Styles
+
#globalWrapper {
−
      ===================================*/
+
  font-size: 100%;
−
      section.cover {
+
  padding: 0px;
−
      padding-top: 70px;
+
  margin: -10px -20px -20px -20px;
−
      background: url('https://static.igem.org/mediawiki/2017/1/16/T--UNOTT--Whitebg.png');
+
}
−
      background-repeat: no-repeat;
+
−
      background-size: cover;
+
−
      height: 100vh;
+
−
      display: -webkit-box;
+
−
      display: -ms-flexbox;
+
−
      display: flex;
+
−
      }
+
−
      .jumbotron {
+
−
      -ms-flex-item-align: center;
+
−
          -ms-grid-row-align: center;
+
−
          align-self: center;
+
−
      background: transparent;
+
−
      color: #ffffff;
+
−
      text-align: center;
+
−
      width: 90%;
+
−
      }
+
−
      .jumbotron-btn {
+
−
      background: #fff;
+
−
      color: #111111;
+
−
      }
+
−
      .jumbotron-btn:hover {
+
−
      background: rgb(24,53,50);
+
−
      color: #fff;
+
−
      border: 1px solid #fff;
+
−
      }
+
  
 +
.navbar-collapse {
 +
  padding-left: 0px;
 +
}
  
−
      /* Section One Styles
+
#banner {
−
      ===================================*/
+
  margin-top: 50px;
−
      .section-one-content {
+
}
−
      padding: 40px 20px;
+
−
      color: #ffffff;
+
−
      font-weight: 300;
+
−
      }
+
−
      .section-one-content h1 {
+
−
      margin: 0 0 20px;
+
−
      }
+
−
      #section-one-left {
+
−
      background: #183532;
+
−
      }
+
−
      #section-one-middle {
+
−
      background: #244F4A;
+
−
      }
+
−
      #section-one-right {
+
−
      background: #2A5C56;
+
−
      }
+
  
−
      .section-two,
+
#sideMenu {
−
      .section-three {
+
  margin-top: 10px;
−
      background: #fff;
+
}
−
      }
+
  
−
      /* CSS Image Styles
 
−
      ====================================================*/
 
−
      .css-img-wrapper {
 
−
          display: -webkit-box;
 
−
          display: -ms-flexbox;
 
−
          display: flex;
 
−
          -webkit-box-orient: vertical;
 
−
          -webkit-box-direction: normal;
 
−
              -ms-flex-direction: column;
 
−
                  flex-direction: column;
 
−
          -ms-flex-wrap: nowrap;
 
−
              flex-wrap: nowrap;
 
−
          -webkit-box-pack: center;
 
−
              -ms-flex-pack: center;
 
−
                  justify-content: center;
 
−
          -ms-flex-line-pack: center;
 
−
              align-content: center;
 
−
          -webkit-box-align: center;
 
−
              -ms-flex-align: center;
 
−
                  align-items: center;
 
−
      }
 
−
      .img-designers,
 
−
      .img-developers {
 
−
      height: 400px;
 
−
      width: 400px;
 
−
      background-position: center center;
 
−
      background-size: cover;
 
−
      }
 
−
      .img-designers {
 
−
      background: #183532;
 
−
      }
 
−
      .img-developers {
 
−
      background: #2A5C56;
 
−
      }
 
  
  
  
−
      /* To Top Button Styles
 
−
      ===================================*/
 
−
      .top {
 
−
      display: none;
 
−
      background-color: #5C3359;
 
−
      bottom: 2em;
 
−
      color: #FFF;
 
−
      opacity:0.8;
 
−
      padding: 1.2em;
 
−
      position: fixed;
 
−
      right: 1.5em;
 
−
      text-decoration: none;
 
−
      -webkit-transition-duration: 1s;
 
−
              transition-duration: 1s;
 
−
      }
 
−
      .top:hover {
 
−
      opacity: 1;
 
−
      -webkit-transition: 1s;
 
−
      transition: 1s;
 
−
      text-decoration: none;
 
−
      color: #fff;
 
−
      }
 
  
  
−
      /* Footer Styles
+
/********************************* RESPONSIVE STYLING ********************************/
−
      ===================================*/
+
−
      footer {
+
−
      height: 200px;
+
−
      width: 100%;
+
−
      background: #283332;
+
−
      }
+
  
  
−
      /* Helpers for top position on internal page links
+
/* IF THE SCREEN IS LESS THAN 1000PX */
−
      ====================================================*/
+
−
      #spytop:before,
+
−
      section:before {
+
−
        display: block;
+
−
        content: " ";
+
−
        margin-top: -100px;
+
−
        height: 100px;
+
−
        visibility: hidden;
+
−
      }
+
  
 +
@media only screen and (max-width: 1000px) {
 +
  #content {
 +
    width: 100%;
 +
  }
 +
  .menu_wrapper {
 +
    width: 15%;
 +
  }
 +
  .content_wrapper {
 +
    margin-left: 15%;
 +
  }
 +
  .menu_item {
 +
    display: block;
 +
  }
 +
  .icon {
 +
    display: none;
 +
  }
 +
  .highlight {
 +
    padding: 10px 0px;
 +
  }
 +
}
  
−
      /* Media Styles
 
−
      ===================================*/
 
−
      @media (min-width: 480px) {
 
−
      body {
 
−
      font-size: 16px;
 
−
      }
 
−
      }
 
−
      @media (min-width: 768px) {
 
−
      .section-one-content {
 
−
      padding: 40px 40px;
 
−
      }
 
−
      }
 
−
      @media (min-width: 992px) {
 
−
      .section-one-content {
 
−
      padding: 40px 20px;
 
−
      }
 
−
      }
 
−
      @media (min-width: 1200px) {
 
−
      .section-one-content {
 
−
      padding: 40px 40px;
 
−
      }
 
−
      }
 
  
 +
/* IF THE SCREEN IS LESS THAN 680PX */
  
−
      /* jQuery Styles
+
@media only screen and (max-width: 680px) {
−
      ===================================*/
+
  .collapsable_menu_control {
−
      .navbar-scroll {
+
    display: block;
−
      background: #ffffff;
+
  }
−
      padding: 0;
+
  .menu_item {
−
      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4);
+
    display: none;
−
      -webkit-transition-duration: 0.6s;
+
  }
−
              transition-duration: 0.6s;
+
  .menu_wrapper {
−
      }
+
    width: 100%;
−
</style>
+
    height: 15%;
 +
    position: relative;
 +
  }
 +
  .content_wrapper {
 +
    width: 100%;
 +
    margin-left: 0px;
 +
  }
 +
  .column.half_size {
 +
    width: 100%;
 +
  }
 +
  .column img {
 +
    width: 100%;
 +
    padding: 5px 0px;
 +
  }
 +
  .icon {
 +
    display: block;
 +
  }
 +
  .highlight {
 +
    padding: 15px 5px;
 +
  }
 +
}
 +
.navbar {
 +
    height: 71px;
 +
    width: 100%;
 +
    color: #006633;
 +
    background: #ffff;
 +
    font-family: 'Karla';
 +
    text-transform:uppercase;
 +
    filter: none !important;
 +
    box-shadow: 0 2px 15px rgba(0,0,0,0.25);
 +
    -moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
 +
    -webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
 +
    border-bottom: 1px solid rgba(0,0,0,0.2);
  
−
</head>
+
}
  
−
<body>
+
.navbar-default .navbar-brand,
−
   <body data-spy="scroll" data-target="#myScrollspy" class="">
+
.navbar-default .navbar-nav>li>a {
 +
   color: #183532;
 +
}
 +
.navbar-default .navbar-nav>li {
 +
  margin-right: 8px;
 +
}
 +
.navbar-default .navbar-nav>li:last-of-type {
 +
  margin-right: 0;
 +
}
 +
.dropdown-menu,
 +
.navbar-default .navbar-nav>li>a:hover,
 +
.navbar-default .navbar-nav>.active>a,
 +
.navbar-default .navbar-nav>.active>a:hover,
 +
.navbar-default .navbar-nav>.active>a:focus,
 +
.navbar-default .navbar-nav>.open>a,
 +
.navbar-default .navbar-nav>.open>a:hover,
 +
.navbar-default .navbar-nav>.open>a:focus {
 +
  background: rgba(24,53,50, 0.1);
 +
}
 +
.dropdown-menu {
 +
  padding: 8px;
 +
  box-shadow: none;
 +
  border: none;
 +
}
 +
.dropdown-menu li a {
 +
  padding: 4px 8px;
 +
  border-radius: 6px;
 +
}
 +
.nav-dropdown-scroll {
 +
  background: #e7eaea;
 +
  box-shadow: 0px 10px 9px rgba(0, 0, 0, 0.4);
 +
}
 +
.navbar-default {
 +
  background-color: #ffffff;
 +
  border-color: rgba(255, 255, 255, 0.3);
 +
  font-family: 'Karla', sans-serif;
 +
  font-weight: 300;
 +
  color: #005480
 +
  -webkit-transition: all 0.35s;
 +
  -moz-transition: all 0.35s;
 +
  transition: all 0.35s;
 +
  margin : 0 !important;
 +
}
  
−
<!-- Fixed Nav -->
 
−
<nav class="navbar navbar-default navbar-fixed-top" id="myScrollspy">
 
−
<div class="container">
 
−
<div class="navbar-header">
 
−
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 
−
<span class="sr-only">Toggle navigation</span>
 
−
<span class="icon-bar"></span>
 
−
<span class="icon-bar"></span>
 
−
<span class="icon-bar"></span>
 
−
</button>
 
−
<a class="navbar-brand" href="#">Key. coli</a>
 
−
</div>
 
−
<div id="navbar" class="navbar-collapse collapse">
 
−
<ul class="nav navbar-nav navbar-right">
 
−
                    <li class="dropdown">
 
−
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
 
−
                            PROJECT <span class="caret"></span>
 
−
                        </a>
 
−
                        <ul class="dropdown-menu" role="menu">
 
−
                            <li><a href="#">Bootstrap</a></li>
 
−
                            <li><a href="#">WordPress</a></li>
 
−
                            <li><a href="#">Treehouse</a></li>
 
−
                            <li><a href="#">DigiMouse</a></li>
 
−
                            <li><a href="#">CSS-Tricks</a></li>
 
−
                        </ul>
 
−
                            <li class="dropdown">
 
−
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
 
−
                                    LAB <span class="caret"></span>
 
−
                                </a>
 
−
                                <ul class="dropdown-menu" role="menu">
 
−
                                    <li><a href="#">Bootstrap</a></li>
 
−
                                    <li><a href="#">WordPress</a></li>
 
−
                                    <li><a href="#">Treehouse</a></li>
 
−
                                    <li><a href="#">DigiMouse</a></li>
 
−
                                    <li><a href="#">CSS-Tricks</a></li>
 
−
                                </ul>
 
−
                                    <li class="dropdown">
 
−
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
 
−
                                            MODELLING <span class="caret"></span>
 
−
                                        </a>
 
−
                                        <ul class="dropdown-menu" role="menu">
 
−
                                            <li><a href="#">Bootstrap</a></li>
 
−
                                            <li><a href="#">WordPress</a></li>
 
−
                                            <li><a href="#">Treehouse</a></li>
 
−
                                            <li><a href="#">DigiMouse</a></li>
 
−
                                            <li><a href="#">CSS-Tricks</a></li>
 
−
                                        </ul>
 
  
−
<li class="dropdown">
 
−
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
 
−
OUTREACH <span class="caret"></span>
 
−
</a>
 
−
<ul class="dropdown-menu" role="menu">
 
−
<li><a href="#">Bootstrap</a></li>
 
−
<li><a href="#">WordPress</a></li>
 
−
<li><a href="#">Treehouse</a></li>
 
−
<li><a href="#">DigiMouse</a></li>
 
−
<li><a href="#">CSS-Tricks</a></li>
 
−
</ul>
 
−
                        <li class="dropdown">
 
−
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
 
−
                                TEAM <span class="caret"></span>
 
−
                            </a>
 
−
                            <ul class="dropdown-menu" role="menu">
 
−
                                <li><a href="#">Bootstrap</a></li>
 
−
                                <li><a href="#">WordPress</a></li>
 
−
                                <li><a href="#">Treehouse</a></li>
 
−
                                <li><a href="#">DigiMouse</a></li>
 
−
                                <li><a href="#">CSS-Tricks</a></li>
 
−
                            </ul>
 
−
</li>
 
−
</ul>
 
−
</div>
 
−
</div>
 
−
</nav>
 
−
<!-- //Close Fixed Nav -->
 
  
 +
.navbar-default .navbar-header .navbar-brand {
 +
  color: #white;
 +
  font-family: 'Karla', sans-serif;
 +
  font-weight: none;
 +
  font-size: 30px;
 +
  display: inline-block;
 +
  background: #ffffff
 +
}
 +
.navbar-default .navbar-header .navbar-toggle {
 +
  font-family: 'Helvetica', sans-serif;
 +
  font-weight: 400; bold;
 +
  font-size: 20px;
 +
  color: #005480;
 +
  text-transform: uppercase;
 +
}
  
−
<!-- Full Screen Landing Section -->
+
/* FONT & NAVBAR MAIN LINK COLOUR INACTIVE*/
−
<section class="cover" id="spytop">
+
.navbar-default .nav > li > a,
−
<div class="jumbotron">
+
.navbar-default .nav > li > a:focus {
−
<h1 class="animated fadeInDownBig" style="color: #0236EE">KEY. COLI</h1>
+
  text-transform: uppercase;
−
<p class="animated fadeInRightBig" style="color: #0236ee">By the University of Nottingham</p>
+
  font-family: 'Karla', sans-serif;
−
<p class="animated fadeInLeftBig"><em></em></p>
+
  font-weight: bold;
 +
  font-size: 14px;
 +
  color: #96A296;
 +
}
  
  
−
</div>
+
/*Navbar background colour WOW*/
−
</section>
+
.navbar-default .navbar-nav > li > a:hover,
−
<!-- //Close Full Screen Landing Section -->
+
.navbar-default .navbar-nav > li > a:focus {
 +
    background-color: #;
 +
    color: #005480;
 +
}
  
  
−
<!-- Section One; as seen on many site 3 main option sections for content -->
+
.navbar-default .nav > li.active > a,
−
<section class="container-fluid section-one">
+
.navbar-default .nav > li.active > a:focus {
−
<div class="row">
+
  color: #005480 !important;
−
<div class="col-md-4 section-one-content" id="section-one-left">
+
  background-color: #005480;
−
<h1>What</h1>
+
}
−
<p> A Bacterial securty system
+
−
</p>
+
  
−
</div>
+
.navbar-default .nav > li.active > a:hover,
 +
.navbar-default .nav > li.active > a:focus:hover {
 +
  background-color: #005480;
 +
  border-left-color: #005480; border-top-color: #005480;
 +
  color: #005480
 +
}
  
−
<div class="col-md-4 section-one-content" id="section-one-middle">
 
−
<h1>Why</h1>
 
−
<p> To secure banks
 
−
</p>
 
  
−
</div>
+
.navbar-default .navbar-toggle {
 +
  border: none;
 +
}
 +
/*dropdown menu colours*/
  
−
<div class="col-md-4 section-one-content" id="section-one-right">
+
/* DROP MENU CLICK BG */
−
<h1>How</h1>
+
.navbar-default .dropdown-menu > li > a:focus {
−
<p>Using Random assortments of fluorescent proteins
+
  background-color: #02263E;
−
</p>
+
  color: #FFFFFF;
 +
}
  
−
</div>
+
.navbar-default .dropdown-menu {
−
</div>
+
  border: none;
−
</section>
+
  outline: none;
−
<!-- //Close Section One -->
+
  font-family: 'Karla', sans-serif;
 +
  text-transform: uppercase;
 +
  font-weight: bold;
 +
  font-size: 14.2px !important;
 +
  color: #02263E;
 +
}
  
 +
/* NAVBAR DROPDOWN TEXT COLOUR */
 +
.navbar-default li a {
 +
    color: #black;
 +
}
  
−
<!-- Section Two; a style feature I really like is 2 cols, 1 for text and 1 for a related image -->
 
−
<section class="container section-two" id="spydesingers">
 
−
<div class="row">
 
−
<div class="col-md-6 to-match">
 
−
<h2>About</h2>
 
−
<article>
 
−
<p>Recently, there has been a rise in cyber security breaches
 
−
</p>
 
−
                    <p>Companies are turning to physical security strategies involving biometric and digital keys to secure their clients' accounts.
 
−
</p
 
−
</article>
 
−
</div>
 
−
<div class="col-md-6 css-img-wrapper hidden-xs hidden-sm">
 
−
<img class="img-responsive img-circle img-designers">
 
−
</div>
 
−
</section>
 
−
<!--//Close Section Two -->
 
  
 +
.navbar-default > li.dropdown.active.open > a,
 +
.navbar-default > li.dropdown.active.open > ul.dropdown-menu a:hover,
 +
.navbar-default > li.dropdown.open > a,
 +
.navbar-default> li.dropdown.open > ul.dropdown-menu a:hover
 +
{
 +
  color: #fff;
 +
  background-color: #RED;
 +
  border-color: #fff;
 +
}
  
−
<!--// Section Three; the main reason I like this format is the increase in white space -->
+
.dropdown-toggle ul a {
−
<section class="container section-three" id="spydevelopers">
+
    color: #005480
−
<div class="row">
+
}
−
<div class="col-md-6 css-img-wrapper hidden-xs hidden-sm">
+
−
<div class="img-circle img-responsive img-developers"></div>
+
−
</div>
+
−
<div class="col-md-6">
+
−
<h2></h2>
+
−
<article>
+
−
<p> Our solution: a randomly assorted biometric which utlises CRISPRi to synthesise a random fluorescent key in E. coli.
+
−
                    </p>
+
−
                    <p>
+
  
−
</article>
+
/* Media Styles
−
</div>
+
===================================*/
−
</div>
+
@media (min-width: 480px) {
−
</section>
+
  body {
−
<!--//Close Section Three -->
+
      font-size: 16px;
 +
  }
 +
}
 +
@media (min-width: 768px) {
 +
  .section-one-content {
 +
      padding: 40px 40px;
 +
  }
 +
}
 +
@media (min-width: 992px) {
 +
  .section-one-content {
 +
      padding: 40px 20px;
 +
  }
 +
}
 +
@media (min-width: 1200px) {
 +
  .section-one-content {
 +
      padding: 40px 40px;
 +
  }
 +
}
  
−
<!-- Footer -->
 
−
<footer>
 
  
−
<!-- Back to top link -->
 
−
<a href="#spytop" class="top"><span class="glyphicon glyphicon-chevron-up"></span></a>
 
−
<!-- //Close Back to top link -->
 
  
−
<div class="container">
 
−
<h2>Footer</h2>
 
−
</div>
 
−
</footer>
 
−
<!-- //Close Footer -->
 
−
</body>
 
−
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 
−
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
 
  
−
    <script> $(window).resize(function() {
+
</style>
−
  //update stuff
+
−
});
+
  
−
//Change pos/background/padding/add shadow on nav when scroll event happens
+
<script>
−
$(function(){
+
−
var navbar = $('.navbar');
+
−
var navDropdown = $('.dropdown-menu');
+
  
−
$(window).scroll(function(){
+
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
−
if($(window).scrollTop() <= 40){
+
 
−
navbar.removeClass('navbar-scroll');
+
$(document).ready(function() {
−
navDropdown.removeClass('nav-dropdown-scroll');
+
 
−
$('.top').hide();
+
$("#HQ_page").attr('id','');
−
} else {
+
 
−
navbar.addClass('navbar-scroll');
+
 
−
navDropdown.addClass('nav-dropdown-scroll');
+
if ( wgPageName.substring( 0,  8) == "Template")  {  // if the page is a template it displays the full name in a single line
−
$('.top').show();
+
$("#team_name").html( wgPageName );
 
}
 
}
 +
 +
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
 +
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
 +
}
 +
 +
else {
 +
// this adds the team's name as an h1
 +
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );
 +
 +
// this adds the page's title as an h4
 +
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
 +
}
 +
 +
 +
 +
 +
$('#accordion').find('.menu_item').click(function(){
 +
 +
//Expand or collapse this panel
 +
submenu = $(this).find('.submenu');
 +
submenu.toggle();
 +
 +
icon = $(this).find('.icon');
 +
 +
if ( !$( submenu ).is(':visible') ) {
 +
icon.removeClass("less").addClass("plus");
 +
}
 +
else {
 +
icon.removeClass("plus").addClass("less");
 +
}
 +
 +
//Hide the other panels
 +
$(".submenu").not(submenu).hide();
 +
$(".icon").not(icon).removeClass("less").addClass("plus");
 +
});
 +
 +
 +
$(".collapsable_menu_control").click(function() {
 +
$(".menu_item").toggle();
 +
});
 +
 +
$( window ).resize(function() {
 +
$(".menu_item").show();
 +
});
 +
 +
 
});
 
});
−
$('.navbar-toggle').click(function(){
 
−
if($(window).scrollTop() <= 40){
 
−
  navbar.addClass('navbar-scroll');
 
−
    }
 
−
});
 
−
});
 
  
  
−
//Close collapse nav when scroll spy page link is clicked
 
−
$('.navbar-nav a[href*="#spy"]').click(function(){
 
−
$('.navbar-collapse').collapse('hide');
 
−
if($(window).scrollTop() <= 40){
 
−
  $('.navbar').removeClass('navbar-scroll');
 
−
}
 
−
});
 
  
  
−
//Get height of col next to img col and apply a fixed height for flexbox to work correctly.
+
</script>
−
$(function(){
+
</head>
−
var flexColHeight = $('.to-match').height();
+
−
var flexCol = $('.css-img-wrapper');
+
  
−
flexCol.css('height', flexColHeight);
 
−
});
 
  
  
−
//Smooth Scrolling For Internal Page Links
+
<body>
−
$(function() {
+
   <nav class="navbar navbar-default navbar-fixed-top" style=" padding-top: 20px;">
−
   $('a[href*=#spy]:not([href=#])').click(function() {
+
    <div class="container-fluid">
−
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
+
      <div class="navbar-header">
−
  var target = $(this.hash);
+
−
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
+
−
  if (target.length) {
+
−
$('html,body').animate({
+
−
  scrollTop: target.offset().top
+
−
}, 1000);
+
−
return false;
+
−
  }
+
−
}
+
−
  });
+
−
});</script>
+
  
 +
 +
      </div>
 +
      <div class="navbar-header" style="padding-top: 5px; padding-left: 15px;">
 +
          <a class="navbar-logo" href="https://2017.igem.org/Team:UNOTT">
 +
              <image class="img-responsive" src="https://static.igem.org/mediawiki/2017/6/61/T--UNOTT--UniofNottNavbarLogo.png" height="150" width="150">
 +
        </a>
 +
      </div>
 +
 +
      <div id="navbar" class="navbar-collapse collapse">
 +
          <ul class="nav navbar-nav navbar-right">
 +
              <li class="dropdown">
 +
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
 +
                      PROJECT <span class="caret"></span>
 +
                  </a>
 +
                  <ul class="dropdown-menu" role="menu">
 +
                      <li><a href="https://2017.igem.org/Team:UNOTT/Description">Description</a></li>
 +
                      <li><a href="https://2017.igem.org/Team:UNOTT/Design">Design</a></li>
 +
                      <li><a href="https://2017.igem.org/Team:UNOTT/Proof">Proof</a></li>
 +
                      <li><a href="https://2017.igem.org/Team:UNOTT/Medal_Criteria">Medal Criteria</a></li>
 +
                  </ul>
 +
          </li>
 +
 +
 +
          <li class="dropdown">
 +
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
 +
                  LAB <span class="caret"></span>
 +
              </a>
 +
              <ul class="dropdown-menu" role="menu">
 +
                  <li><a href="https://2017.igem.org/Team:UNOTT/Notebook">Lab book</a></li>
 +
                  <li><a href="https://2017.igem.org/Team:UNOTT/Experiments">Experiments</a></li>
 +
                  <li><a href="#">Parts</a></li>
 +
                  <li><a href="https://2017.igem.org/Team:UNOTT/Improve">Improve</a></li>
 +
                  <li><a href="https://2017.igem.org/Team:UNOTT/Safety">Safety</a></li>
 +
                  <li><a href="https://2017.igem.org/Team:UNOTT/InterLab">InterLab</a></li>
 +
            </ul>
 +
          </li>
 +
 +
 +
 +
 +
          <li class="dropdown">
 +
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
 +
                  MODELLING <span class="caret"></span>
 +
              </a>
 +
              <ul class="dropdown-menu" role="menu">
 +
                  <li><a href="https://2017.igem.org/Team:UNOTT/Model">Overview</a></li>
 +
                <li><a href="https://2017.igem.org/Team:UNOTT/SingleCellModel">Models </a></li>
 +
                <li><a href="https://2017.igem.org/Team:UNOTT/CultureModelling">Software</a></li>
 +
              </ul>
 +
          </li>
 +
 +
          <li class="dropdown">
 +
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
 +
                  OUTREACH <span class="caret"></span>
 +
              </a>
 +
              <ul class="dropdown-menu" role="menu">
 +
                  <li><a href="https://2017.igem.org/Team:UNOTT/HumanPractices">Human Practices</a></li>
 +
                  <li><a href="https://2017.igem.org/Team:UNOTT/Game">Games Design</a></li>
 +
                  <li><a href="#">HP Silver</a></li>
 +
                  <li><a href="https://2017.igem.org/Team:UNOTT/HP/Gold_Integrated">HP Gold</a></li>
 +
                  <li><a href="https://2017.igem.org/Team:UNOTT/Engagement">Public Engagement</a></li>
 +
 +
              </ul>
 +
          </li>
 +
 +
          <li class="dropdown">
 +
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
 +
                  TEAM <span class="caret"></span>
 +
              </a>
 +
              <ul class="dropdown-menu" role="menu">
 +
                  <li><a href="https://2017.igem.org/Team:UNOTT/Team">Our Team</a></li>
 +
                  <li><a href="https://2017.igem.org/Team:UNOTT/Collaborations">Collaborations</a></li>
 +
                  <li><a href="https://2017.igem.org/Team:UNOTT/Sponsors">Sponsors</a></li>
 +
                  <li><a href="https://2017.igem.org/Team:UNOTT/Attributions">Attributions</a></li>
 +
              </ul>
 +
          </li>
 +
 +
            </ul>
 +
          </li>
 +
        </ul>
 +
      </div>
 +
      <!-- /.navbar-collapse -->
 +
    </div>
 +
    <!-- /.container-fluid -->
 +
  </nav>
 
</body>
 
</body>
 +
 
</html>
 
</html>

Revision as of 09:31, 22 October 2017