Difference between revisions of "Template:Manchester/Navbar"

 
(214 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
 +
{{Manchester}}
 +
{{Manchester/mobilenav}}
 
<html>
 
<html>
    <meta charset="utf-8">
+
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
<link href="https://2017.igem.org/Team:Manchester/Resources/CSS:Bootstrap?action=raw&ctype=text/css" rel="stylesheet">
<body>
+
<ul style= none>
+
<a href="https://2018.igem.org/Team:Manchester"><img src="https://2018.igem.org/wiki/image/T--Manchester--clear_back_logo.jpg" width = "165" height="100"/></a>
+
  
<div class="dropdown">
+
<link href="https://2017.igem.org/Team:Manchester/Resources/CSS:font?action=raw&ctype=text/css" rel="stylesheet">
  <button class="dropbtn">Project</button>
+
  <div class="dropdown-content">
+
    <a href="#">About Listeria</a>
+
    <a href="https://2018.igem.org/Team:Manchester/Description">Project Description</a>
+
    <a href="https://2018.igem.org/Team:Manchester/Parts">Parts Overview</a>
+
    <a href="https://2018.igem.org/Team:Manchester/Basic_Part">Basic Parts</a>
+
    <a href="https://2018.igem.org/Team:Manchester/Composite_Part">Composite parts</a>
+
    <a href="https://2018.igem.org/Team:Manchester/Part_Collection">part collection</a>
+
    <a href="https://2018.igem.org/Team:Manchester/Results">Results</a>
+
    <a href="https://2018.igem.org/Team:Manchester/Collaborations">Collaborations</a>
+
    <a href="https://2018.igem.org/Team:Manchester/Improve">Improve</a>
+
    <a href="https://2018.igem.org/Team:Manchester/Demonstrate">Demonstrate</a>
+
    <a href="#">Achievements</a>
+
  </div>
+
</div>
+
  
<div class="dropdown">
+
<link href="https://2017.igem.org/Team:Manchester/Resources/CSS:NEStyle?action=raw&ctype=text/css" rel="stylesheet">
  <button class="dropbtn">Wet Lab</button>
+
  <div class="dropdown-content">
+
    <a href="https://2018.igem.org/Team:Manchester/Notebook">Notebook</a>
+
    <a href="https://2018.igem.org/Team:Manchester/InterLab">InterLab</a>
+
    <a href="#">Protocol</a>
+
    <a href="https://2018.igem.org/Team:Manchester/Experiments">Lab Book</a>
+
    <a href="https://2018.igem.org/Team:Manchester/Safety">Safety</a>
+
  </div>
+
</div>
+
  
<div class="dropdown">
+
<script type="text/javascript" src="https://2017.igem.org/Team:Manchester/Resources/JS:fontawesome?action=raw&ctype=text/javascript"></script>
  <button class="dropbtn">Dry Lab</button>
+
 
  <div class="dropdown-content">
+
<script type="text/javascript" src="https://2017.igem.org/Team:Manchester/Resources/JS:NGL?action=raw&ctype=text/javascript"></script>
    <a href="#">Promoters</a>
+
 
    <a href="https://2018.igem.org/Team:Manchester/Model">Experimental Model</a>
+
<meta name="viewport" content="width=device-width, initial-scale=1">
  </div>
+
 
</div>
+
<script type="text/x-mathjax-config">
 +
MathJax.Hub.Config({
 +
  TeX: { equationNumbers: { autoNumber: "AMS" } }
 +
});
 +
</script>
 +
 
 +
<script src="https://2017.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
 +
 
 +
<script type="text/javascript" src="https://2017.igem.org/Team:Manchester/Resources/JS:jquery-2.1.4?action=raw&ctype=text/javascript"></script>
 +
 
 +
<script type="text/javascript" src="https://2017.igem.org/Team:Manchester/Resources/JS:bootstrap?action=raw&ctype=text/javascript"></script>
  
<div class="dropdown">
 
  <button class="dropbtn">Human Practices</button>
 
  <div class="dropdown-content">
 
    <a href="#">Listeria: Medical Cost</a>
 
    <a href="#">Listeria: Buisness Cost</a>
 
    <a href="#">GMO's and Brexit</a>
 
<a href="https://2018.igem.org/Team:Manchester/Human_Practices">The Public opinion</a>
 
<a href="https://2018.igem.org/Team:Manchester/Public_Engagement">Outreach</a>
 
  </div>
 
</div>
 
  
<div class="dropdown">
 
  <button class="dropbtn">Team</button>
 
  <div class="dropdown-content">
 
    <a href="https://2018.igem.org/Team:Manchester/Team">The Team</a>
 
    <a href="https://2018.igem.org/Team:Manchester/Attributions">Key Attributions</a>
 
  </div>
 
</div>
 
  
<div id="socialmedia">
 
<a href="https://twitter.com/UoM_iGem_2018"><img src="https://2018.igem.org/wiki/image/T--Manchester--Twittericon.png" width = "50" height="50"/></a>
 
 
 
<style>
 
<style>
#socialmedia {
+
 
   float: right;
+
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 +
nav .navbar {
 +
display: table !important;
 +
}
 +
 
 +
@media only screen and (max-width:980px) {
 +
   /* For tablets: */
 +
  .main {
 +
    width: 80%;
 +
    padding: 0;
 +
  }
 +
  .right {
 +
    width: 100%;
 +
  }
 
}
 
}
 +
