Difference between revisions of "Template:AshesiGhana/NavBar"

Line 23: Line 23:
 
<style>
 
<style>
 
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
−
+
   
−
/* Clear the default wiki settings */
+
    /* Clear the default wiki settings */
−
+
   
−
#home_logo, #sideMenu { display:none; }
+
    #home_logo, #sideMenu { display:none; }
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
    #sideMenu, #top_title, .patrollink  {display:none;}
−
#content { width:100%; padding:0px;  margin-top:-13px; margin-left:0px;}
+
    #content { width:100%; padding:0px;  margin-top:-13px; margin-left:0px;}
−
body {background-color:white; }
+
    body {background-color:white; }
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
  
Line 286: Line 286:
 
       <a rel="nofollow" rel="noreferrer" href="https://2017.igem.org/Team:AshesiGhana">Ashesi University College</a>
 
       <a rel="nofollow" rel="noreferrer" href="https://2017.igem.org/Team:AshesiGhana">Ashesi University College</a>
 
     </div>
 
     </div>
 +
    <nav>
 +
      <div class="nav-mobile"><a rel="nofollow" rel="noreferrer"id="nav-toggle" href="#!"><span></span></a></div>
 +
      <ul class="nav-list">
 +
        <li>
 +
          <a rel="nofollow" rel="noreferrer" href="https://2017.igem.org/Team:AshesiGhana">Home</a>
 +
        </li>
 +
        <li>
 +
          <a rel="nofollow" rel="noreferrer"href="#!">Team</a>
 +
          <ul class="nav-dropdown">
 +
            <li><a href="https://2017.igem.org/Team:AshesiGhana/Team">Meet The Miners</a></li>
 +
<li><a href="https://2017.igem.org/Team:AshesiGhana/Contributors">Contributors</a></li>
 +
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Sponsors">Sponsors</a></li>
 +
                                        </ul>
 +
        </li>
 +
        <li>
 +
          <a rel="nofollow" rel="noreferrer"href="#!">Project</a>
 +
          <ul class="nav-dropdown">
 +
<li><a href="https://2017.igem.org/Team:AshesiGhana/Motivation">Motivation</a></li>
 +
            <li><a href="https://2017.igem.org/Team:AshesiGhana/Description">Description</a></li>
 +
                                         
 +
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Results">Results</a></li>
 +
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Safety">Safety</a></li>
 +
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Interlab">Interlab</a></li>
 +
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Improvements">Improvements</a></li> </ul>
 +
        </li>
 +
        <li>
 +
          <a rel="nofollow" rel="noreferrer"href="#!">Parts</a>
 +
          <ul class="nav-dropdown">
 +
            <li><a href="https://2017.igem.org/Team:AshesiGhana/Parts">Parts</a></li>                                         
 +
<li><a href="https://2017.igem.org/Team:AshesiGhana/fret">FRET</a></li>
 +
<li><a href="https://2017.igem.org/Team:AshesiGhana/goldlib">Gold Liberation</a></li>
 +
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/collection">Parts Collection</a></li></ul>
 +
        </li>
 +
        <li>
 +
          <a rel="nofollow" rel="noreferrer"href="#!">Human Practices</a>
 +
          <ul class="nav-dropdown">
 +
            <li><a href="https://2017.igem.org/Team:AshesiGhana/Engagement">Public Engagement</a></li>
 +
          </ul>
 +
        </li>
 +
<li>
 +
                            <a rel="nofollow" rel="noreferrer"href="#!">Notebook </a>
 +
                            <ul class="nav-dropdown">
 +
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Brainstorm">Brainstorm</a></li>
 +
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Notebook">Lab Notebook</a></li>
 +
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Protocols">Protocols</a></li>
 +
                                        </ul>
 +
                        </li>
 +
        <li>
 +
          <a rel="nofollow" rel="noreferrer"href="#!">Awards</a>
 +
          <ul class="nav-dropdown">
 +
                                          <li><a href="https://2017.igem.org/Team:AshesiGhana/Collaborations">Collaborations</a></li>
 +
                                            <li><a href="https://2017.igem.org/Team:AshesiGhana/Medal">Medal Citerion</a></li> </ul>
 +
        </li>
 +
      </ul>
 +
    </nav>
 +
  </div>
 +
</section>
 +
 +
 +
<script>
 +
