Jeg har fundet en responsive menu på tutsplus.com, men kunne godt tænke mig at lave en lille tilpasning - en demo kan ses her. Når skærmen er på smartphone størrelse ændres topmenuen til en knap, der hedder "Menu". Hvis brugeren trykker på knappen, kommer der en dropdown menu frem.
Hvordan får jeg "Menu" knappen væk, så dropdown menuen vises, som standard?
Vil skyde på, at det er i filen script.js, jeg skal kigge i, men hvad skal jeg ændre?
onClick bruger man sjællent mere.. Det pæneste er at adskille semantik og logik.. I dette eksempel bliver menuen synlig ved "hover", og på en iPad/iPhone kan det dog virke som om at effekten bliver triggeret af et klik... Følgende kode i jQuery sætter hover effekten:
$(document).ready(function() { $(".toggleMenu").css("display", "none"); $(".nav li").hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); });
Så det du skal er at du skal tilrette dit CSS, så de skjulte elementer er synlige, selvom man ikke hover på parent elementet, dog kun for moble enheder
Forstår i øvrigt slet ikke behovet for brug af Javascript/jQuery - I OS devises kan fint forstå "hover" i ren CSS!? - Men måske Android devises ikke kan?
Yes.. Nogle gange skal man lige stoppe op og læse hvad der bliver skrevet.. Du vil have menuen synlig, uden at man skal trykke på knappen "menu", men man skal stadig trykke på de forskellige menu punkter for at folde undermenuen ud - Korrekt?
I så fald kan du opnå dette ved at udkommentere (fjerne) de to linjer jeg har udkommenteret herunder (linje 3 og 5):
var adjustMenu = function() { if (ww < 768) { //$(".toggleMenu").css("display", "inline-block"); if (!$(".toggleMenu").hasClass("active")) { //$(".nav").hide(); } else { $(".nav").show(); } $(".nav li").unbind('mouseenter mouseleave'); $(".nav li a.parent").unbind('click').bind('click', function(e) { // must be attached to anchor element to prevent bubbling e.preventDefault(); $(this).parent("li").toggleClass("hover"); }); } else if (ww >= 768) { $(".toggleMenu").css("display", "none"); $(".nav").show(); $(".nav li").removeClass("hover"); $(".nav li a").unbind('click'); $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { // must be attached to li so that mouseleave is not triggered when hover over submenu $(this).toggleClass('hover'); }); } }
Her et prof of conept på at det kan laves fint uden brug af Javascript.. (Dog kun eksempel kode) - Virker fint på I OS devices.. Nogle der eb/afkræfte om det virker på Android?
Her et prof of conept på at det kan laves fint uden brug af Javascript.. (Dog kun eksempel kode) - Virker fint på I OS devices.. Nogle der eb/afkræfte om det virker på Android?
http://codepen.io/RasmusKnabe/pen/Hgbza
Ser fint ud og virker efter hensigten :-) (HTC One X, Android 4.1.1, Google Chrome)
Hjemmeside, webshop, vedligeholdelse og support - Toftec sikrer en høj kvalitet på dine webopgaver.
Bliv gratis medlem
Opret bruger