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> | ||
- | # | + | #h_menu { |
position: relative; | position: relative; | ||
height: 44px; | height: 44px; | ||
Line 17: | Line 24: | ||
width: auto; | width: auto; | ||
} | } | ||
- | # | + | #h_menu ul { |
list-style: none; | list-style: none; | ||
padding: 0; | padding: 0; | ||
Line 23: | Line 30: | ||
line-height: 1; | line-height: 1; | ||
} | } | ||
- | # | + | #h_menu > ul { |
position: relative; | position: relative; | ||
display: block; | display: block; | ||
Line 30: | Line 37: | ||
z-index: 500; | z-index: 500; | ||
} | } | ||
- | # | + | #h_menu:after, |
- | # | + | #h_menu > ul:after { |
content: "."; | content: "."; | ||
display: block; | display: block; | ||
Line 39: | Line 46: | ||
height: 0; | height: 0; | ||
} | } | ||
- | # | + | #h_menu.align-right > ul > li { |
float: right; | float: right; | ||
} | } | ||
- | # | + | #h_menu.align-center ul { |
text-align: center; | text-align: center; | ||
} | } | ||
- | # | + | #h_menu.align-center ul ul { |
text-align: left; | text-align: left; | ||
} | } | ||
- | # | + | #h_menu > ul > li { |
display: inline-block; | display: inline-block; | ||
position: relative; | position: relative; | ||
Line 54: | Line 61: | ||
padding: 0; | padding: 0; | ||
} | } | ||
- | # | + | #h_menu > ul > #menu-button { |
display: none; | display: none; | ||
} | } | ||
- | # | + | #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; | ||
} | } | ||
- | # | + | #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; | ||
} | } | ||
- | # | + | #h_menu > ul > li.has-sub > a { |
padding-right: 32px; | padding-right: 32px; | ||
} | } | ||
- | # | + | #h_menu > ul > li:hover > a { |
color: #ffffff; | color: #ffffff; | ||
} | } | ||
- | # | + | #h_menu li.has-sub::after { |
display: block; | display: block; | ||
content: ""; | content: ""; | ||
Line 87: | Line 94: | ||
height: 0; | height: 0; | ||
} | } | ||
- | # | + | #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; | ||
} | } | ||
- | # | + | #h_menu > ul > li:hover::after { |
border-top-color: #ffffff; | border-top-color: #ffffff; | ||
} | } | ||
Line 127: | Line 134: | ||
z-index: -2; | z-index: -2; | ||
} | } | ||
- | # | + | #h_menu ul ul { |
position: absolute; | position: absolute; | ||
left: -9999px; | left: -9999px; | ||
Line 139: | Line 146: | ||
z-index: 1000; | z-index: 1000; | ||
} | } | ||
- | # | + | #h_menu ul ul ul { |
top: 37px; | top: 37px; | ||
padding-left: 5px; | padding-left: 5px; | ||
} | } | ||
- | # | + | #h_menu ul ul li { |
position: relative; | position: relative; | ||
} | } | ||
- | # | + | #h_menu > ul > li:hover > ul { |
left: auto; | left: auto; | ||
top: 44px; | top: 44px; | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
- | # | + | #h_menu.align-right > ul > li:hover > ul { |
left: auto; | left: auto; | ||
right: 0; | right: 0; | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
- | # | + | #h_menu ul ul li:hover > ul { |
left: 170px; | left: 170px; | ||
top: 0; | top: 0; | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
- | # | + | #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; | ||
} | } | ||
- | # | + | #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; | ||
} | } | ||
- | # | + | #h_menu.align-right ul ul li a { |
text-align: right; | text-align: right; | ||
} | } | ||
- | # | + | #h_menu ul ul li:hover > a { |
background: #f2f2f2; | background: #f2f2f2; | ||
color: #8c9195; | color: #8c9195; | ||
} | } | ||
- | # | + | #h_menu ul ul li:last-child > a, |
- | # | + | #h_menu ul ul li.last > a { |
border-bottom: 0; | border-bottom: 0; | ||
} | } | ||
- | # | + | #h_menu > ul > li > ul::after { |
content: ''; | content: ''; | ||
border: 6px solid transparent; | border: 6px solid transparent; | ||
Line 202: | Line 209: | ||
left: 30px; | left: 30px; | ||
} | } | ||
- | # | + | #h_menu.align-right > ul > li > ul::after { |
left: auto; | left: auto; | ||
right: 30px; | right: 30px; | ||
} | } | ||
- | # | + | #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; | ||
} | } | ||
- | # | + | #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; | ||
} | } | ||
- | # | + | #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); | ||
} | } | ||
- | # | + | #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) { | ||
- | # | + | #h_menu { |
width: auto; | width: auto; | ||
} | } | ||
- | # | + | #h_menu.align-center ul { |
text-align: left; | text-align: left; | ||
} | } | ||
- | # | + | #h_menu.align-right > ul > li { |
float: none; | float: none; | ||
} | } | ||
- | # | + | #h_menu ul { |
width: auto; | width: auto; | ||
} | } | ||
- | # | + | #h_menu .submenuArrow, |
- | # | + | #h_menu #indicatorContainer { |
display: none; | display: none; | ||
} | } | ||
- | # | + | #h_menu > ul { |
height: auto; | height: auto; | ||
display: block; | display: block; | ||
} | } | ||
- | # | + | #h_menu > ul > li { |
float: none; | float: none; | ||
} | } | ||
- | # | + | #h_menu li, |
- | # | + | #h_menu > ul > li { |
display: none; | display: none; | ||
} | } | ||
- | # | + | #h_menu ul ul, |
- | # | + | #h_menu ul ul ul, |
- | # | + | #h_menu ul > li:hover > ul, |
- | # | + | #h_menu ul ul > li:hover > ul, |
- | # | + | #h_menu.align-right ul ul, |
- | # | + | #h_menu.align-right ul ul ul, |
- | # | + | #h_menu.align-right 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; | ||
} | } | ||
- | # | + | #h_menu ul .has-sub::after { |
display: none; | display: none; | ||
} | } | ||
- | # | + | #h_menu ul li a { |
padding: 12px 20px; | padding: 12px 20px; | ||
} | } | ||
- | # | + | #h_menu ul ul li a { |
border: 0; | border: 0; | ||
background: none; | background: none; | ||
Line 298: | Line 305: | ||
padding: 8px 35px; | padding: 8px 35px; | ||
} | } | ||
- | # | + | #h_menu.align-right ul ul li a { |
text-align: left; | text-align: left; | ||
} | } | ||
- | # | + | #h_menu ul ul li:hover > a { |
background: none; | background: none; | ||
color: #8c9195; | color: #8c9195; | ||
} | } | ||
- | # | + | #h_menu ul ul ul a { |
padding: 8px 50px; | padding: 8px 50px; | ||
} | } | ||
- | # | + | #h_menu ul ul ul ul a { |
padding: 8px 65px; | padding: 8px 65px; | ||
} | } | ||
- | # | + | #h_menu ul ul ul ul ul a { |
padding: 8px 80px; | padding: 8px 80px; | ||
} | } | ||
- | # | + | #h_menu ul ul ul ul ul ul a { |
padding: 8px 95px; | padding: 8px 95px; | ||
} | } | ||
- | # | + | #h_menu > ul > #menu-button { |
display: block; | display: block; | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
- | # | + | #h_menu #menu-button > a { |
padding: 14px 20px; | padding: 14px 20px; | ||
} | } | ||
- | # | + | #h_menu ul.open li, |
- | # | + | #h_menu > ul.open > li { |
display: block; | display: block; | ||
} | } | ||
- | # | + | #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); | ||
} | } | ||
- | # | + | #h_menu ul ul::after { |
display: none; | display: none; | ||
} | } | ||
- | # | + | #h_menu #menu-button::after { |
display: block; | display: block; | ||
content: ''; | content: ''; | ||
Line 346: | Line 353: | ||
top: 15px; | top: 15px; | ||
} | } | ||
- | # | + | #h_menu #menu-button::before { |
display: block; | display: block; | ||
content: ''; | content: ''; | ||
Line 356: | Line 363: | ||
top: 25px; | top: 25px; | ||
} | } | ||
- | # | + | #h_menu ul.open #menu-button::after, |
- | # | + | #h_menu ul.open #menu-button::before { |
border-color: #fff; | border-color: #fff; | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</head> | </head> | ||
- | |||
- | <div | + | |
- | < | + | <div class="header_btm"> |
- | + | <div class="wrap"> | |
- | + | <div class="header_sub"> | |
- | + | <div class="h_menu"> | |
- | + | <ul> | |
- | + | <li><a href="https://2014.igem.org/Team:TU_Eindhoven">Home</a></li> | |
- | + | <li><a href="https://2014.igem.org/Team:TU_Eindhoven/Team">Team</a></li> | |
- | + | <li><a href="https://2014.igem.org/Team:TU_Eindhoven/Project">Project</a></li> | |
- | + | <li><a href="https://2014.igem.org/Team:TU_Eindhoven/Notebook">Notebook</a></li> | |
- | + | <li><a href="#">Safety</a></li> | |
- | + | <li><a href="https://2014.igem.org/Team:TU_Eindhoven/Sponsors">Sponsors</a></li> | |
- | + | </ul> | |
- | + | </div> | |
- | + | <script type="text/javascript"> | |
- | + | $(".menu,.search").hide(); | |
- | + | $("#menu").click(function(){ | |
- | + | $(".menu").toggle(); | |
- | + | $(".search").hide(); | |
- | + | $("#search").removeClass("active"); | |
- | + | $("#menu").toggleClass("active"); | |
- | </ | + | }); |
+ | $("#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> | ||
+ | |||
- | |||
</html> | </html> |
Revision as of 10:16, 4 August 2014