(function($) { // Begin jQuery
 +
  $(function() { // DOM ready
 +
    // If a link has a dropdown, add sub menu toggle.
 +
    $('nav ul li a:not(:only-child)').click(function(e) {
 +
      $(this).siblings('.nav-dropdown').toggle();
 +
      // Close one dropdown when selecting another
 +
      $('.nav-dropdown').not($(this).siblings()).hide();
 +
      e.stopPropagation();
 +
    });
 +
    // Clicking away from dropdown will remove the dropdown class
 +
    $('html').click(function() {
 +
      $('.nav-dropdown').hide();
 +
    });
 +
    // Toggle open and close nav styles on click
 +
    $('#nav-toggle').click(function() {
 +
      $('nav ul').slideToggle();
 +
    });
 +
    // Hamburger to X toggle
 +
    $('#nav-toggle').on('click', function() {
 +
      this.classList.toggle('active');
 +
    });
 +
  }); // end DOM ready
 +
})(jQuery); // end jQuery
 +
</script>
 +
</head>
 +
</html>
 +
<html>
 +
<head>
 +
<meta charset="utf-8">
 +
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 +
 +
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
 +
<!-- icons -->
 +
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
 +
<!--jquery-->
 +
 +
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
 +
<!-- Latest compiled and minified CSS -->
 +
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 +
 +
<script type="text/javascript" async
 +
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
 +
</script>
 +
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 +
 +
<style>
 +
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 +
   
 +
    /* Clear the default wiki settings */
 +
   
 +
    #home_logo, #sideMenu { display:none; }
 +
    #sideMenu, #top_title, .patrollink  {display:none;}
 +
    #content { width:100%; padding:0px;  margin-top:-13px; margin-left:0px;}
 +
    body {background-color:white; }
 +
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 +
 +
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 +
body {
 +
  background-color: white;
 +
  width: 100%;
 +
}
 +
 +
#bodyContent h1,
 +
#bodyContent h2,
 +
#bodyContent h3,
 +
#bodyContent h4,
 +
#bodyContent h5 {
 +
  margin-bottom: 0px;
 +
}
 +
</style>
 +
 +
<style>
 +
.description{
 +
color: black !important;
 +
font-family: 'Josefin Sans', sans-serif;
 +
padding-left: 10%;
 +
padding-right: 10%;
 +
margin: 0 auto;
 +
position: relative;
 +
max-width: 100em;
 +
}
 +
 +
</style>
 +
 +
<style>
 +
@charset "UTF-8";
 +
.navigation {
 +
  height: 70px;
 +
  margin-top:10px;
 +
  padding:0;
 +
  background: #262626;
 +
  font-size: 80%;
 +
}
 +
 +
.brand {
 +
  position: absolute;
 +
  float: left;
 +
  padding-left:2%;
 +
  line-height: 80px;
 +
  text-transform: uppercase;
 +
  font-size: 1.4em;
 +
}
 +
 +
/* ASHESI COLLEGE*/
 +
.brand a,
 +
.brand a:visited{
 +
  color: #ffffff;
 +
  text-decoration: none;
 +
  font-family: 'Josefin Sans', sans-serif;
 +
  font-size: 100%;
 +
}
 +
 +
.nav-container {
 +
  max-width: 1150px;
 +
  margin: 0 auto;
 +
}
 +
 +
nav {
 +
  float: right;
 +
  background: none;
 +
}
 +
nav ul {
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  background: #262626;
 +
 
 +
}
 +
nav ul li {
 +
  float: left;
 +
  position: relative;
 +
  background: red;
 +
 
 +
}
 +
 +
/* text inside navbar before */
 +
nav ul li a,
 +
nav ul li a:visited {
 +
  display: block;
 +
  height: 65px;
 +
  padding: 0 20px;
 +
  background: #262626;
 +
  line-height: 80px;
 +
  //background: purple;
 +
  color: #ffffff;
 +
  text-decoration: none;
 +
  font-family: 'Josefin Sans', sans-serif;
 +
  font-size: 120%;
 +
}
 +
nav ul li a:hover,
 +
nav ul li a:visited:hover {
 +
  background: #2581DC;
 +
  color: #ffffff;
 +
  text-decoration: none;
 +
}
 +
nav ul li a:not(:only-child):after,
 +
nav ul li a:visited:not(:only-child):after {
 +
  padding-left: 4px;
 +
  content: ' ▾';
 +
  text-decoration: none;
 +
}
 +
 +
