(4 intermediate revisions by the same user not shown) | |||
Line 63: | Line 63: | ||
} | } | ||
− | + | .menu { | |
list-style-image: none; | list-style-image: none; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/* Button */ | /* Button */ | ||
Line 136: | Line 127: | ||
background-color: rgb(152,193,147); | background-color: rgb(152,193,147); | ||
} | } | ||
− | + | .menu .icon { | |
− | + | display: none; | |
− | + | ||
− | + | ||
− | + | ||
− | display: | + | |
− | + | ||
} | } | ||
@media screen and (max-width: 1000px) { | @media screen and (max-width: 1000px) { | ||
− | .menu a.icon { | + | .menu li{ |
− | + | display: block; | |
− | + | } | |
− | + | ||
+ | .menu li ul li a.icon { | ||
+ | float: right; | ||
+ | display: block; | ||
+ | } | ||
} | } | ||
@media screen and (max-width: 1000px) { | @media screen and (max-width: 1000px) { | ||
− | + | .menu.responsive li {position: relative;} | |
− | + | .menu.responsive li ul li a.icon { | |
− | + | position: absolute; | |
− | + | right: 0; | |
− | + | top: 0; | |
− | + | } | |
− | + | .menu.responsive li a { | |
− | float: none; | + | float: none; |
− | display: block; | + | display: block; |
− | + | text-align: center; | |
− | + | } | |
+ | |||
+ | .menu.responsive li { | ||
+ | float: none; | ||
+ | } | ||
+ | .menu.responsive li ul { | ||
+ | position: relative; | ||
+ | } | ||
+ | .menu.responsive li ul li a{ | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | } | ||
} | } | ||
Line 171: | Line 173: | ||
function myFunction() { | function myFunction() { | ||
var x = document.getElementById("mymenu"); | var x = document.getElementById("mymenu"); | ||
− | if (x.className === "menu") { | + | if (x.className === "menu li") { |
x.className += " responsive"; | x.className += " responsive"; | ||
− | } else { | + | } |
− | x.className = "menu"; | + | else { |
+ | x.className = "menu li"; | ||
} | } | ||
} | } | ||
Line 228: | Line 231: | ||
</div> | </div> | ||
</div> | </div> | ||
− | + | ||
+ | <h1>This is a test case.</h1> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 00:17, 18 October 2018