Difference between revisions of "Template:Freiburg/Menubar"

Line 1: Line 1:
<!--doctype html-->
+
  <!--doctype html-->
<html>
+
  <html>
    <head>
+
      <head>
        <title>""</title>
+
          <title>""</title>
        <meta charset="utf-8">
+
          <meta charset="utf-8">
  
        <style>
+
          <style>
/* ============= BEGIN: Stylesheet for navigation menu ============= */
+
  /* ============= BEGIN: Stylesheet for navigation menu ============= */
  
/* ==== Begin General Settings ====*/
+
  /* ==== Begin General Settings ====*/
body {
+
  body {
    margin: 0px;
+
      margin: 0px;
}
+
  }
  
#header {
+
  #header {
position: fixed;
+
  position: fixed;
width: 100%;
+
  width: 100%;
margin-top: 0px;
+
  margin-top: 0px;
    z-index: 600;
+
      z-index: 600;
}
+
  }
/* ==== End General Settings ==== */
+
  /* ==== End General Settings ==== */
  
  
#naviconwrapper {
+
  #naviconwrapper {
    margin: 0px ;    /*auto centers wrapper*/
+
      margin: 0px ;    /*auto centers wrapper*/
    height: 60px;
+
      height: 60px;
    width: 100%;
+
      width: 100%;
    min-width: 900px;
+
      min-width: 900px;
    padding-top: 16px;
+
      padding-top: 16px;
    z-index: -100;
+
      z-index: -100;
}
+
  }
  
#naviconbar {
+
  #naviconbar {
    margin: 0px auto;
+
      margin: 0px auto;
    padding: 0px;
+
      padding: 0px;
    width: 100%;
+
      width: 100%;
    min-width: 900px;
+
      min-width: 900px;
    background-color: #0051A2;
+
      background-color: #0051A2;
    border-top-color: #FFF;
+
      border-top-color: #FFF;
    border-top-width: 1px;
+
      border-top-width: 1px;
    border-top-style: inset;
+
      border-top-style: inset;
    border-bottom-color: #FFF;
+
      border-bottom-color: #FFF;
    border-bottom-width: 1px;
+
      border-bottom-width: 1px;
    border-bottom-style: outset;
+
      border-bottom-style: outset;
    z-index: -60;
+
      z-index: -60;
}
+
  }
   
+
     
  
/* ==== Begin Settings Main Menu Icons ==== */
+
  /* ==== Begin Settings Main Menu Icons ==== */
#navicons {
+
  #navicons {
    margin: 0px auto;
+
      margin: 0px auto;
    padding: 0px;
+
      padding: 0px;
    width: 720px;
+
      width: 720px;
    height: 60px;
+
      height: 60px;
    background-color: #0051A2;
+
      background-color: #0051A2;
    z-index: -20;    /*defines color behind icons */  
+
      z-index: -20;    /*defines color behind icons */  
}
+
  }
  
#navicons ul {
+
  #navicons ul {
    margin: 0px auto;
+
      margin: 0px auto;
    padding: 0px;
+
      padding: 0px;
    width: 720px;
+
      width: 720px;
    position: relative;  /*makes chip go directly behind home from left corner*/
+
      position: relative;  /*makes chip go directly behind home from left corner*/
}
+
  }
  
#navicons ul li {
+
  #navicons ul li {
    margin: 0px;
+
      margin: 0px;
    padding: 0px;
+
      padding: 0px;
    list-style: none;
+
      list-style: none;
    /*display: block;*/
+
      /*display: block;*/
    float: left;
+
      float: left;
    position: relative;
+
      position: relative;
    line-height: 106px;
+
      line-height: 106px;
    font-family: sans-serif;
+
      font-family: sans-serif;
    font-size: 12px;
+
      font-size: 12px;
    background-color: #FFF;
+
      background-color: #FFF;
    /*border: 1px solid #5781BD;*/
+
      /*border: 1px solid #5781BD;*/
    z-index: 100;
+
      z-index: 100;
}
+
  }
  
#navicons ul li a {
+
  #navicons ul li a {
    height: 60px;
+
      height: 60px;
    width: 120px;
+
      width: 120px;
    display: block;
+
      display: block;
    text-decoration: none;
+
      text-decoration: none;
    /*color: #FFF;*/
+
      /*color: #FFF;*/
    text-align: center;
+
      text-align: center;
    text-transform: uppercase;
+
      text-transform: uppercase;
    z-index: 50;
+
      z-index: 50;
}
+
  }
  
#navicons ul a:hover {  
+
  #navicons ul a:hover {  
}     
+
  }     
/* ==== End Settings Main Menu Icons ==== */
+
  /* ==== End Settings Main Menu Icons ==== */
 
+
   
  
/* ==== classes for icons ==== */
+
  /* ==== classes for icons ==== */
#home {
+
  #home {
    background: url(https://static.igem.org/mediawiki/2015/8/81/Freiburg_icon_home.png) no-repeat;  
+
      background: url(https://static.igem.org/mediawiki/2015/8/81/Freiburg_icon_home.png) no-repeat;  
    height: 60px;;
+
      height: 60px;;
    background-position: center;
+
      background-position: center;
}
+
  }
  
