Difference between revisions of "Template:Team:Michigan/navbar-Irina"

 
(223 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
 
<html>
 
<html>
 +
 
<style>
 
<style>
−
nav {   
+
@import "https://fonts.googleapis.com/css?family=Poiret+One";
−
  display: block;
+
body {
−
   text-align: center;
+
   font-family: 'Poiret One', cursive;
−
  position: fixed;
+
   margin: 0px;
−
  width: 100%;
+
−
   top: 20px;
+
 
}
 
}
−
nav ul {
+
 
−
   margin: 0;
+
div.header {
−
   padding:0;
+
   font-family: 'Poiret One', cursive;
−
   list-style: none;
+
   background: #00274C;
 +
   color: #ffcb05;
 +
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.5);
 +
  position: relative;
 +
  overflow: hidden;
 
}
 
}
−
.nav a {
+
div.header a {
−
  display:block;
+
−
  background: #111;
+
−
  color: #fff;
+
 
   text-decoration: none;
 
   text-decoration: none;
−
   padding: 0.8em 1.8em;
+
   color: inherit;
−
  text-transform: uppercase;
+
−
  font-size: 80%;
+
−
  letter-spacing: 2px;
+
−
  text-shadow: 0 -1px 0 #000;
+
−
  position: relative;
+
−
}
+
−
.nav{ 
+
−
  vertical-align: top;
+
−
  display: inline-block;
+
−
  box-shadow:
+
−
    1px -1px -1px 1px #000,
+
−
    -1px 1px -1px 1px #fff,
+
−
    0 0 6px 3px #fff;
+
−
  border-radius:6px;
+
−
}
+
−
.nav li {
+
−
  position: relative;
+
−
}
+
−
.nav > li {
+
−
  float: left;
+
−
  border-bottom: 4px #aaa solid;
+
−
  margin-right: 1px;
+
−
}
+
−
.nav > li > a {
+
−
  margin-bottom: 1px;
+
−
  box-shadow: inset 0 2em .33em -0.5em #555;
+
−
}
+
−
.nav > li:hover,
+
−
.nav > li:hover > a {
+
−
  border-bottom-color: blue;
+
−
}
+
−
.nav li:hover > a {
+
−
  color:yellow;
+
−
}
+
−
.nav > li:first-child {
+
−
  border-radius: 4px 0 0 4px;
+
−
}
+
−
.nav > li:first-child > a {
+
−
  border-radius: 4px 0 0 0;
+
 
}
 
}
−
.nav > li:last-child {
+
div.header .header-1 {
−
  border-radius: 0 0 4px 0;
+
   height: 100px;
−
  margin-right: 0;
+
−
}
+
−
.nav > li:last-child > a {  
+
−
   border-radius: 0 4px 0 0;
+
 
}
 
}
−
.nav li li a {  
+
 
−
   margin-top: 1px;
+
div.header div.nav {
 +
   display: inline-flex;
 +
  align-items: flex-end;
 +
  float: right;
 +
  height: 100%;
 +
  padding: 4px 50px 0px 6px;
 +
  font-size: 2em;
 
}
 
}
−
.nav li a:first-child:nth-last-child(2):before {  
+
 
−
   content: "";
+
div.header div.nav a {
−
  position: absolute;
+
   border-radius: 8px 8px 0 0;
−
  height: 0;
+
   padding: 5px;
−
  width: 0;  
+
   margin-right: 0px;
−
   border: 5px solid transparent;
+
   height: 2em;
−
  top: 50% ;
+
   width: 75px;
−
   right:5px;
+
−
}
+
−
.nav ul {
+
−
   position: absolute;
+
−
   white-space: nowrap;
+
−
  border-bottom: 5px solid  blue;
+
−
  z-index: 1;
+
−
  left: -99999em;
+
 
}
 
}
−
.nav > li:hover > ul {
+
div.header div.nav a.open {
−
   left: auto;
+
   background: #ffcb05;
−
   margin-top: 5px;
+
   color: #00274C;
−
   min-width: 100%;
+
   font-weight: bold;
 
}
 
}
−
.nav > li li:hover > ul {  
+
div.header div.nav a, div.header div.subnav a {
−
   left: 100%;
+
   display: inline-flex;
−
   margin-left: 1px;
+
  padding: 4px 6px;
−
   top: -1px;
+
   margin-left: 12px;
 +
   bottom: 0px;
 +
  background: inherit;
 +
  color: inherit;
 
}
 
}
−
/* arrow hover styling */
+
div.header div.subnav {
−
.nav > li > a:first-child:nth-last-child(2):before {
+
  background: #ffcb05;
−
   border-top-color: #aaa;  
+
  color: #00274C;
 +
  font-size: 1.5em;
 +
   padding: 12.5px 65px 20px 15px;
 +
  height: 2.25em;
 +
  overflow: hidden;
 
}
 
}
−
.nav > li:hover > a:first-child:nth-last-child(2):before {
+
div.header div.subnav div {
−
   border: 5px solid transparent;  
+
   float: right;
−
  border-bottom-color: blue;
+
−
  margin-top:-5px
+
 
}
 
}
−
.nav li li > a:first-child:nth-last-child(2):before {
+
 
−
   border-left-color: #aaa;  
+
div.header div.subnav div.closed {
−
  margin-top: -5px
+
   display: none;
 
}
 
}
−
.nav li li:hover > a:first-child:nth-last-child(2):before {
+
div.header div.subnav a:hover {
−
   border: 5px solid transparent;
+
   text-decoration: underline;
−
  border-right-color: blue;
+
−
  right: 10px;  
+
 
}
 
}
 +
 
  </style>
 
  </style>
 
