Difference between revisions of "Team:TU-Eindhoven/NavMenu"

 
(72 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
  <head>
 +
    <meta charset="utf-8">
 +
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1">
 +
    <link type="image/png" rel="icon" href="https://static.igem.org/mediawiki/2018/6/62/T--TU-Eindhoven--favicon.png">
 +
    <link href="https://2018.igem.org/Team:TU-Eindhoven/bootstrap_css?action=raw&ctype=text/css" rel="stylesheet">
 +
    <link href="https://2018.igem.org/Team:TU-Eindhoven/TUeStyle?action=raw&ctype=text/css" rel="stylesheet">
 +
    <!-- <link href="TUeStyles.css" rel="stylesheet"> -->
 +
    <!--[if lt IE 9]>
 +
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 +
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 +
    <![endif]-->
 +
  </head>
 +
  <body>
 +
    <nav class="navbar navbar-inverse navbar-fixed-top">
 +
        <div class="container">
 +
            <div class="navbar-header">
 +
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
 +
                    <span class="sr-only">Toggle navigation</span>
 +
                    <span class="icon-bar"></span>
 +
                    <span class="icon-bar"></span>
 +
                    <span class="icon-bar"></span>
 +
                </button>
 +
                <a class="logo navbar-brand" href="https://2018.igem.org/Team:TU-Eindhoven">
 +
                    <img src="https://static.igem.org/mediawiki/2018/thumb/1/16/T--TU-Eindhoven--LogoNavBar.png/320px-T--TU-Eindhoven--LogoNavBar.png">
 +
                </a>
 +
            </div>
 +
            <div class="collapse navbar-collapse" id="navbar-collapse-1">
 +
                <ul class="nav navbar-nav navbar-right">
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project<span class="caret"></span></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Design">Design</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Applied_Design">Applied Design</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Model">Model</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Demonstrate">Demonstrate</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Improve">Improve</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Safety">Safety</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Medal_Requirements">Medal Requirements</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Lab<span class="caret"></span></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Notebook">Notebook</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Protocols">Protocols</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/InterLab">InterLab</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Results<span class="caret"></span></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Results">Results Overview</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Lab/Hydrogel">Hydrogel</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Lab/Adhesin">Adhesin</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Lab/Bacteriocin">Bacteriocin</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Parts<span class="caret"></span></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Parts">Parts Overview</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Basic_Part">Basic Parts</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Composite_Part">Composite Parts</a></li>
 +
                        </ul>
 +
                    </li>
 +
                   
 +
                    <!--<li><a href="https://2018.igem.org/Team:TU-Eindhoven/Safety">Safety⇗</a></li> -->
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Human Practices<span class="caret"></span></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Human_Practices">Human Practices</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Edu_n_Public_Engagement">Education &amp; Public Engagement</a></li>
 +
                        </ul>
 +
                    </li>
  
−
<script>
+
                    <!--<li class="dropdown">
−
  (function($) {
+
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Product Design<span class="caret"></span></a>
−
      $.fn.menumaker = function(options) {
+
                        <ul class="dropdown-menu">
−
         
+
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Applied_Design">Product Design</a></li>
−
          var cssmenu = $(this), settings = $.extend({
+
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Applied_Design#Safe_Use_of_GMOs">Safe use of GMOs</a></li>
−
            title: "Menu",
+
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Applied_Design#Living_Materials">Living Materials</a></li>
−
            format: "dropdown",
+
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Applied_Design#Entrapment">Entrapment</a></li>
−
            sticky: false
+
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Applied_Design#Viability">Viability</a></li>
−
          }, options);
+
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Applied_Design#Wound_Care">Wound Care</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Applied_Design#Integrated_Bacteriocins">Integrated Bacteriocins</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Applied_Design#Biosensing">Biosensing</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Applied_Design#Bandage_Design">Bandage Design</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Applied_Design#Conclusion">Conclusion</a></li>
 +
                        </ul>
 +
                    </li>-->
  
−
          return this.each(function() {
+
                    <li class="dropdown">
−
            cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
+
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Team<span class="caret"></span></a>
−
            $(this).find("#menu-button").on('click', function(){
+
                        <ul class="dropdown-menu">
−
              $(this).toggleClass('menu-opened');
+
                            <li><a href='https://2018.igem.org/Team:TU-Eindhoven/Team'>Team Members</a></li>
−
              var mainmenu = $(this).next('ul');
+
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Collaborations">Collaborations</a></li>
−
              if (mainmenu.hasClass('open')) {
+
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Sponsors">Sponsors</a></li>
−
                mainmenu.hide().removeClass('open');
+
                            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Attributions">Attributions</a></li>
−
              }
+
                        </ul>
−
              else {
+
                    </li>
−
                mainmenu.show().addClass('open');
+
                 </ul>
−
                if (settings.format === "dropdown") {
+
             </div>
−
                  mainmenu.find('ul').show();
+
        </div>
−
                 }
+
    </nav>
−
              }
+
−
             });
+
  
−
            cssmenu.find('li ul').parent().addClass('has-sub');
+
     <script src="https://2018.igem.org/Team:TU-Eindhoven/bootstrap_js?action=raw&ctype=text/javascript"></script>
−
 
+
     <script src="https://2018.igem.org/Team:TU-Eindhoven/TUeScript?action=raw&ctype=text/javascript"></script>
−
            multiTg = function() {
+
  </body>
−
              cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
+
</html>
−
              cssmenu.find('.submenu-button').on('click', function() {
+
−
                $(this).toggleClass('submenu-opened');
+
−
                if ($(this).siblings('ul').hasClass('open')) {
+
−
                  $(this).siblings('ul').removeClass('open').hide();
+
−
                }
+
−
                else {
+
−
                  $(this).siblings('ul').addClass('open').show();
+
−
                }
+
−
              });
+
−
            };
+
−
 
+
−
            if (settings.format === 'multitoggle') multiTg();
+
−
            else cssmenu.addClass('dropdown');
+
−
 
+
−
            if (settings.sticky === true) cssmenu.css('position', 'fixed');
+
−
 
+
−
            resizeFix = function() {
+
−
              if ($( window ).width() > 768) {
+
−
                cssmenu.find('ul').show();
+
−
              }
+
−
 
+
−
              if ($(window).width() <= 768) {
+
−
                cssmenu.find('ul').hide().removeClass('open');
+
−
              }
+
−
            };
+
−
            resizeFix();
+
−
            return $(window).on('resize', resizeFix);
+
−
 
+
−
          });
+
−
      };
+
−
     })(jQuery);
+
−
 
+
−
    (function($){
+
−
    $(document).ready(function(){
+
−
 
+
−
    $("#cssmenu").menumaker({
+
−
      title: "Menu",
+
−
      format: "multitoggle"
+
−
    });
+
−
 
+
−
 
+
−
    });
+
−
    })(jQuery);
+
−
 
+
−
</script>
+
−
 
+
−
<style>
+
−
    /*@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);*/
+
−
 
+
−
    #home_logo, #sideMenu { display:none; }
+
−
    #sideMenu, #top_title, .patrollink  {display:none;}
+
−
    #content { margin-left:0px; margin-top:-7px; padding:0px; width:1280px;}
+
−
    body {background-color:white;  width:1280px;}
+
−
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
−
    .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
+
−
   
+
−
 
+
−
    /* Nav bar */
+
−
    #cssmenu,
+
−
    #cssmenu ul,
+
−
    #cssmenu ul li,
+
−
    #cssmenu ul li a,
+
−
    #cssmenu #menu-button {
+
−
      margin: 0;
+
−
      padding: 0;
+
−
      border: 0;
+
−
      list-style: none;
+
−
      line-height: 1;
+
−
      display: block;
+
−
      position: relative;
+
−
      -webkit-box-sizing: border-box;
+
−
      -moz-box-sizing: border-box;
+
−
      box-sizing: border-box;
+
−
    }
