Difference between revisions of "Template:Team:IngenuityLab Canada"

Line 300: Line 300:
 
border: 1px solid #dddddd;
 
border: 1px solid #dddddd;
 
padding: 0.5em 1em;  
 
padding: 0.5em 1em;  
 +
}
 +
 +
#btn-mobile-menu {
 +
display: none;
 
}
 
}
  
 
/* MEDIA QUERY */
 
/* MEDIA QUERY */
 +
/* 1040 */
 
@media only screen and (max-width: 65em) {
 
@media only screen and (max-width: 65em) {
 
.logo {
 
.logo {
Line 308: Line 313:
 
}
 
}
 
}
 
}
 +
/* 920 */
 
@media only screen and (max-width: 57.5em) {
 
@media only screen and (max-width: 57.5em) {
 
.menu ul {
 
.menu ul {
Line 313: Line 319:
 
}
 
}
 
}
 
}
 +
/* 860 */
 
@media only screen and (max-width: 53.75em) {
 
@media only screen and (max-width: 53.75em) {
 
.article .wrapper {
 
.article .wrapper {
Line 323: Line 330:
 
margin-left: 10px;
 
margin-left: 10px;
 
}
 
}
−
}
 
−
@media only screen and (max-width: 46.875em) {
 
 
.menu ul {
 
.menu ul {
 
width: 75px;
 
width: 75px;
 
}
 
}
 +
}
 +
/* 768 */
 +
@media only screen and (max-width: 48em) {
 +
.logo {
 +
    display: block;
 +
    width: 80%;
 +
}
 +
#btn-mobile-menu {
 +
display: block;
 +
float: right;
 +
clear: right;
 +
}
 +
.menu {
 +
  float: left;
 +
  width: 100%;
 +
  display: none;
 +
}
 +
.menu ul {
 +
  width: 100%;
 +
  float: none;
 +
  height: auto;
 +
  line-height: 2.2em;
 +
}
 +
.menu ul:nth-child(5) {
 +
  width: 100%;
 +
}
 +
.menu ul:hover {
 +
  background-color: #ffffff;
 +
  color: #405e88;
 +
}
 +
.menu ul li {
 +
display: block;
 +
    background-color: #eeeeee;
 +
    width: 100%;
 +
    height: 50px;
 +
}
 +
.menu ul li:last-child {
 +
border-radius: 0;
 +
}
 +
.menu ul li:hover {
 +
    background-color: #eeeeee;
 +
    color: #405e88;
 +
}
 +
.menu ul a:hover {
 +
    color: #405e88;
 +
}
 +
#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;
 
}
 
}
 
</style>
 
</style>
Line 362: Line 427:
 
});
 
});
 
}  
 
}  
 +
 +
// mobile menu on/off
 +
var btnMobileMenu = document.getElementById("btn-mobile-menu");
 +
var mainMenu = document.getElementById("main_menu");
 +
btnMobileMenu.addEventListener("mousedown",function(){
 +
if(mainMenu.style.display === "none"){
 +
mainMenu.style.display = "block";
 +
}else{
 +
mainMenu.style.display = "none";
 +
}
 +
});
 +
window.addEventListener('resize', function(){
 +
if(window.innerWidth < 768){
 +
mainMenu.style.display = "none";
 +
}else{
 +
mainMenu.style.display = "block";
 +
}
 +
}, true);
 
});
 
});
 
</script>
 
</script>

Revision as of 11:40, 19 October 2016

Ingenuity Lab - dNANO