Difference between revisions of "Template:Team:Lethbridge/navbar"

 
(175 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
 +
  <meta charset="utf-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 +
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 +
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
<style>
 
<style>
−
nav {
+
/*adding space so the igem menu doesn't cover up the navbar*/
−
    margin: 20px 0;
+
.body {padding-top: 3em;}
−
    padding: 10px;
+
−
    background: hsla(189, 93%, 27%, 0.40);
+
−
}
+
  
−
ul {
+
.navbar {background-color: #041f49; border-bottom-color: #377b7e;}
−
    padding: 0;
+
.navbar-inverse {background-color: #041f49 !important;}
−
    margin: 0;
+
.navbar>a:hover {background-color:#377b7e;}
−
    list-style: none;
+
.color-wh {color: #ffffff !important;}
−
    text-align: center;
+
−
}
+
  
−
ul li {
+
/*navy bar, set font*/
−
    display: inline-block;
+
.container-fluid {font-family: Arial, sans-serif;}
−
    padding: 0 0px;
+
−
}
+
  
−
li a {
+
/*text color of menu options*/
−
    display:block;
+
.nav.navbar-nav li a {color: #ffffff;}
−
    min-width:140px;
+
−
    height: 50px;
+
−
    text-align: center;
+
−
    line-height: 50px;
+
−
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
−
    color: hsla(189, 93%, 27%, 1);
+
−
    background: hsla(27, 85%, 60%, 1);
+
−
    text-decoration: none;
+
−
    }
+
  
−
/*Hover state for top level links*/
+
/*background color of dropdown menus*/
−
li:hover a {
+
/*.navbar-nav > li > .dropdown-menu { background-color: #377b7e;}*/
−
    background: hsla(0, 80%, 47%, 1);
+
−
    color: white;
+
−
}
+
−
   
+
−
/*Prevent text wrapping*/
+
−
li ul li a {
+
−
    width: auto;
+
−
    min-width: 100px;
+
−
    padding: 0 20px;
+
−
}   
+
  
−
/*Style 'show menu' label button and hide it by default*/
+
/*background color of dropdown menus when hovering/focus*/
−
.show-menu {
+
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {background-color:#f5af53;}
−
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
−
    text-decoration: none;
+
−
    color: #fff;
+
−
    background: #A81D1B;
+
−
    text-align: center;
+
−
    padding: 10px 0;
+
−
    display: none;
+
−
}
+
−
/*Hide checkbox*/
+
−
input[type=checkbox]{
+
−
    display: none;
+
−
}  
+
  
−
/*Show menu when invisible checkbox is checked*/
+
/*adding space from the top, to counter igem menu offset*/
−
input[type=checkbox]:checked ~ #menu{
+
#myNavbar, .dropdown-toggle {padding-top: 0.6em;}
−
    display: block;
+
 
−
}
+
/*adding space above next vivo logo to counter igem menu logo*/
−
/*Responsive Styles*/
+
.navbar-brand {margin-top: .2em;}
−
@media screen and (max-width : 760px){
+
 
−
    /*Make dropdown links appear inline*/
+
/*dropdown text in white, instead of default grey*/
−
    ul {
+
li.dropdown {color: white; font-family: Arial, sans-serif;}
−
        position: static;
+
 
−
        display: none;
+
/* arrow color change from default grey*/
−
    }
+
.caret {color: #ffffff;}
−
    /*Create vertical spacing*/
+
−
    li {
+
/*center text vertically to line up with next vivo logo size, and to counter effects of igem menu above*/
−
        margin-bottom: 1px;
+
.navbar-header{text-align:center; line-height: 2em;}
−
    }
+
 
−
    /*Make all menu links full width*/
+
/*moving the header down, since the igem menu is 1em in height*/
−
    ul li, li a {
+
.navbar-header a {padding: 1em;}
−
        width: 100%;
+
 
−
    }
+
/*lining up text to the right side of the window and reducing down from igem menu*/
−
    /*Display 'show menu' link*/
+
.navbar-toggle {padding-top: 1.5em; float: right; border: none;}
−
    .show-menu {
+
 
−
        display:block;
+
/*.collapse navbar-collapse {background: #377b7e;}*/
−
    }
+
 
 +
/* Extra Small Devices, Phones*/  
 +
@media only screen and (min-width : 700px) {
 +
.dropdown-menu>li>a {background-color: #377b7e;}
 +
.dropdown-menu>li:hover {background-color: #f5af3e;}
 +
.navbar-inverse navbar-nav open dropdown-menu>li>a {color: #ffffff"}
 
}
 
}
 
</style>
 
</style>
 
</head>
 
</head>
−
 
 
<body>
 
<body>
−
<nav>
+
 
−
     <label for="show-menu" class="show-menu">Show Menu</label>
+
<nav class="navbar navbar-inverse navbar-fixed-top">
−
     <input type="checkbox" id="show-menu" role="button">
+
  <div class="container-fluid">
−
    <ul id="menu">
+
     <div class="navbar-header">
−
        <li><a href="#">Home</a></li>
+
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
−
        <li><a href="#">Project</a></li>
+
        <span class="icon-bar"></span>
−
        <li><a href="#">Experiments</a></li>
+
        <span class="icon-bar"></span>
−
        <li><a href="#">Results</a></li>
+
        <span class="icon-bar"></span>                       
−
        <li><a href="#">Human Practices</a></li>
+
      </button>
−
        <li><a href="#">People</a></li>
+
      <a class="navbar-brand" href="https://2017.igem.org/Team:Lethbridge"><img src="https://static.igem.org/mediawiki/2017/archive/3/35/20171024022846%21Next_vivo_caption_white.png" height=42 width=164 /></a>
−
    </ul>
+
     </div>
 +
    <div class="collapse navbar-collapse" id="myNavbar">
 +
      <ul class="nav navbar-nav navbar-right">
 +
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Project<span class="caret"></span></a>
 +
            <ul class="dropdown-menu">
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Description">Description</a></li>
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Design">Design</a></li>
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Demonstrate">Demonstrate</a></li>
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Results">Results</a></li>
 +
                <li><a class="color-wh"href="https://2017.igem.org/Team:Lethbridge/Collaborations">Collaborations</a></li>
 +
            </ul></li>
 +
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="https://2017.igem.org/Team:Lethbridge/Parts">Parts<span class="caret"></span></a>
 +
            <ul class="dropdown-menu">
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Parts">Overview</a></li>
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Part_Collection">Part Collection</a></li>
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Composite_Part">Composite</a></li>
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Improve">Improved Part</a></li>
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Basic_Part">Basic</a></li>
 +
            </ul></li>
 +
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Human Practices<span class="caret"></span></a>
 +
            <ul class="dropdown-menu">
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Human_Practices">Overview</a></li>
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/HP/Silver">User Groups - Silver</a></li>
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/HP/Gold_Integrated">Integrated HP - Gold</a></li>
 +
                <li><a class="color-wh"href="https://2017.igem.org/Team:Lethbridge/Software">Biosecurity Software</a></li>
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Engagement">Engagement</a></li>
 +
 
 +
                <!--<li><a class="color-wh" href="#">E Shop</a></li>-->
 +
            </ul></li>
 +
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Lab<span class="caret"></span></a>
 +
            <ul class="dropdown-menu">
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Experiments">Experiments</a></li>
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Notebook">Notebook</a></li>
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Safety">Safety</a></li>
 +
              <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/InterLab">InterLab</a></li>
 +
            </ul></li>
 +
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="https://2017.igem.org/Team:Lethbridge/Team">Team<span class="caret"></span></a>
 +
            <ul class="dropdown-menu color-wh">
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Team">Team Members</a></li>
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Attributions">Attributions</a></li>
 +
                <!--<li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Acknowledgements">Acknowledgements</a></li>-->
 +
                <li><a class="color-wh" href="https://2017.igem.org/Team:Lethbridge/Attributions#Sponsors">Sponsors</a></li>
 +
            </ul></li>
 +
      </ul>
 +
    </div>
 +
  </div>
 
</nav>
 
</nav>
 +
<!--<hr>-->
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 23:41, 30 October 2017