Dnes jsem nad tím strávil 2h tak snad to někomu pomůže aby nad tím strávil méně času. Můj problém byl ten že jsem se pokoušel to udělat pouze v HTML5.
O kombinaci HTML + CSS jsem nepřemýšlel, teď mi nešlo o to jak by to vypadalo. Za každou cenu jsem se chtěl vyhnout JS.
Docela se mi zalíbila technologie wia-aria, což je technologie pro snadnou přístupnost webových stránek, hlavně pomocí klávesnice. Prohlížel jsem si různé stránky které měli ve svých zdrojácích atributy aria-*, ale nedokázal jsem přijít na to jak to je propojené – možná i proto že jsem se vyhýbal JavaScriptu.
Nakonec ale jak jsem objevil tutorial na Jquery UI, tak jsem se rozhodl že to zkusím s ním. A ono to fungovalo, už na tom webu, proto jsem si stáhl tuto knihovnu a přidal s JQuery do stránky:
<script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.20.js"></script>Pak jsem zkopíroval CSS:
<style type="text/css">
div#parent {
width: 80px;
margin: 10px auto;
padding: 5px;
border: 1px solid #777;
background-color: #fbca93;
text-align: center;
}
div.positionable {
width: 75px;
height: 75px;
position: absolute;
display: block;
right: 0;
bottom: 0;
background-color: #bcd5e6;
text-align: center;
}
select, input {
margin-left: 15px;
}
</style>A poté JavaScript, který jsem trochu upravil, aby pracoval tak že pokud bude na něčem hover, tak se bude zobrazovat podnabídka. Metoda je “univerzální”, to znamená že stačí pouze určit v parametrech metody setDynamicShow určit rodiče a prvek který se má zobrazovat pod ním a metoda se o vše postará:
<script type="text/javascript">
var positionable = ".positionable";
var parent = "#parent";
$(document).ready(function () {
//-Zde muzete volanim metody setDynamicShow nastavit libovolny pocet tlacitek a jinych elementu
setDynamicShow(parent, positionable);
});
function setDynamicShow(parent, positionable) {
$(parent).hover(function () {
$(positionable).show();
});
$(positionable).hover(function () {
$(positionable).show();
});
$(positionable).mouseleave(function () {
$(positionable).hide();
});
$(parent).mouseleave(function () {
$(positionable).hide();
});
$(positionable).css("opacity", 0.5);
$(positionable).hide();
position(parent, positionable);
}
function position(parent, positionable) {
$(positionable).position({
of: $(parent),
my: "right" + " " + "top",
at: "right" + " " + "bottom",
offset: "",
collision: "none" + " " + "none"
});
}
</script>A na závěr ještě snad ten nejjednodušší html kód který může být – a přece to všechno skvěle funguje:
<div>
<p>
Tlacitko
</p>
</div>
<div>
<p>
Podnabidka
</p>
</div>A na úplný závěr jen obrázky jak to u mě funguje:
