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
<div id="menu"> <div class="menu-nazev-web"> <h1>Vývoj menu</h1> </div> <button onclick="prepnoutTridu(this.parentNode, 'zobrazit')">≡</button> <div class="menu-item-web"> <ul> <li><a href="">Home</a></li> <li><a href="">Kontakt</a></li> <li><a onclick="zobrazSkryj('oddil1')">Menu 1 +</a> <ul id="oddil1" class="skryvany"> <li><a href="">Menu Item</a></li> <li><a href="">Enu Item</a></li> <li><a href="">Nu Item</a></li> <li><a href="">U Item</a></li> </ul> </li> <li><a onclick="zobrazSkryj('oddil2')">Menu 2 +</a> <ul id="oddil2" class="skryvany"> <li><a href="">Menu Item</a></li> <li><a href="">Enu Item</a></li> <li><a href="">Nu Item</a></li> <li><a href="">U Item</a></li> </ul> </li> <li><a href="">Administrace</a></li> <li><a href="">odhlásit</a></li> </ul> </div> <div class="clear"></div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
@CHARSET "UTF-8"; * { margin:auto; } .clear { clear:both; } #menu { background: #dddddd; padding:0 30px; } #menu > .menu-nazev-web { float:left; } .menu-nazev-web > h1 { font-size:16px; padding:15px 0; } #menu > .menu-item-web { float:right; } .menu-item-web > ul { list-style-type:none; padding:15px 0; } .menu-item-web > ul > li { list-style-type:none; float:left; } .menu-item-web > ul > li > a { background:#dddddd; color:#535353; text-decoration:none; padding:15px 30px; transition: all 0.7s ease 0s; } .menu-item-web > ul > li > a:hover { background:#999999; color:#dddddd; text-decoration:none; cursor:pointer; } .menu-item-web > ul > li > ul { position:absolute; top:50px; margin:0; padding:0; list-style-type:none; } .menu-item-web > ul > li > ul > li > a { background:#dddddd; color:#535353; margin:1px; padding:10px 20px; display:block; transition: all 0.7s ease 0s; text-decoration:none; } .menu-item-web > ul > li > ul > li > a:hover { background:#999999; color:#dddddd; text-decoration:none; } #menu button { background: #0D6AB7; border: 0; color: #fff; font-size: 30px; cursor: pointer; display: none; width:100%; } #menu button:hover, #menu button:focus { background: #1081DD; } #menu.zobrazit .menu-item-web { display: block; } .skryvany {display: none} /* Media Queries --------------------------------------------- */ @media all and (max-width : 768px) { #menu button { display: block; } #menu { padding:0 0px; } #menu > .menu-nazev-web { float:none; } .menu-nazev-web > h1 { background:#ffffff; padding:35px 0; width:100%; text-align:center; } #menu > .menu-item-web { float:none; } .menu-item-web > ul > li { float:none; width:100%; padding:15px 0px; text-align:center; } .menu-item-web > ul > li > a { border-bottom:1px solid #dddddd; } .menu-item-web > ul > li > a:hover { background:#dddddd; color:#313131; border-bottom:1px solid #999999; } #menu .menu-item-web { display: none; } .menu-item-web > ul > li > ul { position:relative; top:20px; margin:0; padding:0; margin-bottom:20px; list-style-type:none; } .menu-item-web > ul > li > ul > li > a { background:#bbbbbb; color:#535353; margin:0px; padding:10px 20px; display:block; transition: all 0.7s ease 0s; text-decoration:none; } .menu-item-web > ul > li > ul > li > a:hover { background:#999999; color:#dddddd; text-decoration:none; } }
CSS
Autoformát
CSS reset
Až na konci
function prepnoutTridu(element, trida) { if (element.className.match(trida)) { element.className = element.className.replace(trida, ""); } else { element.className += " " + trida; } } function zobrazSkryj(idecko){ el=document.getElementById(idecko).style; el.display=(el.display == 'block')?'none':'block'; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>