#home a {
+
  #home a {
    color: #FFF;
+
      color: #FFF;
}
+
  }
  
#project {
+
  #project {
    background: url(https://static.igem.org/mediawiki/2015/6/67/Freiburg_icon_project.png) no-repeat;  
+
      background: url(https://static.igem.org/mediawiki/2015/6/67/Freiburg_icon_project.png) no-repeat;  
    height: 60px;
+
      height: 60px;
    background-position: center;
+
      background-position: center;
}
+
  }
  
#project a {
+
  #project a {
    color: #FFF;
+
      color: #FFF;
}
+
  }
  
#team {
+
  #team {
    background: url(https://static.igem.org/mediawiki/2015/3/38/Freiburg_icon_team.png) no-repeat;  
+
      background: url(https://static.igem.org/mediawiki/2015/3/38/Freiburg_icon_team.png) no-repeat;  
    height: 60px;
+
      height: 60px;
    background-position: center;
+
      background-position: center;
}
+
  }
  
#team a {
+
  #team a {
    color: #FFF;
+
      color: #FFF;
}
+
  }
  
#results {
+
  #results {
    background: url(https://static.igem.org/mediawiki/2015/2/2d/Freiburg_icon_results.png) no-repeat;  
+
      background: url(https://static.igem.org/mediawiki/2015/2/2d/Freiburg_icon_results.png) no-repeat;  
    height: 60px;
+
      height: 60px;
    background-position: center;
+
      background-position: center;
}
+
  }
  
#results a {
+
  #results a {
    color: #FFF;
+
      color: #FFF;
}
+
  }
  
#policy {
+
  #policy {
    background: url(https://static.igem.org/mediawiki/2015/3/3c/Freiburg_icon_policy.png) no-repeat;
+
      background: url(https://static.igem.org/mediawiki/2015/3/3c/Freiburg_icon_policy.png) no-repeat;
    height: 60px;
+
      height: 60px;
    background-position: center;
+
      background-position: center;
}
+
  }
  
#policy a {
+
  #policy a {
    color: #FFF;
+
      color: #FFF;
}
+
  }
  
#notebook {
+
  #notebook {
    background: url(https://static.igem.org/mediawiki/2015/e/e6/Freiburg_icon_notebook.png) no-repeat;  
+
      background: url(https://static.igem.org/mediawiki/2015/e/e6/Freiburg_icon_notebook.png) no-repeat;  
    height: 60px;
+
      height: 60px;
    background-position: center;
+
      background-position: center;
}
+
  }
  
#notebook a {
+
  #notebook a {
    color: #FFF;
+
      color: #FFF;
}
+
  }
/* ==== End classes for icons ==== */
+
  /* ==== End classes for icons ==== */
  
  
/* ==== Begin running chip ==== */
+
  /* ==== Begin running chip ==== */
/* == Begin Chip Design == */
+
  /* == Begin Chip Design == */
#runningchip {
+
  #runningchip {
 +
      position: absolute;
 +
      width: 90px;
 +
      height: 60px;
 +
      top: -15px;
 +
      left: 2.1%;
 +
      -webkit-transition: all 300ms ease-out;
 +
      -moz-transition: all 300ms ease-out;
 +
      transition: all 300ms ease-out;
 +
      z-index: 0;
 +
  }
 +
 
 +
  #runningchip-back{ 
 +
    width:100%;
 +
    height: 85px;
 
     position: absolute;
 
     position: absolute;
     width: 90px;
+
     background:#C5162F;
     height: 60px;
+
     border-radius:5px;
     top: -15px;
+
     border-bottom: 2px solid rgba(0, 0, 0, 0.09);
    left: 2.1%;
+
     border-top: 2px solid rgba(255,255,255,0.1);
     -webkit-transition: all 300ms ease-out;
+
     border-color: #0051A2;
     -moz-transition: all 300ms ease-out;
+
  }  
    transition: all 300ms ease-out;
+
    z-index: 0;
+
}
+
  
#runningchip-back{   
+
  #top-arrow/* arrow like element above slider  */
  width:100%;
+
    position:absolute;
  height: 85px;
+
    overflow:hidden;
  position: absolute;
+
      color: #C5162F;
  background:#C5162F;
+
    width:100%;
  border-radius:5px;
+
    height:14px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.09);
+
    top: 2px;
  border-top: 2px solid rgba(255,255,255,0.1);
+
    left:0;
  border-color: #0051A2;
+
    z-index:2;
}  
+
      background-color: #C5162F;
 +
      border-top-right-radius: 5px;
 +
      border-top-left-radius: 5px;
 +
  }  
  
#top-arrow{ /* arrow like element above slider  */
+
  #top-arrow:before{  
  position:absolute;
+
    content:"";
  overflow:hidden;
+
    position:absolute;
     color: #C5162F;
+
     width:80%;
  width:100%;
+
    height:10px;
  height:14px;
+
    top:-12px;
  top: 2px;
+
     left:10%;
  left:0;