<body>
 
<body>
−
<nav>
+
<div class="header">
−
   <ul class="nav">
+
   <div class="header-1">
−
     <li><a href="#">About</a></li>
+
     <div class="nav">
−
    <li><a href="#">Portfolio</a>
+
      <a href="https://2016.igem.org/Team:Michigan" data-section="0" style="padding: 15px 20px 5px 20px; width: 110px; font-weight:650;">Home</a>
−
       <ul>
+
<a href="https://2016.igem.org/Team:Michigan" data-section="1" style="padding: 15px 20px 5px 20px; width: 120px; font-weight:650;" >Project</a>
−
        <li><a href="#">item</a></li>
+
      <a href="https://2016.igem.org/Team:Michigan/Modeling" data-section="2" style="padding: 15px 20px 5px 20px; width: 160px; font-weight:650;">Modeling</a>
−
        <li><a href="#">item</a></li>
+
       <a href="https://2016.igem.org/Team:Michigan/Team" data-section="3" style="padding: 15px 20px 5px 20px; width: 100px; font-weight:650;">Team</a>
−
        <li><a href="#">item</a></li>
+
      <a href="#" data-section="4" style="padding: 15px 20px 5px 20px; width: 125px; font-weight:650;">BioBrick</a>
−
        <li><a href="#">item</a></li>
+
      <a href="#" data-section="5" style="padding: 15px 20px 5px 20px; width: 235px; font-weight:650;">Human Practices</a>
−
      </ul>
+
      <a href="https://2016.igem.org/Team:Michigan/Safety" data-section="6" style="padding: 15px 20px 5px 20px; width: 110px; font-weight:650;">Safety</a>
−
    </li>
+
      <a href="#" data-section="7" style="padding: 15px 20px 5px 20px; width: 130px; font-weight:650;">Awards</a>
−
     <li><a href="#">Resume</a>
+
    </div>
−
       <ul>
+
  </div>
−
        <li><a href="#">item a lonng submenu</a></li>
+
  <div class="subnav">
−
        <li><a href="#">item</a>
+
     <div class="closed" id="subnav-1">
−
          <ul>
+
      <a href="https://2016.igem.org/Team:Michigan/Description" style="font-weight:bold;">Description</a>
−
            <li><a href="#">Ray</a></li>
+
       <a href="https://2016.igem.org/Team:Michigan/Design" style="font-weight:bold;">Design</a>