@media only screen and (max-width:500px) {
 +
  /* For mobile phones: */
 +
  .menu, .main, .right {
 +
    width: 100%;
 +
  }
 +
}
 +
 +
 +
body, html {
  
/* Style The Dropdown Button */
+
  margin: 0!important;
.dropbtn {
+
  padding: 0!important;
    background-color: #f2f2f2;
+
    color: Black;
+
    padding: 14px;
+
    font-size: 20px;
+
    border: none;
+
    cursor: pointer;
+
 
}
 
}
  
/* The container <div> - needed to position the dropdown content */
+
.projectlink img:hover {
.dropdown {
+
  opacity: 0.7;
    position: center;
+
    display: inline-block;
+
 
}
 
}
  
/* Dropdown Content (Hidden by Default) */
+
.floatleft1 {
.dropdown-content {
+
  float: right!important;
    display: none;
+
    position: absolute;
+
    background-color: #f9f9f9;
+
    min-width: 160px;
+
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
    z-index: 100;
+
 
}
 
}
  
/* Links inside the dropdown */
+
.floatright1 {
.dropdown-content a {
+
  float: left!important;
    color: black;
+
    padding: 18px;
+
    text-decoration: none;
+
    display: block;
+
    font-size: 20px;
+
 
}
 
}
  
/* Change color of dropdown links on hover */
 
.dropdown-content a:hover {background-color: #d9d9d9}
 
  
/* Show the dropdown menu on hover */
+
 
.dropdown:hover .dropdown-content {
+
#sideMenu,
    display: block;
+
#top_title {
 +
  display: none;
 
}
 
}
  
/* Change the background color of the dropdown button when the dropdown content is shown */
+
#content {
.dropdown:hover .dropbtn {
+
  padding: 0px;
    background-color: #d9d9d9;
+
  width: 100%;
 
}
 
}
 +
 +
#bodyContent h1,
 +
#bodyContent h2,
 +
#bodyContent h3,
 +
#bodyContent h4,
 +
#bodyContent h5 {
 +
  margin-bottom: 0px;
 +
}
 +
 +
#bodyContent {
 +
  padding-right: 0px;
 +
}
 +
 +
#globalWrapper {
 +
  font-size: 100%;
 +
  padding: 0px;
 +
  margin:0;
 +
}
 +
 +
.logo-center {
 +
  display: block;
 +
  margin: 0;
 +
  width: 18vw;
 +
}
 +
 +
.navbar-collapse {
 +
  padding-left: 0px;
 +
}
 +
 +
#banner {
 +
  margin-top: 50px;
 +
}
 +
 +
#sideMenu {
 +
  margin-top: 10px;
 +
}
 +
 +
.dropdown-menu li:hover .sub-menu {
 +
  visibility: visible;
 +
}
 +
 +
.dropdown:hover .dropdown-menu {
 +
  display: block;
 +
}
 +
 +
.navbar-nav .dropdown-menu,
 +
.navbar .dropdown-menu {
 +
  margin-top: 0;
 +
}
 +
 +
.navbar-right {
 +
  display: block!important;
 +
  width: 60vw;
 +
}
 +
 +
.dropdowntextcenter {
 +
  text-align: center
 +
}
 +
 +