+
     border-radius:20%;
  z-index:2;
+
     box-shadow:0 0 10px black;
     background-color: #C5162F;
+
  }
     border-top-right-radius: 5px;
+
     border-top-left-radius: 5px;
+
}  
+
  
#top-arrow:before{  
+
  #top-arrow:after{   /* little blue arrow */
  content:"";
+
    content:"";
  position:absolute;
+
    position:absolute;
  width:80%;
+
    width:0;
  height:10px;
+
    height:0px;
  top:-12px;
+
    top:0px;
  left:10%;
+
    border-top:8px solid #C5162F;
  border-radius:20%;
+
    border-left:6px solid transparent;
  box-shadow:0 0 10px black;
+
    border-right:6px solid transparent;
}
+
    margin-left:-6px;
 +
    left:50%;
 +
  }
  
#top-arrow:after{   /* little blue arrow */
+
  #bottom-arrow{       /* arrow like element beneath slider */
  content:"";
+
    position:absolute;
  position:absolute;
+
    overflow:hidden;
  width:0;
+
    width:100%;
  height:0px;
+
    height:15px;
  top:0px;
+
    bottom: -30px;
  border-top:8px solid #C5162F;
+
    left:0;
  border-left:6px solid transparent;
+
    z-index:2;
  border-right:6px solid transparent;
+
      background-color: #C5162F;
  margin-left:-6px;
+
      border-bottom-right-radius: 5px;
   left:50%;
+
      border-bottom-left-radius: 5px;
}
+
   }
  
#bottom-arrow{       /* arrow like element beneath slider */
+
  #bottom-arrow:before{
  position:absolute;
+
    content:"";
  overflow:hidden;
+
    position:absolute;
  width:100%;
+
    width:80%;
  height:15px;
+
    height:10px;
  bottom: -30px;
+
    bottom:-12px;
  left:0;
+
    left:10%;
  z-index:2;
+
     border-radius:20%;
    background-color: #C5162F;
+
     box-shadow:0 0 10px black;
     border-bottom-right-radius: 5px;
+
  }
     border-bottom-left-radius: 5px;
+
}
+
  
#bottom-arrow:before{
+
  #bottom-arrow:after{
  content:"";
+
    content:"";
  position:absolute;
+
    position:absolute;
  width:80%;
+
    width:0;
  height:10px;
+
    height:0;
  bottom:-12px;
+
    bottom:0;
  left:10%;
+
    border-bottom:12px solid #C5162F;
  border-radius:20%;
+
    border-left:8px solid transparent;
  box-shadow:0 0 10px black;
+
    border-right:8px solid transparent;
}
+
    margin-left:-8px;
 +
    left:50%;
 +
  }
 +
  /* == End Chip Design == */
  
#bottom-arrow:after{
 
  content:"";
 
  position:absolute;
 
  width:0;
 
  height:0;
 
  bottom:0;
 
  border-bottom:12px solid #C5162F;
 
  border-left:8px solid transparent;
 
  border-right:8px solid transparent;
 
  margin-left:-8px;
 
  left:50%;
 
}
 
/* == End Chip Design == */
 
  
 +
  /* == Begin Chip Movement == */
 +
  #home:hover ~ #runningchip {
 +
      left: 2.1%;
 +
  }
  
/* == Begin Chip Movement == */
+
  #project:hover ~ #runningchip {
#home:hover ~ #runningchip {
+
      left: 18.6%;
    left: 2.1%;
+
  }
}
+
  
#project:hover ~ #runningchip {
+
  #team:hover ~ #runningchip {
    left: 18.6%;
+
      left: 35.5%;
}
+
  }
  
#team:hover ~ #runningchip {
+
  #results:hover ~ #runningchip {
    left: 35.5%;
+
      left: 52%;
}
+
  }
  
#results:hover ~ #runningchip {
+
  #policy:hover ~ #runningchip {
    left: 52%;
+
      left: 68.9%;
}
+
  }
  
#policy:hover ~ #runningchip {
+
  #notebook:hover ~ #runningchip {
    left: 68.9%;
+
      left: 85.5%;
}
+
  }
 +
  /* == End Chip Movment == */
 +
  /* ==== End running chip ==== */
  
#notebook:hover ~ #runningchip {
 
    left: 85.5%;
 
}
 
/* == End Chip Movment == */
 
/* ==== End running chip ==== */
 
  
 +
  /* ==== Begin Settings Submenu Level 1 ==== */
 +
  #navtextwrapper {                /*define background box*/
 +
      margin: 0 auto;
 +
      padding: 0px;
 +
      top: -2px;
 +
      height: 24px;
 +
      width: 920px;
 +
      position: relative;
 +
      /*border: 2px solid #000;*/
 +
  }
  
/* ==== Begin Settings Submenu Level 1 ==== */
+
  #navtext {
#navtextwrapper {               /*define background box*/
+
      text-align: center;
    margin: 0 auto;
+
      font-family: Roboto,sans-serif;
    padding: 0px;
+
      font-size: 16px;
    top: -2px;
+
      z-index: 600;
    height: 24px;