+
−
    #cssmenu:after,
+
−
    #cssmenu > ul:after {
+
−
      content: ".";
+
−
      display: block;
+
−
      clear: both;
+
−
      visibility: hidden;
+
−
      line-height: 0;
+
−
      height: 0;
+
−
    }
+
−
    #cssmenu #menu-button {
+
−
      display: none;
+
−
    }
+
−
    #cssmenu {
+
−
      width: auto;
+
−
      border-radius: 5px;
+
−
      font-family: 'Open Sans', Helvetica, sans-serif;
+
−
      background: #3db2e1;
+
−
      background: -o-linear-gradient(top, #69c4e8, #21a1d4);
+
−
      background: -ms-linear-gradient(top, #69c4e8, #21a1d4);
+
−
      background: -webkit-linear-gradient(top, #69c4e8, #21a1d4);
+
−
      background: -moz-linear-gradient(top, #69c4e8, #21a1d4);
+
−
      background: linear-gradient(to bottom, #69c4e8, #21a1d4);
+
−
      box-shadow: inset 0 -3px 0 #1f97c7, inset 0 -3px 3px #1f9acc, inset 0 2px 2px #9ad7ef, inset 1px 0 2px #22a4d9, inset -1px 0 2px #22a4d9, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.17), 2px 1px 2px rgba(0, 0, 0, 0.05), -2px 1px 2px rgba(0, 0, 0, 0.05);
+
−
    }
+
−
    #cssmenu.align-center > ul {
+
−
      font-size: 0;
+
−
      text-align: center;
+
−
    }
+
−
    #cssmenu.align-center ul ul {
+
−
      text-align: left;
+
−
    }
+
−
    #cssmenu.align-center > ul > li {
+
−
      display: inline-block;
+
−
      float: none;
+
−
    }
+
−
    #cssmenu.align-right > ul > li {
+
−
      float: right;
+
−
    }