.navbar-logo {
 +
  display: block;
 +
  padding-left: ;
 +
}
 +
 +
.nologoheader {
 +
  width: 0vw;
 +
}
 +
 +
.logoheader {
 +
  width: 16vw;
 +
}
 +
 +
.dropdown10 {
 +
  display: block!important;
 +
  width: 15vw!important;
 +
}
 +
 +
.dropdown13 {
 +
  display: block!important;
 +
  width: 16vw!important;
 +
}
 +
 +
.dropdown7 {
 +
  display: block!important;
 +
  width: 16vw!important;
 +
}
 +
 +
.dropdown8 {
 +
  display: block!important;
 +
  width: 15vw!important;
 +
}
 +
 +
.gradient {
 +
  background-color: rgba(255, 255, 255, 0.8)!important;
 +
  border: none!important;
 +
  font-size: 1em;
 +
}
 +
 +
 +
 +
/********************************* CONTENT OF THE PAGE ********************************/
 +
 +
 +
/* Wrapper for the content */
 +
 +
.content_wrapper {
 +
  width: 85%;
 +
  margin-left: 150px;
 +
  padding: 0px;
 +
  float: left;
 +
  background-color: transparent;
 +
}
 +
 +
.bgcontent_wrapper {
 +
  width: 85%;
 +
  margin-left: 100px;
 +
  padding: 0px;
 +
  float: left;
 +
  background-color: transparent;
 +
}
 +
 +
/*LAYOUT */
 +
 +
.column {
 +
  padding: 10px 0px;
 +
  float: left;
 +
  background-color: transparent;
 +
}
 +
 +
.column.full_size {
 +
  width: 100%;
 +
background-color: transparent;
 +
}
 +
 +
.full_size img {
 +
  padding: 10px 15px;
 +
  width: 96.5%;
 +
}
 +
 +
.column.half_size {
 +
  width: 50%;
 +
background-color: transparent;
 +
}
 +
 +
.half_size img {
 +
  padding: 10px 15px;
 +
  width: 93%;
 +
}
 +
 +
.img:hover {
 +
  opacity: 1.0 !important;
 +
}
 +
 +
.clear {
 +
  clear: both;
 +
}
 +
 +
.gonna-go-fast-to-the-top {
 +
  position: fixed;
 +
  bottom: 3vh;
 +
  right: 3vw;
 +
  z-index: 999999;
 +
  background-color: transparent;
 +
  opacity: 0.4;
 +
  width: 3em;
 +
  overflow: visible;
 +
  text-align: right
 +
 +
}
 +
 +
.gonna-go-fast-to-the-top:hover {
 +
  opacity: 0.8
 +
}
 +
 +
a[href="#verytop"] {
 +
  color: #5bc7d8!important
 +
}
 +
 +
.highlight {
 +
  width: 90%;
 +
  margin: auto;
 +
  padding: 15px 5px;
 +
  background-color: #f2f2f2;
 +
}
 +
 +
.judges-will-not-evaluate {
 +
  border: 4px solid #72c9b6;
 +
  display: block;
 +
  margin: 5px 15px;
 +
  width: 95%;
 +
  font-weight: bold;
 +
}
 +
 +
 +
/*STYLING */
 +
 +
 +
/* styling for the titles */
 +
 +
.content_wrapper h1,
 +
.content_wrapper h2 {
 +
  padding: 5px 15px;
 +
  border-bottom: 0px;
 +
  color: #72C489;
 +
}
 +
 +
.content_wrapper h3,
 +
.content_wrapper h4,
 +
.content_wrapper h5,
 +
.content_wrapper h6 {
 +
  padding: 5px 15px;
 +
  border-bottom: 0px;
 +
  color: #000000;
 +
}
 +
 +
 +
/* font and text */
 +
 +
.content_wrapper p {
 +
  padding: 0px 15px;
 +
  font-size: 13px;
 +
  font-family: 'Proxima-nova', sans-serif;
 +
}
 +
 +
 +
/* Links */
 +
 +
.content_wrapper a {
 +
  font-weight: bold;
 +
  text-decoration: underline;
 +
  text-decoration-color: #72C489;
 +
  color: #72c9b6;
 +
  -webkit-transition: all 0.4s ease;
 +
  -moz-transition: all 0.4s ease;
 +
  -ms-transition: all 0.4s ease;
 +
  -o-transition: all 0.4s ease;
 +
  transition: all 0.4s ease;
 +
}
 +
 +
 +