−
            <li><a href="#">Veronica</a></li>
+
      <a href="https://2016.igem.org/Team:Michigan/Experiments" style="font-weight:bold;">Experiments</a>
−
            <li><a href="#">Bushy</a></li>
+
      <a href="https://2016.igem.org/Team:Michigan/Proof" style="font-weight:bold;">Proof of Concept</a>
−
            <li><a href="#">Havoc</a></li>
+
      <a href="https://2016.igem.org/Team:Michigan/Demonstrate" style="font-weight:bold;">Demonstrate</a>
−
          </ul>
+
      <a href="https://2016.igem.org/Team:Michigan/Results" style="font-weight:bold;">Results</a>
−
        </li>
+
      <a href="https://2016.igem.org/Team:Michigan/Notebook"style="font-weight:bold;">Notebook</a>
−
        <li><a href="#">item</a></li>
+
    </div>
−
        <li><a href="#">item</a></li>
+
    <div class="closed" id="subnav-3">
−
      </ul>
+
      <a href="https://2016.igem.org/Team:Michigan/Team" style="font-weight:bold;">Team</a>
−
     </li>
+
      <a href="https://2016.igem.org/Team:Michigan/Collaborations" style="font-weight:bold;">Collaborations</a>
−
     <li><a href="#">Download</a></li>
+
      <a href="https://2016.igem.org/Team:Michigan/Attributions" style="font-weight:bold;">Attributions</a>
−
    <li><a href="#">Rants</a>
+
    </div>
−
       <ul>
+
    <div class="closed" id="subnav-4">
−
        <li><a href="#">item</a></li>
+
      <a href="https://2016.igem.org/Team:Michigan/Parts" style="font-weight:bold;">Basic Parts</a>
−
        <li><a href="#">item</a></li>
+
      <a href="https://2016.igem.org/Team:Michigan/Composite_Part" style="font-weight:bold;">Composite Parts</a>
−
        <li><a href="#">item</a></li>
+
      <a href="https://2016.igem.org/Team:Michigan/Part_Collection" style="font-weight:bold;">Part Collection</a>
−
        <li><a href="#">item</a></li>
+
     </div>
−
       </ul>
+
     <div class="closed" id="subnav-5">
−
    </li>
+
      <a href="https://2016.igem.org/Team:Michigan/Integrated_Practices" style="font-weight:bold;">Integrated Practices</a>
−
    <li><a href="#">Contact</a></li>
+
      <a href="https://2016.igem.org/Team:Michigan/Engagement" style="font-weight:bold;">Engagement</a>
−
   </ul>
+
       <a href="https://2016.igem.org/Team:Michigan/factsheet" style="font-weight:bold;">Bench-to-Bedside Guide</a>
−
</nav>
+
    </div>
 +
    <div class="closed" id="subnav-7">
 +
      <a href="https://2016.igem.org/Team:Michigan/Entrepreneurship" style="font-weight:bold;">Entrepreneurship</a>
 +
      <a href="https://2016.igem.org/Team:Michigan/Model" style="font-weight:bold;">Model</a>
 +
      <a href="https://2016.igem.org/Team:Michigan/HP/Silver" style="font-weight:bold;">Human Practices Silver</a>
 +
       <a href="https://2016.igem.org/Team:Michigan/HP/Gold" style="font-weight:bold;">Human Practices Gold</a>
 +
      <a href="https://2016.igem.org/Team:Michigan/Medals" style="font-weight:bold;">Medals</a>
 +
    </div>
 +
   </div>
 +
</div>
 +
<script>
 +
$('.nav a').mouseenter( function() {
 +
  var id = '#subnav-' + $(this).attr('data-section');
 +
  $('.subnav .open').toggleClass('open').toggleClass('closed');
 +
  $(id).toggleClass('open').toggleClass('closed');
 +
  $(this).siblings('.open').toggleClass('open');
 +
  $(this).addClass('open');
 +
});
 +
</script>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 03:31, 19 October 2016

Home Project Modeling Team BioBrick Human Practices Safety Awards