Javascriptové menu pro zařízení bez :hover události

MyEgo.cz

home foto blogy mywindows.cz kontakt

Javascriptové menu pro zařízení bez :hover události

Webdesign, CMS 21.02.11

Na webu sterba-kola.cz používáme submenu rozbalující se pomocí běžné onmouseover události, přesněji se binduje mouseenter() pomocí jQuery pro přejetí myši přes element a mouseleave() pro opuštění elementu. Problém jsou ale tablety, obecně zařízení nepodporující ze své koncepce :hover.

Zkusil jsem zde použít "obezličku" pomocí bindování mouseenter() i click() a funguje to.

Takový iPad sice neprovede mouseenter(), ale click() už ano, ostatní zařízení provedou obě události, stačí si tedy v té první poznamenat, že už proběhla, a druhou neprovádět.

Celý kód pro jQuery může vypadat takto (odkaz na .js):

$(document).ready(function(){
    $('#menu > ul > li').mouseenter( function(){
    	noClickProcess = true;
    	var i = parseInt($(this).attr('rel')); 
   		showMenu(i); 
    }).click( function() {
    	if (noClickProcess) return;
    	var i = parseInt($(this).attr('rel'));
    	if (i > 0) {
    		var s = $('#menu'+i+':hidden').size();
    		if (s > 0) showMenu(i); else hideAllMenu();
    	} else hideAllMenu();
    	return false;
    });
	$('#menu').mouseleave( function(){ hideMenu(); });
}); 

Komentáře

  1. 1 Frantisek Hasko 21.02.11, 02:02:03
    FB

    Je to dobré riešenie. Možno by bolo zaujímavé, či by sa ":hover" nedalo spraviť len čistým CSS - napr. kombináciou :active (:focus) a po otvorení menu kliknutím iným prstom na niektorý z odkazov. Samozrejme, záleží na tom, či kliknutie na tablete (teda stlačenie odkazu) sa aktivuje ako mousedown alebo mouseup. Ak to druhe, tak by to bolo celkom reálna alternatíva.

  2. 2 Jindrich Novotny 21.02.11, 09:02:58
    FB

    proc nepouzivate misto attr(rel) funkci .data()?
    http://api.jquery.com/data/

  3. 3 Radek Hulán 21.02.11, 10:02:08
    FB

    [2] a proč ano? Každá věc jde naprogramovat 20 způsoby, které jsou podobně rychlé a stejně "správné".. Programátorsky "čisté" by snad bylo nepoužít ani attr ani data, ale spočítat pořadí LI elementů. Stejně tak místo noClickProcess proměnné by šlo třeba unbindovat click() událost v mouseenter(), nebo to řešit ještě jinak. A vše je přitom správně - tedy bude to fungovat, a to rychle ;)

  4. 4 Jirka Meluzin 22.02.11, 08:02:57
    FB

    Jenom na okraj, nevím, zda to tak používáte, ale osobně jsem docela proti všechno cpát do
    $(document).ready(function(){ ... });

    Obzvlášt na pomalém připojení, pak uživatel musí čekat než se donačte celá stránka, aby s ní mohl začít pracovat. Je samozřejmé, že u některé funkčnosti to nevadí, ba je nutné, ale zrovna třeba pro menu mi to přijde zbytečné.