+
  }
    width: 920px;
+
    position: relative;
+
    /*border: 2px solid #000;*/
+
}
+
  
#navtext {
+
  #navtext ul {
    text-align: center;
+
      margin: 0px auto;
    font-family: Roboto,sans-serif;
+
      top: -8px;
    font-size: 16px;
+
      padding: 0px;
    z-index: 600;
+
      position: absolute;
}
+
      z-index: 600;
 +
  }
  
#navtext ul {
+
  #navtext li {
    margin: 0px auto;
+
      margin: 0px auto;       /*centers text*/
    top: -8px;
+
      list-style: none;
    padding: 0px;
+
      display: block;        /*makes items go horizontal and centers them*/
    position: absolute;
+
      /*float: left;*/                /*makes items go horizontal*/
    z-index: 600;
+
      position: relative;
}
+
      z-index: 600;
 +
  }  
  
#navtext li {
+
  #navtext ul li a {
    margin: 0px auto;       /*centers text*/
+
      margin-top: 2px;
    list-style: none;
+
      height: 24px;
    display: block;       /*makes items go horizontal and centers them*/
+
      padding-left: 10px;
    /*float: left;*/                /*makes items go horizontal*/
+
      padding-right: 10px;
    position: relative;
+
      text-decoration: none;
    z-index: 600;
+
      color: #FFF;
}  
+
      display: block;
 +
      text-align: center;
 +
      border-radius: 8px;
 +
      z-index: 600;
 +
  }
  
#navtext ul li a {
+
  #navtext ul li:hover > a {
    margin-top: 2px;
+
    /* background-color: #6696c7; /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
    height: 24px;
+
      color: #ecdc18;
    padding-left: 10px;
+
  }
    padding-right: 10px;
+
    text-decoration: none;
+
    color: #FFF;
+
    display: block;
+
    text-align: center;
+
    border-radius: 8px;
+
    z-index: 600;
+
}
+
  
#navtext ul li:hover > a {
+
  #project-sub {
  /* background-color: #6696c7; /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
+
      display: none;
    color: #ecdc18;
+
      left: 22.6%;
}
+
  }
  
#project-sub {
+
  #team-sub {
    display: none;
+
      /*background-color: #ac34fe;*/
    left: 22.6%;
+
      display: none;
}
+
      left: 35.2%;
 +
  }
  
#team-sub {
+
  #results-sub{
    /*background-color: #ac34fe;*/
+
      display: none;
    display: none;
+
      left: 49.4%;
    left: 35.2%;
+
  }
}
+
  
#results-sub{
+
  #policy-sub{
    display: none;
+
      display: none;
    left: 49.4%;
+
      left: 62.8%;
}
+
  }
  
#policy-sub{
+
  #notebook-sub{
    display: none;
+
      display: none;
    left: 62.8%;
+
      left: 77.6%;
}
+
  }
  
#notebook-sub{
+
  .chip_gap {
    display: none;
+
      content: none;
    left: 77.6%;
+
  }
}
+
  
.chip_gap {
+
  .navsub1 {
    content: none;
+
      background-color: #1962AB;
}
+
  opacity: 1;
 +
  }
 +
  /* ==== End Settings Submenu Level 1 ==== */
  
.navsub1 {
 
    background-color: #1962AB;
 
opacity: 1;
 
 
/* ==== End Settings Submenu Level 1 ==== */
 
  
 +
  /* ==== Begin Settings Submenu Level 2 ==== */
 +
  #navtext ul ul {
 +
      position: absolute;
 +
      width: 130%;
 +
      display: none;
 +
      left: 100%;              /* subsubmenu always touches its parent element jb */
 +
      top: -2px;
 +
  }
  
/* ==== Begin Settings Submenu Level 2 ==== */
+
  #navtext ul ul li {
#navtext ul ul {
+
      margin: 0px auto;       /*centers text*/
    position: absolute;
+
      list-style: none;
    width: 130%;
+
      /*display: block; */      /*makes items go horizontal and centers them*/
    display: none;
+
      /*float: left;*/               /*makes items go horizontal*/
    left: 100%;              /* subsubmenu always touches its parent element jb */
+
      position: relative;
    top: -2px;  
+
  }  
}
+
  
#navtext ul  ul li {
+
  #navtext ul  ul li a {
    margin: 0px auto;       /*centers text*/
+
      height: 24px;
    list-style: none;
+
      padding-left: 10px;
    /*display: block; */       /*makes items go horizontal and centers them*/
+
      padding-right: 10px;
    /*float: left;*/              /*makes items go horizontal*/
+
      text-decoration: none;
    position: relative;
+
      color: #FFF;
}  
+
       /*display: block;*/
 +
      text-align: center;
 +
  }
  
#navtext ul ul li a {
+
  #navtext ul li:hover ul {
    height: 24px;
+
      display: block;
    padding-left: 10px;
+
  }
    padding-right: 10px;
+
    text-decoration: none;
+
    color: #FFF;
+
    /*display: block;*/
+
    text-align: center;
+
}
+
  