/* hover for the links */
 +
 +
.content_wrapper a:hover {
 +
  text-decoration: none;
 +
  color: #000000;
 +
}
 +
 +
 +
/* non numbered lists */
 +
 +
.content_wrapper ul {
 +
  padding: 0px 20px;
 +
  font-size: 13px;
 +
}
 +
 +
 +
/* numbered lists */
 +
 +
.content_wrapper ol {
 +
  padding: 0px;
 +
  font-size: 13px;
 +
}
 +
 +
 +
/* Table */
 +
 +
.content_wrapper table {
 +
  width: 97%;
 +
  margin: 15px 10px;
 +
  border: 1px solid #d3d3d3;
 +
  border-collapse: collapse;
 +
}
 +
 +
 +
/* table cells */
 +
 +
.content_wrapper td {
 +
  padding: 10px;
 +
  vertical-align: text-top;
 +
  border: 1px solid #d3d3d3;
 +
  border-collapse: collapse;
 +
}
 +
 +
 +
/* table headers */
 +
 +
.content_wrapper th {
 +
  padding: 10px;
 +
  vertical-align: text-top;
 +
  border: 1px solid #d3d3d3;
 +
  border-collapse: collapse;
 +
  background-color: #f2f2f2;
 +
}
 +
 +
 +
/* Button class */
 +
 +
