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
<title>Menu schované do tlačítka</title> <button class="menu-button" onclick="prepnoutTridu(document.body, 'zobrazit')">≡</button> <h1>Menu schované do tlačítka</h1> <p>Při zmenšení okna pod 480 px se navigace (seznam odkazů) transformuje do tlačítka, které bude seznam zobrazovat/skrývat.</p> <p>Vztahuje se k článku <a href="http://jecas.cz/responsivni-menu">Responsivní menu</a>.</p> <div class="menu"> <menu> <li><a href="#">Odkaz</a></li> <li><a href="#">Odkaz</a></li> <li><a href="#">Odkaz</a></li> <li><a href="#">Odkaz</a></li> </menu> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.menu-button { background: #0D6AB7; border: 0; color: #fff; font-size: 30px; cursor: pointer; display: none; } .menu-button:hover, .menu-button:focus { background: #1081DD; } .zobrazit menu {display: block;} body {position: relative; left: 0; transition: left .2s;} @media screen and (max-width: 480px) { html {overflow-x: hidden} .zobrazit {left: 150px} .menu-button { display: block; } .menu { display: block; position: fixed; left: 0; top: 0; width: 0; overflow: hidden; transition: width .2s; } .zobrazit .menu { width: 150px; } }
CSS
Autoformát
CSS reset
Až na konci
// Přepínání tříd http://jecas.cz/prepinani-trid function prepnoutTridu(element, trida) { if (element.className.match(trida)) { element.className = element.className.replace(trida, ""); } else { element.className += " " + trida; } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>