#navtext ul li:hover ul {
+
  .navsub2 {
    display: block;
+
      background-color: #0051a2;
}
+
      opacity: 1;
 +
  }
  
.navsub2 {
+
  .navsub2before {
    background-color: #0051a2;
+
      background-color: #0051A2;
    opacity: 1;
+
      border-top-right-radius: 8px;
}
+
      opacity: 0.6;
 +
  }
  
.navsub2before {
+
  .navsub2after {
    background-color: #0051A2;
+
      background-color: #0051A2;
    border-top-right-radius: 8px;
+
      border-bottom-right-radius: 8px;
    opacity: 0.6;
+
      border-bottom-left-radius: 8px;
}
+
      opacity: 0.6;
 +
  }
  
.navsub2after {
+
  .subsubmenu{
    background-color: #0051A2;
+
  background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_submenu_arrow.png");
    border-bottom-right-radius: 8px;
+
  background-repeat: no-repeat;
    border-bottom-left-radius: 8px;
+
  background-position: 95% 50%;
    opacity: 0.6;
+
  background-size: 10px 13px;
}
+
  }
  
.subsubmenu{
+
  /* ==== End Settings Submenu Level 2 ==== */
background-image: url("https://static.igem.org/mediawiki/2015/f/ff/Freiburg_submenu_arrow.png");
+
background-repeat: no-repeat;
+
background-position: 95% 50%;
+
background-size: 10px 13px;
+
}
+
  
/* ==== End Settings Submenu Level 2 ==== */
 
  
 +
  /* ============= BEGIN: Stylesheet for navigation menu ============= */ 
 +
  </style>
  
/* ============= BEGIN: Stylesheet for navigation menu ============= */ 
 
</style>
 
  
  
 +
  <script type="text/javascript">
  
<script type="text/javascript">
+
    $(document).ready(beecode);
 +
    $(window).on('resize', beecode);
  
   var windowWidth = $(window).width();
