Team:TU Eindhoven/Template:NavPanel

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
 
<html>
<html>
 +
 +
<head>
 +
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 +
  <title>TU Eindhoven iGEM</title>
 +
  <link href="https://2014.igem.org/Team:TU_Eindhoven/Style:NavPanel?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all" />
 +
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
 +
 +
<head>
<head>
   <meta charset='utf-8'>
   <meta charset='utf-8'>
Line 11: Line 18:
    
    
   <style>
   <style>
-
   #cssmenu {
+
   #h_menu {
   position: relative;
   position: relative;
   height: 44px;
   height: 44px;
Line 17: Line 24:
   width: auto;
   width: auto;
}
}
-
#cssmenu ul {
+
#h_menu ul {
   list-style: none;
   list-style: none;
   padding: 0;
   padding: 0;
Line 23: Line 30:
   line-height: 1;
   line-height: 1;
}
}
-
#cssmenu > ul {
+
#h_menu > ul {
   position: relative;
   position: relative;
   display: block;
   display: block;
Line 30: Line 37:
   z-index: 500;
   z-index: 500;
}
}
-
#cssmenu:after,
+
#h_menu:after,
-
#cssmenu > ul:after {
+
#h_menu > ul:after {
   content: ".";
   content: ".";
   display: block;
   display: block;
Line 39: Line 46:
   height: 0;
   height: 0;
}
}
-
#cssmenu.align-right > ul > li {
+
#h_menu.align-right > ul > li {
   float: right;
   float: right;
}
}
-
#cssmenu.align-center ul {
+
#h_menu.align-center ul {
   text-align: center;
   text-align: center;
}
}
-
#cssmenu.align-center ul ul {
+
#h_menu.align-center ul ul {
   text-align: left;
   text-align: left;
}
}
-
#cssmenu > ul > li {
+
#h_menu > ul > li {
   display: inline-block;
   display: inline-block;
   position: relative;
   position: relative;
Line 54: Line 61:
   padding: 0;
   padding: 0;
}
}
-
#cssmenu > ul > #menu-button {
+
#h_menu > ul > #menu-button {
   display: none;
   display: none;
}
}
-
#cssmenu ul li a {
+
#h_menu ul li a {
   display: block;
   display: block;
   font-family: Helvetica, sans-serif;
   font-family: Helvetica, sans-serif;
   text-decoration: none;
   text-decoration: none;
}
}
-
#cssmenu > ul > li > a {
+
#h_menu > ul > li > a {
   font-size: 14px;
   font-size: 14px;
   font-weight: bold;
   font-weight: bold;
Line 74: Line 81:
   transition: color 0.25s ease-out;
   transition: color 0.25s ease-out;
}
}
-
#cssmenu > ul > li.has-sub > a {
+
#h_menu > ul > li.has-sub > a {
   padding-right: 32px;
   padding-right: 32px;
}
}
-
#cssmenu > ul > li:hover > a {
+
#h_menu > ul > li:hover > a {
   color: #ffffff;
   color: #ffffff;
}
}
-
#cssmenu li.has-sub::after {
+
#h_menu li.has-sub::after {
   display: block;
   display: block;
   content: "";
   content: "";
Line 87: Line 94:
   height: 0;
   height: 0;
}
}
-
#cssmenu > ul > li.has-sub::after {
+
#h_menu > ul > li.has-sub::after {
   right: 10px;
   right: 10px;
   top: 20px;
   top: 20px;
Line 93: Line 100:
   border-top-color: #7a8189;
   border-top-color: #7a8189;
}
}
-
#cssmenu > ul > li:hover::after {
+
#h_menu > ul > li:hover::after {
   border-top-color: #ffffff;
   border-top-color: #ffffff;
}
}
Line 127: Line 134:
   z-index: -2;
   z-index: -2;
}
}
-
#cssmenu ul ul {
+
#h_menu ul ul {
   position: absolute;
   position: absolute;
   left: -9999px;
   left: -9999px;
