Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="stylymobil1.css" /> </head> <body> <div id="wrap"> <div id="menu"> <div href="#" class="hamburger"> <h1>MENU</h1> </div> <ul class="menu"> <a href="#"><li>XXX</li></a> <a href="#"><li>XXX</li></a> <a href="#"><li>XXX</li></a> <a href="#"><li>XXX</li></a> <a href="#"><li>XXX</li></a> </ul> </div> <div id="header"> </div> </div> <div id="section"> </div> <div id="footer"> </div> <script type="text/javascript" src="js/jquery-3.1.1.min.js"> </script> <script type="text/javascript" src="js/jquery.js"> </script> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body{ margin:0 auto; } #wrap{ width:100%; max-width:700px; height:auto; margin:0 auto; } #menu{ max-width:700px; width:100%; height:45px; background-color:black; background-repeat: repeat-x; background-position:center center; float:right; color:white; display:inline-block; text-align:center; z-index:1; } .hamburger{ float:right; display:block; cursor:pointer; margin-top:-20px; } .menu{ height:0px; overflow:hidden; } .open{ height:300px; } .menu li{ max-width:700px; width:100%; list-style-type:none; background-color:black; border-bottom:solid #141414 1px; font-family: Impact, Charcoal, sans-serif; color:white; font-size:25px; } #header{ max-width:700px; width:100%; height:350px; background-repeat: no-repeat; background-position:center center; background-color:purple; border-bottom:solid black 2px; margin:0 auto; text-align:left; } #section{ max-width:700px; width:95%; height:auto; min-height:800px; margin-left:auto; margin-right:auto; margin-top:90px; text-align:center; } #footer{ max-width:700px; width:100%; height:90px; background-color:black; clear:both; color:white; font-family: "Century Gothic", sans-serif; text-align:center; }
CSS
Autoformát
CSS reset
Až na konci
$('.hamburger').on('click', function () { $('.menu').addClass('open'); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>