+
    function beecode() {
 +
   // make submenus appear //
 +
      var windowWidth = $(window).width();
 +
      if (windowWidth > 850) {
 +
        console.log('windowWidth ='+windowWidth);
 +
        $("#home").hover(function(){
 +
            $("#team-sub") .hide();
 +
            $("#project-sub") .hide();
 +
            $("#results-sub") .hide();
 +
            $("#policy-sub") .hide();
 +
            $("#notebook-sub") .hide();
 +
        });
 +
        $("#project").hover(function(){
 +
            $("#project-sub") .show();
 +
            $("#team-sub") .hide();
 +
            $("#results-sub") .hide();
 +
            $("#policy-sub") .hide();
 +
            $("#notebook-sub") .hide();
 +
        },
 +
                                function(){
 +
            $("#project-sub") .hide();
 +
        });
 +
       
 +
        $("#team").hover(function(){
 +
            $("#team-sub") .show();
 +
            $("#project-sub") .hide();
 +
            $("#results-sub") .hide();
 +
            $("#policy-sub") .hide();
 +
            $("#notebook-sub") .hide();
 +
        },
 +
                                function(){
 +
            $("#team-sub") .hide();
 +
        });
 +
       
 +
        $("#results").hover(function(){
 +
            $("#results-sub") .show();
 +
            $("#project-sub") .hide();
 +
            $("#team-sub") .hide();
 +
            $("#policy-sub") .hide();
 +
            $("#notebook-sub") .hide();
 +
        });
 +
       
 +
        $("#policy").hover(function(){
 +
            $("#policy-sub") .show();
 +
            $("#project-sub") .hide();
 +
            $("#team-sub") .hide();
 +
            $("#results-sub") .hide();
 +
            $("#notebook-sub") .hide();
 +
        },
 +
                                function(){
 +
            $("#policy-sub") .hide();
 +
        });
 +
       
 +
        $("#notebook").hover(function(){
 +
            $("#notebook-sub") .show();
 +
            $("#project-sub") .hide();
 +
            $("#team-sub") .hide();
 +
            $("#results-sub") .hide();
 +
            $("#policy-sub") .hide();
 +
        },
 +
                                function(){
 +
            $("#notebook-sub") .hide();
 +
        });
 +
  // make chip stay over main menu point when its submenu appears and makes the submenu stay visible//
 +
        $("#project-sub") .hover(function(){
 +
            $("#runningchip") .css('left','18.6%');
 +
            $("#project-sub") .show();
 +
        },
 +
                                function(){
 +
            $("#runningchip") .css('left','');
 +
            $("#project-sub") .hide();
 +
        });
 +
        $("#team-sub") .hover(function(){
 +
            $("#runningchip") .css('left','35.5%');
 +
            $("#team-sub") .show();
 +
        },
 +
                                function(){
 +
            $("#runningchip") .css('left','');
 +
            $("#team-sub") .hide();
 +
        });
 +
        $("#results-sub") .hover(function(){
 +
            $("#runningchip") .css('left','52%');
 +
            $("#results-sub") .show();
 +
        },
 +
                                function(){
 +
            $("#runningchip") .css('left','');
 +
            $("#results-sub") .hide();
 +
        });
 +
        $("#policy-sub") .hover(function(){
 +
            $("#runningchip") .css('left','68.9%');
 +
            $("#policy-sub") .show();
 +
        },
 +
                                function(){
 +
            $("#runningchip") .css('left','');
 +
            $("#policy-sub") .hide();
 +
        });
 +
        $("#notebook-sub") .hover(function(){
 +
            $("#runningchip") .css('left','85.5%');
 +
            $("#notebook-sub") .show();
 +
        },
 +
                                function(){
 +
            $("#runningchip") .css('left','');
 +
            $("#notebook-sub") .hide();
 +
        });
 +
      } // end jquery min-width
 +
    }
 +
  </script>
  
  $(document).ready(beecode);
 
  $(window).on('resize', beecode);
 
  
   function beecode() {
+
   <script>
// make submenus appear //
+
           /*Attachable menu code*/
    if (windowWidth > 850) {
+
           $( document ).ready(function() {
      console.log('windowWidth ='+windowWidth);
+
            
      $("#home").hover(function(){
+
              $(window).scroll(function (event) {
           $("#team-sub") .hide();
+
                  var y = $(this).scrollTop();  
          $("#project-sub") .hide();
+
                  if(y>60){
          $("#results-sub") .hide();
+
          $("#policy-sub") .hide();
+
          $("#notebook-sub") .hide();
+
      });
+
      $("#project").hover(function(){
+
          $("#project-sub") .show();
+
          $("#team-sub") .hide();
+
          $("#results-sub") .hide();
+
          $("#policy-sub") .hide();
+
          $("#notebook-sub") .hide();
+
      },
+
                              function(){
+
          $("#project-sub") .hide();
+
      });
+
     
+
      $("#team").hover(function(){
+
          $("#team-sub") .show();
+
          $("#project-sub") .hide();
+
          $("#results-sub") .hide();
+
          $("#policy-sub") .hide();
+
          $("#notebook-sub") .hide();
+
      },
+
                              function(){
+
          $("#team-sub") .hide();
+
      });
+
     
+
      $("#results").hover(function(){
+
          $("#results-sub") .show();
+
          $("#project-sub") .hide();
+
          $("#team-sub") .hide();
+
          $("#policy-sub") .hide();
+
          $("#notebook-sub") .hide();
+
      });
+
     
+
      $("#policy").hover(function(){
+
          $("#policy-sub") .show();
+
          $("#project-sub") .hide();
+
          $("#team-sub") .hide();
+
          $("#results-sub") .hide();
+
          $("#notebook-sub") .hide();
+
      },
+
                              function(){
+
          $("#policy-sub") .hide();
+
      });
+
     
+
      $("#notebook").hover(function(){
+
          $("#notebook-sub") .show();
+
          $("#project-sub") .hide();
+
          $("#team-sub") .hide();
+
          $("#results-sub") .hide();
+
          $("#policy-sub") .hide();
+
      },
+
                              function(){
+
          $("#notebook-sub") .hide();
+
      });
+
// make chip stay over main menu point when its submenu appears and makes the submenu stay visible//
+
      $("#project-sub") .hover(function(){
+
           $("#runningchip") .css('left','18.6%');
+
          $("#project-sub") .show();
+
      },
+
                              function(){
+
           $("#runningchip") .css('left','');
+
          $("#project-sub") .hide();
+
      });
+
      $("#team-sub") .hover(function(){
+
          $("#runningchip") .css('left','35.5%');
+
          $("#team-sub") .show();
+
      },
+
                              function(){
+
          $("#runningchip") .css('left','');
+
          $("#team-sub") .hide();
+
      });
+
      $("#results-sub") .hover(function(){
+
          $("#runningchip") .css('left','52%');
+
          $("#results-sub") .show();
+
      },
+
                              function(){
+
          $("#runningchip") .css('left','');
+
          $("#results-sub") .hide();
+
      });
+
      $("#policy-sub") .hover(function(){
+
          $("#runningchip") .css('left','68.9%');
+
          $("#policy-sub") .show();
+
      },
+
                              function(){
+
          $("#runningchip") .css('left','');
+
          $("#policy-sub") .hide();
+
      });
+
      $("#notebook-sub") .hover(function(){
+
          $("#runningchip") .css('left','85.5%');
+
          $("#notebook-sub") .show();
+
      },
+
                              function(){
+
          $("#runningchip") .css('left','');
+
          $("#notebook-sub") .hide();
+
      });
+
    } // end jquery min-width
+
  }
+
</script>
+
  
 +
                      $("#header").css('position','fixed');
 +
                      $("#header").css('width','100%');
 +
                      $("#header").css('margin-top','-61px');
 +
                      $("#bottom-arrow").css('display','none');
 +
                      $("#runningchip-back").css('display','none');
 +
                      $("#navtext").css('margin-top','-20px');
 +
                      $(".chip_gap").css('height','30px');
  
<script>
+
                  }else{
        /*Attachable menu code*/
+
                      var offsetTop = -y;
        $( document ).ready(function() {
+
                      $("#header").css('margin-top',offsetTop+'px');
       
+
                      $("#bottom-arrow").removeAttr('style');
            $(window).scroll(function (event) {
+
                      $("#runningchip-back").removeAttr('style');
                var y = $(this).scrollTop();  
+
                      $("#navtext").removeAttr('style');
                if(y>60){
+
                      $(".chip_gap").css('height','23px');
 +
                  }
  
                    $("#header").css('position','fixed');
+
              });
                    $("#header").css('width','100%');
+
                    $("#header").css('margin-top','-61px');
+
                    $("#bottom-arrow").css('display','none');
+
                    $("#runningchip-back").css('display','none');
+
                    $("#navtext").css('margin-top','-20px');
+
                    $(".chip_gap").css('height','30px');
+
  
                }else{
 
                    var offsetTop = -y;
 
                    $("#header").css('margin-top',offsetTop+'px');
 
                    $("#bottom-arrow").removeAttr('style');
 
                    $("#runningchip-back").removeAttr('style');
 
                    $("#navtext").removeAttr('style');
 
                    $(".chip_gap").css('height','23px');
 
                }
 
  
            });
+
          });
 
+
 
+
        });
