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; | ||
} | } | ||
− | |||
− | |||
.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