Line 139: Line 146:
   z-index: 1000;
   z-index: 1000;
}
}
-
#cssmenu ul ul ul {
+
#h_menu ul ul ul {
   top: 37px;
   top: 37px;
   padding-left: 5px;
   padding-left: 5px;
}
}
-
#cssmenu ul ul li {
+
#h_menu ul ul li {
   position: relative;
   position: relative;
}
}
-
#cssmenu > ul > li:hover > ul {
+
#h_menu > ul > li:hover > ul {
   left: auto;
   left: auto;
   top: 44px;
   top: 44px;
   opacity: 1;
   opacity: 1;
}
}
-
#cssmenu.align-right > ul > li:hover > ul {
+
#h_menu.align-right > ul > li:hover > ul {
   left: auto;
   left: auto;
   right: 0;
   right: 0;
   opacity: 1;
   opacity: 1;
}
}
-
#cssmenu ul ul li:hover > ul {
+
#h_menu ul ul li:hover > ul {
   left: 170px;
   left: 170px;
   top: 0;
   top: 0;
   opacity: 1;
   opacity: 1;
}
}
-
#cssmenu.align-right ul ul li:hover > ul {
+
#h_menu.align-right ul ul li:hover > ul {
   left: auto;
   left: auto;
   right: 170px;
   right: 170px;
Line 168: Line 175:
   padding-right: 5px;
   padding-right: 5px;
}
}
-
#cssmenu ul ul li a {
+
#h_menu ul ul li a {
   width: 130px;
   width: 130px;
   border-bottom: 1px solid #eeeeee;
   border-bottom: 1px solid #eeeeee;
Line 181: Line 188:
   transition: all .35s ease;
   transition: all .35s ease;
}
}
-
#cssmenu.align-right ul ul li a {
+
#h_menu.align-right ul ul li a {
   text-align: right;
   text-align: right;
}
}
-
#cssmenu ul ul li:hover > a {
+
#h_menu ul ul li:hover > a {
   background: #f2f2f2;
   background: #f2f2f2;
   color: #8c9195;
   color: #8c9195;
}
}
-
#cssmenu ul ul li:last-child > a,
+
#h_menu ul ul li:last-child > a,
-
#cssmenu ul ul li.last > a {
+
#h_menu ul ul li.last > a {
   border-bottom: 0;
   border-bottom: 0;
}
}
-
#cssmenu > ul > li > ul::after {
+
#h_menu > ul > li > ul::after {
   content: '';
   content: '';
   border: 6px solid transparent;
   border: 6px solid transparent;
Line 202: Line 209:
   left: 30px;
   left: 30px;
}
}
-
#cssmenu.align-right > ul > li > ul::after {
+
#h_menu.align-right > ul > li > ul::after {
   left: auto;
   left: auto;
   right: 30px;
   right: 30px;
}
}
-
#cssmenu ul ul li.has-sub::after {
+
#h_menu ul ul li.has-sub::after {
   border: 4px solid transparent;
   border: 4px solid transparent;
   border-left-color: #9ea2a5;
   border-left-color: #9ea2a5;
Line 217: Line 224:
   -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
   -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
}
-
#cssmenu.align-right ul ul li.has-sub::after {
+
#h_menu.align-right ul ul li.has-sub::after {
   border-left-color: transparent;
   border-left-color: transparent;
   border-right-color: #9ea2a5;
   border-right-color: #9ea2a5;
Line 223: Line 230:
   left: 10px;
   left: 10px;
}
}
-
#cssmenu ul ul li.has-sub:hover::after {
+
#h_menu ul ul li.has-sub:hover::after {
   border-left-color: #ffffff;
   border-left-color: #ffffff;
   right: -5px;
   right: -5px;
Line 232: Line 239:
   transform: rotateY(180deg);
   transform: rotateY(180deg);
}
}
-
#cssmenu.align-right ul ul li.has-sub:hover::after {
+
#h_menu.align-right ul ul li.has-sub:hover::after {
   border-right-color: #ffffff;
   border-right-color: #ffffff;
   border-left-color: transparent;
   border-left-color: transparent;
Line 243: Line 250:
}
}
@media all and (max-width: 800px), 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) {
@media all and (max-width: 800px), 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 {
+
   #h_menu {
     width: auto;
     width: auto;
   }
   }
-
   #cssmenu.align-center ul {