+
  
        </script>
+
          </script>
  
<!------------- END: jQuery ------------->
+
  <!------------- END: jQuery ------------->
  
    </head>
+
      </head>
  
  
<!------------- BEGIN: Body content =------------->
+
  <!------------- BEGIN: Body content =------------->
    <body>
+
      <body>
      <div id="header">
+
        <div id="header">
<!-- Begin navigation menu icons -->
+
  <!-- Begin navigation menu icons -->
            <div id="naviconwrapper">  <!-- hier könnte man noch ein Logo in einer Seitenecke platzieren -->
+
              <div id="naviconwrapper">  <!-- hier könnte man noch ein Logo in einer Seitenecke platzieren -->
                <div id="naviconbar">
+
                  <div id="naviconbar">
                <div id="navicons"> <!-- only icons -->
+
                  <div id="navicons"> <!-- only icons -->
                    <ul>
+
                      <ul>
                        <li id="home" ><a href="https://2015.igem.org/Team:Freiburg/Home">Home</a>
+
                          <li id="home" ><a href="https://2015.igem.org/Team:Freiburg/Home">Home</a>
                        </li>
+
                          </li>
                        <li id="project"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview">Project</a>
+
                          <li id="project"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview">Project</a>
                        </li>
+
                          </li>
                        <li id="team"><a href="https://2015.igem.org/Team:Freiburg/Team">Team</a>
+
                          <li id="team"><a href="https://2015.igem.org/Team:Freiburg/Team">Team</a>
                        </li>
+
                          </li>
                        <li id="results"><a href="https://2015.igem.org/Team:Freiburg/Results">Results</a>
+
                          <li id="results"><a href="https://2015.igem.org/Team:Freiburg/Results">Results</a>
                        </li>
+
                          </li>
                        <li id="policy" style="font-size:11px"><a href="https://2015.igem.org/Team:Freiburg/Practices">Human Practice</a>
+
                          <li id="policy" style="font-size:11px"><a href="https://2015.igem.org/Team:Freiburg/Practices">Human Practice</a>
                        </li>
+
                          </li>
                        <li id="notebook"><a href="https://2015.igem.org/Team:Freiburg/Notebook">Notebook</a>
+
                          <li id="notebook"><a href="https://2015.igem.org/Team:Freiburg/Notebook">Notebook</a>
                        </li>
+
                          </li>
                    <div id="runningchip">
+
                      <div id="runningchip">
                                <div id="top-arrow"></div>
+
                                  <div id="top-arrow"></div>
                                <div id="runningchip-back"></div>
+
                                  <div id="runningchip-back"></div>
                                <div id="bottom-arrow"></div>
+
                                  <div id="bottom-arrow"></div>
                    </div>
+
                      </div>
                    </ul>
+
                      </ul>
                </div>
+
                  </div>
                </div>
+
                  </div>
            </div>  
+
              </div>  
<!-- End navigation menu icons -->
+
  <!-- End navigation menu icons -->
  
           
+
             
<!-- Begin navigation submenu -->
+
  <!-- Begin navigation submenu -->
            <div id="navtextwrapper"> <!-- only names of elements -->
+
              <div id="navtextwrapper"> <!-- only names of elements -->
                <div id="navtext">
+
                  <div id="navtext">
                    <ul id="project-sub">
+
                      <ul id="project-sub">
                        <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview"></a></li>
+
                          <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Project/Overview"></a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Overview">Introduction</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Overview">Introduction</a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/System">System Overview</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/System">System Overview</a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Diagnostics">Diagnostics today</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Diagnostics">Diagnostics today</a></li>
                        <li><a class="navsub1 subsubmenu" href="#">The DiaCHIP</a>
+
                          <li><a class="navsub1 subsubmenu" href="#">The DiaCHIP</a>
                            <ul>
