(5 intermediate revisions by the same user not shown) | |||
Line 63: | Line 63: | ||
} | } | ||
− | + | .menu { | |
list-style-image: none; | list-style-image: none; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/* Button */ | /* Button */ | ||
Line 135: | Line 126: | ||
.menu li ul li a:hover { | .menu li ul li a:hover { | ||
background-color: rgb(152,193,147); | background-color: rgb(152,193,147); | ||
+ | } | ||
+ | .menu .icon { | ||
+ | display: none; | ||
} | } | ||
@media screen and (max-width: 1000px) { | @media screen and (max-width: 1000px) { | ||
− | + | .menu li{ | |
− | display: | + | display: block; |
+ | } | ||
+ | |||
+ | .menu li ul li a.icon { | ||
+ | float: right; | ||
+ | display: block; | ||
} | } | ||
} | } | ||
+ | |||
+ | @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; | ||
+ | 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; | ||
+ | } | ||
+ | } | ||
+ | |||
</style> | </style> | ||
+ | |||
+ | <script> | ||
+ | function myFunction() { | ||
+ | var x = document.getElementById("mymenu"); | ||
+ | if (x.className === "menu li") { | ||
+ | x.className += " responsive"; | ||
+ | } | ||
+ | else { | ||
+ | x.className = "menu li"; | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
</head> | </head> | ||
Line 150: | Line 188: | ||
<div id="burger"></div> | <div id="burger"></div> | ||
<div class="menu_wrapper"> | <div class="menu_wrapper"> | ||
− | <ul class="menu" id=" | + | <ul class="menu" id="mymenu"> |
<li id="team_name"><a href="https://2018.igem.org/Team:ASTWS-China">ASTWS-China</a></li> | <li id="team_name"><a href="https://2018.igem.org/Team:ASTWS-China">ASTWS-China</a></li> | ||
<li><a href="#">Project▾</a> | <li><a href="#">Project▾</a> | ||
Line 188: | Line 226: | ||
<li><a href="https://igem.org/2018_Judging_Form?team=ASTWS-China">Judging Form</a></li> | <li><a href="https://igem.org/2018_Judging_Form?team=ASTWS-China">Judging Form</a></li> | ||
+ | |||
+ | <li><a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a></li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
</div> | </div> | ||
− | + | ||
+ | <h1>This is a test case.</h1> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 00:17, 18 October 2018