.button_click {
 +
  margin: 10px auto;
 +
  padding: 15px;
 +
  width: 12%;
 +
  text-align: center;
 +
  font-weight: bold;
 +
  background-color: #72C489;
 +
  cursor: url(https://static.igem.org/mediawiki/2018/0/04/T--MichiganState--Endophyte2.png), auto;
 +
  -webkit-transition: all 0.4s ease;
 +
  -moz-transition: all 0.4s ease;
 +
  -ms-transition: all 0.4s ease;
 +
  -o-transition: all 0.4s ease;
 +
  transition: all 0.4s ease;
 +
}
 +
 +
 +
/* button class on hover */
 +
 +
.button_click:hover {
 +
  background-color: #000000;
 +
  color: #5bc7d8;
 +
}
 +
 +
.top-pad {
 +
  padding: 35px;
 +
}
 +
 +
.panel-default>.panel-heading> .panel-title > .collapsed div:nth-of-type(2) ::after {
 +
    content:"\25b2";
 +
}
 +
 +
.panel-default>.panel-heading >.panel-title > :not(.collapsed) div:nth-of-type(2) ::after {
 +
    content:"\25bc";
 +
}
 +
 +
nav .navbar {
 +
display: table !important;
 +
}
 +
 +
.navigation-bar {
 +
background-color: #000000;
 +
}
 +
@media (max-width: 980px) {
 +
.navigation-bar {
 +
background-color: #FFFFFF;
 +
}
 +
}
 +
/********************************* RESPONSIVE STYLING ********************************/
 +
  
  
 
</style>
 
</style>
 +
 +
</head>
 +
 +
<body>
 +
 +
<div id="verytop">
 +
 +
  <nav class="navbar navbar-default navbar-fixed-top visible-md visible-lg gradient bmc-bg" style=" padding-top: 20px; padding-left: 8vw; padding-right: 8vw">
 +
    <div class="container-fluid">
 +
 +
 +
<div class="logo-center logoheader">
 +
      <a class="navbar-left" href="https://2018.igem.org/Team:Manchester">
 +
        <a class="navbar-logo" href="https://2018.igem.org/Team:Manchester">
 +
          <img style="float: left; display: block" src="https://static.igem.org/mediawiki/2018/c/c6/T--Manchester--NAVBARLOGOCLEAR.PNG" width="200%">
 +
        </a>
 +
      </a>
 +
</div>
 +
 +
      <div id="navbar" class="navbar-collapse collapse">
 +
        <ul class="nav navbar-nav navbar-right" style="margin-top: 10px;">
 +
 +
          <li class="dropdown dropdown8">
 +
            <a class="dropdown-toggle active dropdowntextcenter" href="https://2018.igem.org/Team:Manchester/Description">Project<span class="caret"></span></a>
 +
            <ul class="dropdown-menu" style="left:0;">
 +
              <li><a href="https://2018.igem.org/Team:Manchester/Description">Project Description</a></li>
 +
              <li><a href="https://2018.igem.org/Team:Manchester/Results">Results</a></li>
 +
              <li><a href="https://2018.igem.org/Team:Manchester/Collaborations">Collaborations</a></li>
 +
<li><a href="https://2018.igem.org/Team:Manchester/Cheesemaking">Cheese Making</a><li>
 +
         
 +
            </ul>
 +
          </li>
 +
 +
         
 +
 +
          <li class="dropdown dropdown5">
 +
            <a class="dropdown-toggle active dropdowntextcenter" href="https://2018.igem.org/Team:Manchester/Experiments">WET LAB<span class="caret"></span></a>
 +
            <ul class="dropdown-menu" style="left:0;">
 +
              <li><a href="https://2018.igem.org/Team:Manchester/InterLab">InterLab</a></li>
 +
              <li><a href="https://2018.igem.org/Team:Manchester/Experiments">Experiments</a></li>
 +
              <li><a href="https://2018.igem.org/Team:Manchester/Protocols">Protocols</a><li>
 +
              <li><a href="https://2018.igem.org/Team:Manchester/LabBook">Lab Book</a><li>
 +
          <li><a href="https://2018.igem.org/Team:Manchester/Parts">Parts</a></li>
 +
 +
       
 +
             
 +
            </ul>
 +
          </li>
 +
 +
 +
          <li class="dropdown dropdown15">
 +
            <a class="dropdown-toggle active dropdowntextcenter" href="https://2018.igem.org/Team:Manchester/Model">DRY LAB<span class="caret"></span></a>
 +
            <ul class="dropdown-menu">
 +
                <li> <a href="https://2018.igem.org/Team:Manchester/PromoterModel">Promoter Tool</a></li>
 +
                <li> <a href="https://2018.igem.org/Team:Manchester/Model">Experimental Model</a><li>
 +
            </ul>
 +
          </li>
 +
 +
          <li class="dropdown dropdown5">
 +
            <a class="dropdown-toggle active dropdowntextcenter" href="">HUMAN PRACTICES<span class="caret"></span></a>
 +
            <ul class="dropdown-menu" style="text-align: right;"></li>
 +
            <li> <a href="https://2018.igem.org/Team:Manchester/Human_Practices">Integrated Human Practices</a></li>
 +
              <li><a href="https://2018.igem.org/Team:Manchester/Public_Engagement">Outreach</a></li>
 +
<li><a href="https://2018.igem.org/Team:Manchester/Burtscheese">Burt's cheese</a></li>
 +
 +
<li><a href="https://2018.igem.org/Team:Manchester/Rokiskiosuris">Rokiškio sūris</a></li>
 +
           
 +
              <li><a href="https://2018.igem.org/Team:Manchester/News">News Feed analysis</a></li>
 +
              <li><a href="https://2018.igem.org/Team:Manchester/Brexit">GMO's and Brexit</a></li>
 +
              <li><a href="https://2018.igem.org/Team:Manchester/EU">European Commission</a></li>
 +
             
 +
         
 +
          </ul>
 +
          </li>
 +
 +
          <li class="dropdown dropdown5">
 +
            <a class="dropdown-toggle active dropdowntextcenter" href="https://2018.igem.org/Team:Manchester/Team">TEAM<span class="caret"></span></a>
 +
            <ul class="dropdown-menu" style="left:0;">
 +
                <li><a href="https://2018.igem.org/Team:Manchester/Team">The Team</a></li>
 +
                <li><a href="https://2018.igem.org/Team:Manchester/Attributions">Attributions</a></li>
 +
 +
            </ul>
 +
          </li>
 +
 +
            </ul>
 +
          </li>
 +
 +
        </ul>
 +
      </div>
 +
      <!-- /.navbar-collapse -->
 +
    </div>
 +
    <!-- /.container-fluid -->
 +
  <div class="clear"></div>
 +
  </nav>
 +
 +
</div>
 +
 +
<div class="gonna-go-fast-to-the-top"><a href="#verytop">
 +
<p><i class="fa fa-3x fa-arrow-circle-o-up"></i></p>
 +
</a></div>
 +
 +
</body>
 +
 +
</html>

Latest revision as of 23:48, 17 October 2018