+
−
    #cssmenu.align-right ul ul {
+
−
      text-align: right;
+
−
    }
+
−
    #cssmenu > ul > li {
+
−
      float: left;
+
−
    }
+
−
    #cssmenu > ul > li > a {
+
−
      padding: 20px 25px;
+
−
      font-size: 13px;
+
−
      color: #ffffff;
+
−
      text-transform: uppercase;
+
−
      letter-spacing: 1px;
+
−
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+
−
      font-weight: 700;
+
−
      text-decoration: none;
+
−
      -webkit-transition: color .2s ease;
+
−
      -moz-transition: color .2s ease;
+
−
      -ms-transition: color .2s ease;
+
−
      -o-transition: color .2s ease;
+
−
      transition: color .2s ease;
+
−
    }
+
−
    #cssmenu > ul > li:hover > a,
+
−
    #cssmenu > ul > li > a:hover,
+
−
    #cssmenu > ul > li.active > a {
+
−
      color: #cae5fd;
+
−
    }
+
−
    #cssmenu > ul > li.has-sub > a {
+
−
      padding-right: 40px;
+
−
    }
+
−
    #cssmenu ul > li.has-sub > a:after {
+
−
      content: '';
+
−
      position: absolute;
+
−
      right: 5px;
+
−
      top: 17.5px;
+
−
      display: block;
+
−
      width: 18px;
+
−
      height: 18px;
+
−
      border-radius: 9px;
+
−
      background: #3db2e1;
+
−
      background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
+
−
      background-size: 36px 36px;
+
−
      background-position: 0 0;
+
−
      background-repeat: no-repeat;
+
−
      -webkit-transition: all 0.1s ease-out;
+
−
      -moz-transition: all 0.1s ease-out;
+
−
      -ms-transition: all 0.1s ease-out;
+
−
      -o-transition: all 0.1s ease-out;
+
−
      transition: all 0.1s ease-out;
+
−
    }
+
−
    #cssmenu ul > li.has-sub:hover > a:after {
+
−
      background-position: 0 -18px;
+
−
    }
+
−
    #cssmenu ul > li.has-sub > a:before {
+
−
      content: '';
+
−
      position: absolute;
+
−
      right: 11px;
+
−
      top: 25.5px;
+
−
      display: block;
+
−
      width: 0;
+
−
      height: 0;
+
−
      border: 3px solid transparent;
+
−
      border-top-color: #ffffff;
+
−
      z-index: 99;