+
   #h_menu.align-center ul {
     text-align: left;
     text-align: left;
   }
   }
-
   #cssmenu.align-right > ul > li {
+
   #h_menu.align-right > ul > li {
     float: none;
     float: none;
   }
   }
-
   #cssmenu ul {
+
   #h_menu ul {
     width: auto;
     width: auto;
   }
   }
-
   #cssmenu .submenuArrow,
+
   #h_menu .submenuArrow,
-
   #cssmenu #indicatorContainer {
+
   #h_menu #indicatorContainer {
     display: none;
     display: none;
   }
   }
-
   #cssmenu > ul {
+
   #h_menu > ul {
     height: auto;
     height: auto;
     display: block;
     display: block;
   }
   }
-
   #cssmenu > ul > li {
+
   #h_menu > ul > li {
     float: none;
     float: none;
   }
   }
-
   #cssmenu li,
+
   #h_menu li,
-
   #cssmenu > ul > li {
+
   #h_menu > ul > li {
     display: none;
     display: none;
   }
   }
-
   #cssmenu ul ul,
+
   #h_menu ul ul,
-
   #cssmenu ul ul ul,
+
   #h_menu ul ul ul,
-
   #cssmenu ul > li:hover > ul,
+
   #h_menu ul > li:hover > ul,
-
   #cssmenu ul ul > li:hover > ul,
+
   #h_menu ul ul > li:hover > ul,
-
   #cssmenu.align-right ul ul,
+
   #h_menu.align-right ul ul,
-
   #cssmenu.align-right ul ul ul,
+
   #h_menu.align-right ul ul ul,
-
   #cssmenu.align-right ul > li:hover > ul,
+
   #h_menu.align-right ul > li:hover > ul,
-
   #cssmenu.align-right ul ul > li:hover > ul {
+
   #h_menu.align-right ul ul > li:hover > ul {
     position: relative;
     position: relative;
     left: auto;
     left: auto;
Line 286: Line 293:
     right: auto;
     right: auto;
   }
   }
-
   #cssmenu ul .has-sub::after {
+
   #h_menu ul .has-sub::after {
     display: none;
     display: none;
   }
   }
-
   #cssmenu ul li a {
+
   #h_menu ul li a {
     padding: 12px 20px;
     padding: 12px 20px;
   }
   }
-
   #cssmenu ul ul li a {
+
   #h_menu ul ul li a {
     border: 0;
     border: 0;
     background: none;
     background: none;
Line 298: Line 305:
     padding: 8px 35px;
     padding: 8px 35px;
   }
   }
-
   #cssmenu.align-right ul ul li a {
+
   #h_menu.align-right ul ul li a {
     text-align: left;
     text-align: left;
   }
   }
-
   #cssmenu ul ul li:hover > a {
+
   #h_menu ul ul li:hover > a {
     background: none;
     background: none;
     color: #8c9195;
     color: #8c9195;
   }
   }
-
   #cssmenu ul ul ul a {
+
   #h_menu ul ul ul a {
     padding: 8px 50px;
     padding: 8px 50px;
   }
   }
-
   #cssmenu ul ul ul ul a {
+
   #h_menu ul ul ul ul a {
     padding: 8px 65px;
     padding: 8px 65px;
   }
   }
-
   #cssmenu ul ul ul ul ul a {
+
   #h_menu ul ul ul ul ul a {
     padding: 8px 80px;
     padding: 8px 80px;
   }
   }
-
   #cssmenu ul ul ul ul ul ul a {
+
   #h_menu ul ul ul ul ul ul a {
     padding: 8px 95px;
     padding: 8px 95px;
   }
   }
-
   #cssmenu > ul > #menu-button {
+
   #h_menu > ul > #menu-button {
     display: block;
     display: block;
     cursor: pointer;
     cursor: pointer;
   }
   }
-
   #cssmenu #menu-button > a {
+
   #h_menu #menu-button > a {
     padding: 14px 20px;
     padding: 14px 20px;
   }
   }
-
   #cssmenu ul.open li,
+
   #h_menu ul.open li,
-
   #cssmenu > ul.open > li {
+
   #h_menu > ul.open > li {
     display: block;
     display: block;
   }
   }