nav ul li ul {
 +
  height: 5px;
 +
}
 +
 +
 +
nav ul li ul li {
 +
  min-width: 150px;
 +
  height: 50px;
 +
  width: 100%;
 +
 
 +
 +
  /* make dropdown stick to top */
 +
  top: -5px;
 +
}
 +
nav ul li ul li a {
 +
  padding: 15px;
 +
  line-height: 50%;
 +
  margin: 0px;
 +
  text-decoration: none;
 +
 +
}
 +
 +
.nav-dropdown {
 +
  position: absolute;
 +
  display: none;
 +
  left: -23px;
 +
  top: 65px;
 +
  z-index: 1;
 +
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
 +
  height: 100%;
 +
}
 +
 +
/* Mobile navigation */
 +
.nav-mobile {
 +
  float:right;
 +
  display: none;
 +
  position: absolute;
 +
  top: 0;
 +
  right: 0;
 +
  height: 20px;
 +
  width: 70px;
 +
  background: #262626;
 +
 +
}
 +
 +
@media only screen and (max-width: 950px) {
 +
  .nav-mobile {
 +
    display: block;
 +
  }
 +
 +
  nav {
 +
    width: 100%;
 +
    padding: 0 0 0;
 +
  }
 +
 +
  /* background of mobile dropdown */
 +
  nav ul {
 +
    display: none;
 +
 +
    /* width of dropdown */
 +
    position: fixed;
 +
    width: 180px;
 +
    height: auto;
 +
   
 +
    top: 81px;
 +
    right: 0px;
 +
 +
  }
 +
  nav ul li {
 +
    float: none;
 +
    text-align: center;
 +
  }
 +
  nav ul li a {
 +
    padding: 15px;
 +
    line-height: 20px;
 +
   
 +
  }
 +
 +
 +
/* toggle dropdown */
 +
  .nav-dropdown {
 +
  position:fixed;
 +
 
 +
  top: 81px;
 +
  width: 180px;
 +
  height: auto;
 +
 +
 +
  }
 +
  .brand{
 +
    padding-left: 10%;
 +
  }
 +
}
 +
 +
 +
/* background of toggle (mobile) */
 +
#nav-toggle {
 +
  position: absolute;
 +
  left: 18px;
 +
  top: 22px;
 +
  cursor: pointer;
 +
  padding: 10px 35px 16px 0px;
 +
  background: #262626;
 +
}
 +
 +
/* toggle button (mobile) */
 +
#nav-toggle span,
 +
#nav-toggle span:before,
 +
#nav-toggle span:after {
 +
  cursor: pointer;
 +
  border-radius: 1px;
 +
  height: 5px;
 +
  width: 35px;
 +
  background: #ffffff;
 +
  position: absolute;
 +
  display: block;
 +
  content: '';
 +
  transition: all 300ms ease-in-out;
 +
}
 +
#nav-toggle span:before {
 +
  top: -10px;
 +
}
 +
#nav-toggle span:after {
 +
  bottom: -10px;
 +
}
 +
#nav-toggle.active span {
 +
  background-color: transparent;
 +
}
 +
#nav-toggle.active span:before, #nav-toggle.active span:after {
 +
  top: 0;
 +
}
 +
#nav-toggle.active span:before {
 +
  transform: rotate(45deg);
 +
}
 +
#nav-toggle.active span:after {
 +
  transform: rotate(-45deg);
 +
}
 +
 +
</style>
 +
 +
<section class="navigation navbar-fixed-top">
 +
  <div class="nav-container">
 +
<div style="float:right;">
 +
</div>
 +
 +
    <div class="brand" >
 +
    <a href="#" class="pull-left"><img style="max-width:6%; max-height:6%;" src="https://static.igem.org/mediawiki/2017/a/ac/T--AshesiGhana--ashigemlogo.png">Ashesi University College</a>
 +
    </div>
 +
 
     <nav>
 
     <nav>
 
       <div class="nav-mobile"><a rel="nofollow" rel="noreferrer"id="nav-toggle" href="#!"><span></span></a></div>
 
       <div class="nav-mobile"><a rel="nofollow" rel="noreferrer"id="nav-toggle" href="#!"><span></span></a></div>

Revision as of 23:58, 13 August 2017

Ashesi University College
Ashesi University College