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 class="menu"> <a data-sub="#s1" href="#">Try me</a> <a data-sub="#s2" href="#">Try me2</a> </div> <div id="s1" class="submenu"> <p>Submenu 1</p> </div> <div id="s2" class="submenu"> <p>Submenu 2</p> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.menu a { display: inline-block; float: left; padding: 0 10px; } .menu { height: 30px; line-height: 30px; width: 1000px; margin: auto; background-color: #56c5ff; position: relative; } .submenu { position: absolute; display: none; } .submenu { background-color: #56c5ff; }
CSS
Autoformát
CSS reset
Až na konci
$(document).ready(function() { $('.submenu').hide(); $('.menu a').click(function() { var datadrop = $(this).attr('data-sub'); if(datadrop) { $(datadrop).show(); } $('.menu a').mouseleave(function() { $(datadrop).hide(); }); }); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>