+
−
    }
+
−
    #cssmenu ul > li.has-sub:hover > a:before {
+
−
      border-top-color: #19799f;
+
−
    }
+
−
    #cssmenu ul ul {
+
−
      position: absolute;
+
−
      left: -9999px;
+
−
      opacity: 0;
+
−
      -webkit-transition: top .2s ease, opacity .2s ease;
+
−
      -moz-transition: top .2s ease, opacity .2s ease;
+
−
      -ms-transition: top .2s ease, opacity .2s ease;
+
−
      -o-transition: top .2s ease, opacity .2s ease;
+
−
      transition: top .2s ease, opacity .2s ease;
+
−
    }
+
−
    #cssmenu > ul > li > ul {
+
−
      top: 91px;
+
−
      padding-top: 8px;
+
−
      border-radius: 5px;
+
−
    }
+
−
    #cssmenu > ul > li:hover > ul {
+
−
      left: auto;
+
−
      top: 51px;
+
−
      opacity: 1;
+
−
    }
+
−
    #cssmenu.align-right > ul > li:hover > ul {
+
−
      right: 0;
+
−
    }
+
−
    #cssmenu ul ul ul {
+
−
      top: 40px;
+
−
    }
+
−
    #cssmenu ul ul > li:hover > ul {
+
−
      top: 0;
+
−
      left: 178px;
+
−
      padding-left: 10px;
+
−
      opacity: 1;
+
−
    }
+
−
    #cssmenu.align-right ul ul > li:hover > ul {
+
−
      left: auto;
+
−
      right: 178px;
+
−
      padding-left: 0;
+
−
      padding-right: 10px;
+
−
      opacity: 1;
+
−
    }
+
−
    #cssmenu ul ul li a {
+
−
      width: 180px;
+
−
      padding: 12px 25px;
+
−
      font-size: 13px;
+
−
      font-weight: 700;
+
−
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+
−
      color: #ffffff;
+
−
      text-decoration: none;
+
−
      background: #3db2e1;
+
−
      -webkit-transition: color .2s ease;
+
−
      -moz-transition: color .2s ease;
+
−
      -ms-transition: color .2s ease;
+
−
      -o-transition: color .2s ease;
+
−
      transition: color .2s ease;
+
−
    }
+
−
    #cssmenu ul ul li:hover > a,
+
−
    #cssmenu ul ul li > a:hover,
+
−
    #cssmenu ul ul li.active > a {
+
−
      color: #cae5fd;
+
−
    }
+
−
    #cssmenu ul ul li:first-child > a {
+
−
      border-top-left-radius: 5px;
+
−
      border-top-right-radius: 5px;
+
−
      box-shadow: inset 0 2px 2px #88d0ed;
+
−
    }
+
−
    #cssmenu ul ul li:last-child > a {
+
−
      border-bottom-left-radius: 5px;
+
−
      border-bottom-right-radius: 5px;
+
−
      box-shadow: inset 0 -3px 0 #27a9de, inset 0 -3px 3px #1f9acc, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);
+
−
    }
+
−
    #cssmenu ul ul > li.has-sub > a:after {
+
−
      right: 12px;
+
−
      top: 9.5px;
+
−
      background: #3db2e1;
+
−
      background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
      box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
+
−
      background-size: 36px 36px;
+
−
      background-position: 0 0;
+
−
      background-repeat: no-repeat;
+
−
    }
+
−
    #cssmenu.align-right ul ul > li.has-sub > a:after {
+
−
      right: auto;
+
−
      left: 12px;
+
−
    }
+
−
    #cssmenu ul ul > li.has-sub:hover > a:after {
+
−
      background-position: 0 -18px;
+
−
    }
+
−
    #cssmenu ul ul > li.has-sub > a:before {
+
−
      top: 15.5px;
+
−
      right: 16px;
+
−
      border-top-color: transparent;
+
−
      border-left-color: #ffffff;
+
−
    }
+
−
    #cssmenu.align-right ul ul > li.has-sub > a:before {
+
−
      top: 15.5px;
+
−
      right: auto;
+
−
      left: 16px;
+
−
      border-top-color: transparent;
