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> <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"> <button onclick="prepnoutTridu(this.parentNode, 'zobrazit')">≡</button> <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; } .menu.zobrazit menu {display: block;} @media screen and (max-width: 480px) { .menu button { display: block; } .menu menu {display: none;} }
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>