-
   #cssmenu > ul.open > li#menu-button > a {
+
   #h_menu > ul.open > li#menu-button > a {
     color: #fff;
     color: #fff;
     border-bottom: 1px solid rgba(150, 150, 150, 0.1);
     border-bottom: 1px solid rgba(150, 150, 150, 0.1);
   }
   }
-
   #cssmenu ul ul::after {
+
   #h_menu ul ul::after {
     display: none;
     display: none;
   }
   }
-
   #cssmenu #menu-button::after {
+
   #h_menu #menu-button::after {
     display: block;
     display: block;
     content: '';
     content: '';
Line 346: Line 353:
     top: 15px;
     top: 15px;
   }
   }
-
   #cssmenu #menu-button::before {
+
   #h_menu #menu-button::before {
     display: block;
     display: block;
     content: '';
     content: '';
Line 356: Line 363:
     top: 25px;
     top: 25px;
   }
   }
-
   #cssmenu ul.open #menu-button::after,
+
   #h_menu ul.open #menu-button::after,
-
   #cssmenu ul.open #menu-button::before {
+
   #h_menu ul.open #menu-button::before {
     border-color: #fff;
     border-color: #fff;
-
  }
+
 
-
}
+
-
</style>
+
-
 
+
</head>
</head>
-
<body>
 
-
<div id='cssmenu'>
+
 
-
<ul>
+
<div class="header_btm">
-
  <li><a href='#'><span>Home</span></a></li>
+
<div class="wrap">
-
  <li class='active has-sub'><a href='#'><span>Products</span></a>
+
<div class="header_sub">
-
      <ul>
+
<div class="h_menu">
-
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
+
<ul>
-
            <ul>
+
<li><a href="https://2014.igem.org/Team:TU_Eindhoven">Home</a></li>
-
              <li><a href='#'><span>Sub Product</span></a></li>
+
<li><a href="https://2014.igem.org/Team:TU_Eindhoven/Team">Team</a></li>
-
              <li class='last'><a href='#'><span>Sub Product</span></a></li>
+
<li><a href="https://2014.igem.org/Team:TU_Eindhoven/Project">Project</a></li>
-
            </ul>
+
<li><a href="https://2014.igem.org/Team:TU_Eindhoven/Notebook">Notebook</a></li>
-
        </li>
+
<li><a href="#">Safety</a></li>
-
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
+
                                <li><a href="https://2014.igem.org/Team:TU_Eindhoven/Sponsors">Sponsors</a></li>
-
            <ul>
+
</ul>
-
              <li><a href='#'><span>Sub Product</span></a></li>
+
</div>
-
              <li class='last'><a href='#'><span>Sub Product</span></a></li>
+
<script type="text/javascript">
-
            </ul>
+
$(".menu,.search").hide();
-
        </li>
+
$("#menu").click(function(){
-
      </ul>
+
$(".menu").toggle();
-
  </li>
+
$(".search").hide();
-
  <li><a href='#'><span>About</span></a></li>
+
$("#search").removeClass("active");
-
  <li class='last'><a href='#'><span>Contact</span></a></li>
+
$("#menu").toggleClass("active");
-
</ul>
+
});
 +
$("#search").click(function(){
 +
$(".search").toggle();
 +
$(".menu").hide();
 +
$("#menu").removeClass("active");
 +
$("#search").toggleClass("active");
 +
$(".text").focus();
 +
});
 +
</script>
 +
<script type="text/javascript" src="https://2014.igem.org/Team:TU_Eindhoven/jquery.script?action=raw&ctype=text/js"></script>
 +
<div class="clear"></div>  
 +
<div class="clear"></div>    
 +
 
 +
<div id="iGEMLOGO" class="grayscale">  
 +
<a href="https://2014.igem.org/Main_Page">
 +
<img src="https://static.igem.org/mediawiki/2014/4/4b/TU_Eindhoven_iGEM_LOGO.jpg" width="65px"></a>
 +
</div>  
 +
 
</div>
</div>
 +
</div>
 +
</div>
 +
-
</body>
 
</html>
</html>

Revision as of 10:16, 4 August 2014

TU Eindhoven iGEM CSS MenuMaker