+
−
      border-right-color: #ffffff;
+
−
      border-left-color: transparent;
+
−
    }
+
−
    #cssmenu ul ul > li.has-sub:hover > a:before {
+
−
      border-top-color: transparent;
+
−
      border-left-color: #1c89b5;
+
−
    }
+
−
    #cssmenu.align-right ul ul > li.has-sub:hover > a:before {
+
−
      border-top-color: transparent;
+
−
      border-left-color: transparent;
+
−
      border-right-color: #1c89b5;
+
−
    }
+
−
    @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
+
−
      #cssmenu {
+
−
        width: 100%;
+
−
      }
+
−
      #cssmenu ul,
+
−
      #cssmenu ul ul,
+
−
      #cssmenu ul ul ul,
+
−
      #cssmenu > ul,
+
−
      #cssmenu.align-center > ul,
+
−
      #cssmenu > ul > li > ul,
+
−
      #cssmenu > ul > li:hover > ul,
+
−
      #cssmenu ul ul li:hover > ul,
+
−
      #cssmenu ul ul ul li:hover > ul,
+
−
      #cssmenu.align-right ul ul,
+
−
      #cssmenu.align-right ul ul li:hover > ul,
+
−
      #cssmenu.align-right ul ul ul li:hover > ul {
+
−
        position: relative;
+
−
        left: 0;
+
−
        right: auto;
+
−
        top: 0;
+
−
        width: 100%;
+
−
        display: none;
+
−
        padding: 0;
+
−
        opacity: 1;
+
−
        text-align: left;
+
−
      }
+
−
      #cssmenu ul li {
+
−
        width: 100%;
+
−
        border-top: 1px solid rgba(120, 120, 120, 0.2);
+
−
      }
+
−
      #cssmenu > ul > li > a,
+
−
      #cssmenu ul ul li a,
+
−
      #cssmenu ul ul li:first-child > a,
+
−
      #cssmenu ul ul li:last-child > a {
+
−
        width: 100%;
+
−
        border-radius: 0;
+
−
        box-shadow: none;
+
−
        background: none;
+
−
      }
+
−
      #cssmenu ul li a {
+
−
        padding-left: 12.5px;
+
−
      }
+
−
      #cssmenu ul ul li a {
+
−
        padding: 14px 25px 14px 27.5px;
+
−
      }
+
−
      #cssmenu ul ul ul li a {
+
−
        padding-left: 42.5px;
+
−
      }
+
−
      #cssmenu ul ul ul ul li a {
+
−
        padding-left: 57.5px;
+
−
      }
+
−
      #cssmenu > ul > li.has-sub > a:after,
+
−
      #cssmenu > ul > li.has-sub > a:before,
+
−
      #cssmenu ul ul li.has-sub > a:after,
+
−
      #cssmenu ul ul li.has-sub > a:before {
+
−
        display: none;
+
−
      }
+
−
      #cssmenu #menu-button {
+
−
        position: relative;
+
−
        display: block;
+
−
        padding: 20px;
+
−
        padding-left: 12.5px;
+
−
        cursor: pointer;
+
−
        font-size: 13px;
+
−
        color: #ffffff;
+
−
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+
−
        font-weight: 700;
+
−
        letter-spacing: 1px;
+
−
        text-transform: uppercase;
+
−
      }
+
−
      #cssmenu .submenu-button {
+
−
        position: absolute;
+
−
        right: 0;
+
−
        display: block;
+
−
        width: 53px;
+
−
        height: 53px;
+
−
        border-left: 1px solid rgba(120, 120, 120, 0.2);
+
−
        z-index: 10;
+
−
        cursor: pointer;
+
−
      }
+
−
      #cssmenu ul ul .submenu-button {
+
−
        height: 41px;
+
−
      }
+
−
      #cssmenu ul .submenu-button:after,
+
−
      #cssmenu #menu-button:after {
+
−
        content: '';
+
−
        position: absolute;
+
−
        right: 12.5px;
+
−
        top: 12.5px;
+
−
        display: block;
+
−
        width: 28px;
+
−
        height: 28px;
