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

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>
−
#LethNav {
 
−
    margin: 20px 0;
 
−
    padding: 10px;
 
−
    background: hsla(189, 93%, 27%, 1);
 
−
}
 
  
−
#LethNav ul {
+
.container-fluid {
−
    padding: 0;
+
     background-color: #041f49;
−
    margin: 0;
+
     font-family: Arial, sans-serif;
−
    list-style: none;
+
−
    text-align: center;
+
−
}
+
−
 
+
−
#LethNav ul li {
+
−
     display: inline-block;
+
−
    padding: 0 0px;
+
−
}
+
−
 
+
−
#LethNav li a {
+
−
    display:block;
+
−
    min-width:140px;
+
−
    height: 50px;
+
−
    text-align: center;
+
−
    line-height: 50px;
+
−
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
−
    font-size: 115%;
+
−
    color: #000000;
+
−
    background: #FFFFFF;
+
−
    text-decoration: none;
+
 
     }
 
     }
−
 
−
/*Hover state for top level links*/
 
−
#LethNav li:hover a {
 
−
    background: #CCCCCC;
 
−
    color: white;
 
−
}
 
 
      
 
      
−
/*Prevent text wrapping*/
+
.navbar {
−
#LethNav li ul li a {
+
     background-image: none;
−
    width: auto;
+
     }
−
    min-width: 100px;
+
−
    padding: 0 20px;
+
−
}   
+
−
 
+
−
/*Style 'show menu' label button and hide it by default*/
+
−
#LethNav .show-menu {
+
−
    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*/
+
.navbar {
−
input[type=checkbox]:checked ~ #LethMenu{
+
     color: #ffffff;
−
     display: block;
+
−
}
+
−
/*Responsive Styles*/
+
−
@media screen and (max-width : 875px){
+
−
    /*Make dropdown links appear inline*/
+
−
    #LethNav ul {
+
−
        position: static;
+
−
        display: none;
+
 
     }
 
     }
−
     /*Create vertical spacing*/
+
      
−
     #LethNav li {
+
      
−
        margin-bottom: 1px;
+
li {
 +
    color: white;
 +
    font-family: Arial, sans-serif;
 
     }
 
     }
−
     /*Make all menu links full width*/
+
      
−
    #LethNav ul li, li a {
+
.caret {
−
        width: 100%;
+
    color: #ffffff;
−
    }
+
−
    /*Display 'show menu' link*/
+
−
    #LethNav .show-menu {
+
−
        display:block;
+
 
     }
 
     }
−
}
+
   
 
</style>
 
</style>
 
</head>
 
</head>
−
 
 
<body>
 
<body>
−
<nav id="LethNav">
+
 
−
     <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="LethMenu">
+
     <div class="navbar-header">
−
        <li><a href="https://2017.igem.org/Team:Lethbridge"><b>Home</b></a></li>
+
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
−
        <li><a href="https://2017.igem.org/Team:Lethbridge/Project"><b>Project</b></a></li>
+
        <span class="icon-bar"></span>
−
        <li><a href="https://2017.igem.org/Team:Lethbridge/Design"><b>Design</b></a></li>
+
        <span class="icon-bar"></span>
−
        <li><a href="https://2017.igem.org/Team:Lethbridge/Human_Practices"><b>Human Practices<b></a></li>
+
        <span class="icon-bar"></span>                       
−
        <li><a href="https://2017.igem.org/Team:Lethbridge/Safety"><b>Safety</b></a></li>
+
      </button>
−
        <li><a href="https://2017.igem.org/Team:Lethbridge/Team"><b>Team</b></a></li>
+
      <a class="navbar-brand" href="#">Home</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 href="#">Link 1</a></li>
 +
                <li><a href="#">Link 2</a></li>
 +
                <li><a href="#">Link 3</a></li>
 +
            </ul></li>
 +
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Parts<span class="caret"></span></a>
 +
            <ul class="dropdown-menu">
 +
                <li><a href="#">Basic</a></li>
 +
                <li><a href="#">Composite</a></li>
 +
                <li><a href="#">Parts Collection</a></li>
 +
                <li><a href="#">Improved</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 href="#">Silver</a></li>
 +
                <li><a href="#">Gold Integrated</a></li>
 +
                <li><a href="#">Engagement</a></li>
 +
                <li><a href="#">Software</a></li>
 +
                <li><a 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 href="#">Notebook</a></li>
 +
                <li><a href="#">Protocols</a></li>
 +
            </ul></li>
 +
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Safety<span class="caret"></span></a>
 +
            <ul class="dropdown-menu">
 +
                <li><a href="#">Lab Safety</a></li>
 +
                <li><a href="#">Risk Levels</a></li>
 +
                <li><a href="#">Biosecurity</a></li>
 +
            </ul></li>
 +
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Team<span class="caret"></span></a>
 +
            <ul class="dropdown-menu">
 +
                <li><a href="#">Bios</a></li>
 +
                <li><a href="#">Attributions</a></li>
 +
                <li><a href="#">Acknowledgements</a></li>
 +
                <li><a href="#">Collaborations</a></li>
 +
                <li><a href="#">Sponsors</a></li>
 +
            </ul></li>
 +
      </ul>
 +
    </div>
 +
  </div>
 
</nav>
 
</nav>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 03:39, 4 October 2017