Difference between revisions of "Template:Team:IngenuityLab Canada"
| Line 343: | Line 343: | ||
/* 790 */ | /* 790 */ | ||
@media only screen and (max-width: 49.375em) { | @media only screen and (max-width: 49.375em) { | ||
| − | .logo { | + | .header { |
| − | + | position: relative; | |
| − | + | } | |
| − | } | + | .contents { |
| − | #btn-mobile-menu { | + | margin-top: 0; |
| − | + | } | |
| − | + | .logo { | |
| − | + | display: block; | |
| − | } | + | width: 80%; |
| − | .main-image img { | + | } |
| − | + | #btn-mobile-menu { | |
| − | } | + | display: block; |
| − | .menu { | + | float: right; |
| − | + | clear: right; | |
| − | + | } | |
| − | + | .main-image img { | |
| − | } | + | width: 100%; |
| − | .menu ul { | + | } |
| − | + | .menu { | |
| − | + | float: left; | |
| − | + | width: 100%; | |
| − | + | display: none; | |
| − | + | } | |
| − | } | + | .menu ul { |
| − | .menu ul:nth-child(5) { | + | border-top: 1px solid #cccccc; |
| − | + | width: 100%; | |
| − | } | + | float: none; |
| − | .menu ul:last-child { | + | height: auto; |
| − | + | line-height: 2.5em; | |
| − | + | } | |
| − | } | + | .menu ul:nth-child(5) { |
| − | .menu ul:hover { | + | width: 100%; |
| − | + | } | |
| − | + | .menu ul:last-child { | |
| − | } | + | border-bottom: 1px solid #cccccc; |
| − | .menu ul li { | + | box-shadow: 0 5px 5px rgba(0,0,0,0.3); |
| − | + | } | |
| − | + | .menu ul:hover { | |
| − | + | background-color: #ffffff; | |
| − | + | color: #405e88; | |
| − | + | } | |
| − | } | + | .menu ul li { |
| − | .menu ul li:last-child { | + | border-top: 1px solid #cccccc; |
| − | + | display: block; | |
| − | } | + | background-color: #eeeeee; |
| − | .menu ul li:hover { | + | width: 100%; |
| − | + | height: 50px; | |
| − | + | } | |
| − | } | + | .menu ul li:last-child { |
| − | .menu ul a:hover { | + | border-radius: 0; |
| − | + | } | |
| − | } | + | .menu ul li:hover { |
| − | #btn-mobile-menu { | + | background-color: #eeeeee; |
| − | + | color: #405e88; | |
| − | + | } | |
| − | + | .menu ul a:hover { | |
| − | + | color: #405e88; | |
| − | + | } | |
| − | + | .menu ul:nth-child(4) li:nth-child(3) { | |
| − | + | border-bottom: 1px solid #cccccc; | |
| − | + | } | |
| − | + | #btn-mobile-menu { | |
| − | + | color: #405e88; | |
| − | + | background: #eeeeee none repeat scroll 0 0; | |
| − | + | font-family: 'Titillium Web', Helvetica, Arial, sans-serif; | |
| − | + | font-weight: 600; | |
| + | font-size: 1.2em; | ||
| + | clear: right; | ||
| + | display: block; | ||
| + | float: right; | ||
| + | height: 70px; | ||
| + | line-height: 3.9em; | ||
| + | text-align: center; | ||
| + | width: 16%; | ||
| + | cursor: default; | ||
| + | } | ||
| + | .logo { | ||
| + | margin-left: 2%; | ||
| + | width: 74%; | ||
| + | } | ||
| + | .logo img { | ||
| + | max-width: 250px; | ||
| + | width: 98%; | ||
| + | } | ||
| + | #btn-mobile-menu { | ||
| + | width: 24%; | ||
| + | } | ||
| + | .menu ul { | ||
| + | float: left; | ||
| + | width: 100%; | ||
| + | display: block; | ||
| + | clear: right; | ||
| + | line-height: 2em; | ||
| + | } | ||
| + | .menu ul li { | ||
| + | border-right: 1px solid #cccccc; | ||
| + | box-shadow: none; | ||
| + | float: left; | ||
| + | height: 35px; | ||
| + | width: 50%; | ||
| + | box-sizing: border-box; | ||
| + | } | ||
| + | .menu span, .menu a { | ||
| + | width: 100%; | ||
| + | display: block; | ||
| + | height: 35px; | ||
| + | line-height: 2em; | ||
| + | } | ||
} | } | ||
</style> | </style> | ||
| Line 455: | Line 497: | ||
}); | }); | ||
window.addEventListener('resize', function(){ | window.addEventListener('resize', function(){ | ||
| − | + | console.log("window.innerWidth " + window.innerWidth); | |
| − | + | if(window.innerWidth > 790){ | |
| − | + | ||
mainMenu.style.display = "block"; | mainMenu.style.display = "block"; | ||
| + | btnMobileMenu.style.display = "none"; | ||
| + | }else{ | ||
| + | mainMenu.style.display = "none"; | ||
| + | btnMobileMenu.style.display = "block"; | ||
} | } | ||
}, true); | }, true); | ||
| Line 473: | Line 518: | ||
<div class="menu" id="main_menu"> | <div class="menu" id="main_menu"> | ||
<ul><a href="https://2016.igem.org/Team:IngenuityLab_Canada/dNANO">dNANO</a></ul> | <ul><a href="https://2016.igem.org/Team:IngenuityLab_Canada/dNANO">dNANO</a></ul> | ||
| − | <ul onclick="">Project | + | <ul onclick=""><span>Project</span> |
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Description">Description</a></li> | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Description">Description</a></li> | ||
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Parts">Parts</a></li> | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Parts">Parts</a></li> | ||
| Line 480: | Line 525: | ||
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Attributions">Attributions</a></li> | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Attributions">Attributions</a></li> | ||
</ul> | </ul> | ||
| − | <ul onclick="">Practices | + | <ul onclick=""><span>Practices</span> |
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Collaborations">Collaborations</a></li> | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Collaborations">Collaborations</a></li> | ||
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Practices">Human Practices</a></li> | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Practices">Human Practices</a></li> | ||
</ul> | </ul> | ||
| − | <ul onclick="">Team | + | <ul onclick=""><span>Team</span> |
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Members">Members</a></li> | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Members">Members</a></li> | ||
<li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Sponsors">Sponsors</a></li> | <li><a href="https://2016.igem.org/Team:IngenuityLab_Canada/Sponsors">Sponsors</a></li> | ||
Revision as of 14:02, 19 October 2016