+
−
        border-radius: 15px;
+
−
        background: #3db2e1;
+
−
        background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
        background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
        background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
        background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
        background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);
+
−
        box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;
+
−
        background-size: 56px 56px;
+
−
        background-position: 0 0;
+
−
        background-repeat: no-repeat;
+
−
        -webkit-transition: all 0.1s ease-out;
+
−
        -moz-transition: all 0.1s ease-out;
+
−
        -ms-transition: all 0.1s ease-out;
+
−
        -o-transition: all 0.1s ease-out;
+
−
        transition: all 0.1s ease-out;
+
−
      }
+
−
      #cssmenu ul .submenu-button.submenu-opened:after,
+
−
      #cssmenu #menu-button.menu-opened:after {
+
−
        background-position: 0 -28px;
+
−
      }
+
−
      #cssmenu ul ul .submenu-button:after {
+
−
        top: 6.5px;
+
−
      }
+
−
      #cssmenu #menu-button:before,
+
−
      #cssmenu .submenu-button:before {
+
−
        content: '';
+
−
        position: absolute;
+
−
        right: 22.5px;
+
−
        top: 25.5px;
+
−
        display: block;
+
−
        width: 0;
+
−
        height: 0;
+
−
        border: 4px solid transparent;
+
−
        border-top-color: #ffffff;
+
−
        z-index: 99;
+
−
      }
+
−
      #cssmenu ul ul .submenu-button:before {
+
−
        top: 19.5px;
+
−
      }
+
−
      #cssmenu #menu-button.menu-opened:before,
+
−
      #cssmenu .submenu-button.submenu-opened:before {
+
−
        border-top-color: #19799f;
+
−
      }
+
−
    }
+
−
</style>
+
−
 
+
−
 
+
−
<head>
+
−
 
+
−
<!-- This tells the browser that your page is responsive -->
+
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
−
 
+
−
</head>
+
−
 
+
−
 
+
−
<div id='cssmenu'>
+
−
<ul>
+
−
    <li><a href="https://2018.igem.org/Team:TU-Eindhoven">HOME</a></li>
+
−
 
+
−
    <li><a href='#'>TEAM</a>
+
−
      <ul>
+
−
        <li><a href='https://2018.igem.org/Team:TU-Eindhoven/Team'>Team Members</a></li>
+
−
        <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Collaborations">Collaborations</a></li>
+
−
      </ul>
+
−
     </li>
+
−
 
+
−
    <li><a href='#'>PROJECT</a>
+
−
        <ul>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Description">Description</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Design">Design</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Experiments">Experiments</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Notebook">Notebook</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/InterLab">InterLab</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Model">Model</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Results">Results</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Demonstrate">Demonstrate</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Improve">Improve</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Attributions">Attributions</a></li>
+
−
        </ul>
+
−
    </li>
+
−
 
+
−
    <li><a href='#'>PARTS</a>
+
−
        <ul>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Parts">Parts Overview</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Basic_Part">Basic Parts</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Composite_Part">Composite Parts</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Part_Collection">Part Collection</a></li>
+
−
        </ul>
+
−
    </li>
+
−
 
+
−
    <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Safety">SAFETY</a></li>
+
−
 
+
−
    <li><a href="#">HUMAN PRACTICES</a>
+
−
        <ul>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Human_Practices">Human Practices</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Public_Engagement">Education & Engagement</a></li>
+
−
        </ul>
+
−
    </li>
+
−
   
+
−
    <li><a href="#">AWARDS</a>
+
−
        <ul>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Applied_Design">Applied Design</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Entrepreneurship">Entrepreneurship</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Hardware">Hardware</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Measurement">Measurement</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Model">Model</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Plant">Plant</a></li>
+
−
            <li><a href="https://2018.igem.org/Team:TU-Eindhoven/Software">Software</a></li>
+
−
        </ul>
+
−
    </li>
+
−
   
+
−
    <li><a href="https://igem.org/2018_Judging_Form?team=TU-Eindhoven">JUDGING FORM ⇗</a><li>
+
−
</ul>
+
−
</div>
+

Latest revision as of 03:17, 18 October 2018