+
                              <ul>
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Methods/Cloning">DNA Engineering</a></li>
+
                                  <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Methods/Cloning">DNA Engineering</a></li>
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Cellfree_Expression">Cell-free Expression</a></li>
+
                                  <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Cellfree_Expression">Cell-free Expression</a></li>
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Protein_Purification">Protein Purification</a></li>
+
                                  <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Protein_Purification">Protein Purification</a></li>
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry">Surface Chemistry</a></li>
+
                                  <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Surface_Chemistry">Surface Chemistry</a></li>
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/iRIf">Optical Detection</a></li>
+
                                  <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/iRIf">Optical Detection</a></li>
                            </ul>
+
                              </ul>
                        </li>
+
                          </li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Future_Directions">Outlook</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Project/Future_Directions">Outlook</a></li>
                    </ul>
+
                      </ul>
                    <ul id="team-sub">
+
                      <ul id="team-sub">
                        <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Team"></a></li>
+
                          <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Team"></a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Team">Members</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Team">Members</a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Attributions">Acknowledgements</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Attributions">Acknowledgements</a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Partners">Partners</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Partners">Partners</a></li>
                    </ul>
+
                      </ul>
                    <ul id="results-sub">
+
                      <ul id="results-sub">
                        <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Results"></a></li>
+
                          <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Results"></a></li>
                        <li><a class="navsub1 subsubmenu" href="#">The DiaCHIP</a>
+
                          <li><a class="navsub1 subsubmenu" href="#">The DiaCHIP</a>
                            <ul>
+
                              <ul>
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results">Main Results</a></li>
+
                                  <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results">Main Results</a></li>
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Diagnostics">Diagnostics</a></li>
+
                                  <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Diagnostics">Diagnostics</a></li>
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Own_Device">Own Device</a></li>
+
                                  <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Own_Device">Own Device</a></li>
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Immobilization">DNA Immobilization</a></li>
+
                                  <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Immobilization">DNA Immobilization</a></li>
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Cellfree">Cellfree Expression</a></li>
+
                                  <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Cellfree">Cellfree Expression</a></li>
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Surface">Binding on Surface</a></li>
+
                                  <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Surface">Binding on Surface</a></li>
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Modeling">Modeling</a></li>
+
                                  <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Results/Modeling">Modeling</a></li>
                            </ul>
+
                              </ul>
                        </li>
+
                          </li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Parts">BioBricks</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Parts">BioBricks</a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Collaborations">Collaborations</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Collaborations">Collaborations</a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/InterLab_Study">Interlab Study</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/InterLab_Study">Interlab Study</a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Achievements">Achievements</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Achievements">Achievements</a></li>
                    </ul>  
+
                      </ul>  
                    <ul id="policy-sub">
+
                      <ul id="policy-sub">
                        <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Human_Practice"></a></li>
+
                          <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Human_Practice"></a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Science_Fair">Science Fair</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Science_Fair">Science Fair</a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Theater_Project">Theater Project</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Theater_Project">Theater Project</a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Public_Opinion">Public Opinion</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Public_Opinion">Public Opinion</a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/College">College Talk</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/College">College Talk</a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Ethics">Ethics</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Human_Practice/Ethics">Ethics</a></li>
                    </ul>
+
                      </ul>
                    <ul id="notebook-sub">
+
                      <ul id="notebook-sub">
                        <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Notebook"></a></li>
+
                          <li class="chip_gap"><a href="https://2015.igem.org/Team:Freiburg/Notebook"></a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Labjournals">Labjournals</a>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Labjournals">Labjournals</a>
                        </li>
+
                          </li>
                        <li><a class="navsub1 subsubmenu" href="#">Techniques</a>
+
                          <li><a class="navsub1 subsubmenu" href="#">Techniques</a>
                            <ul>
+
                              <ul>
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Classic_vs_Gibson">Gibson</a></li>
+
                                  <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Classic_vs_Gibson">Gibson</a></li>
                                <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Coli_Strains"><i>E.coli</i> Strains</a></li>
+
                                  <li><a class="navsub2" href="https://2015.igem.org/Team:Freiburg/Project/Coli_Strains"><i>E.coli</i> Strains</a></li>
                            </ul>
+
                              </ul>
                        </li>
+
                          </li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Protocols">Protocols</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Protocols">Protocols</a></li>
                        <li><a class="navsub1" href="">Materials</a></li>
+
                          <li><a class="navsub1" href="">Materials</a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Safety">Safety</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Safety">Safety</a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Wikimigration">Wiki-Tricks</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Wikimigration">Wiki-Tricks</a></li>
                        <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Glossary">Glossary</a></li>
+
                          <li><a class="navsub1" href="https://2015.igem.org/Team:Freiburg/Glossary">Glossary</a></li>
                            </ul>  
+
                              </ul>  
                        </li>
+
                          </li>
                    </ul>
+
                      </ul>
                </div>
+
                  </div>
            </div>   
+
              </div>   
<!-- End of navigation submenu -->
+
  <!-- End of navigation submenu -->
        </div>
+
          </div>
  
<!-- End of header -->     
+
  <!-- End of header -->     
  
    </body>
+
      </body>
</html>
+
  </html>

Revision as of 22:17, 15 September 2015

 
      
          ""