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