Teknik, hosting & e-handelsløsninger

Svar: Tilpasse Javascript menu en smule

Rasmus L. Knabe — Tue, 20 Aug 2013 21:32:31 GMT

Takker! :)

Når det kommer til I OS devices er det dog nok i større grad et spørgsmål om hvilke version af operativ systemet man benytter end hvilken model. - Det er muligt den ikke vil virke i ældre versioner af I OS, men tror man skal et par stykker tilbage, og Apple er rigtig gode til at pushe deres brugere til at køre med den nyeste software :)

Svar: Tilpasse Javascript menu en smule

Jens Andersen — Tue, 20 Aug 2013 21:19:31 GMT

Virker også fint på IPhone 4s, selvom det ikke var spørgsmålet.

Svar: Tilpasse Javascript menu en smule

Rasmus L. Knabe — Mon, 19 Aug 2013 12:24:55 GMT

Pilen er et lille billede der bliver indsat to forskellige steder i dit CSS.. Sørg for at det pågældende billede er uploadet til den sti der angives i CSS'et.

Søg i dit CSS på: background-image: url("images/downArrow.png");

- Selv er jeg efterhånden begyndt at lade være med at bruge billeder, og i stedet bruge ikoner via @font-face og CSS pseudo slectors, ":before" og ":after". Det er lettere og hurtigere at arbejde med, og så er det vector grafik så ikonerne kan hurtigt ændres i størrelse og farve, eller vises i høj opløsning på retina skærme :)

icomoon.io har nogle fede ikon sæt men let kan costumizere og downloade :)

Svar: Tilpasse Javascript menu en smule

Anonymous — Mon, 19 Aug 2013 12:11:20 GMT

Rasmus L. Knabe:

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

Mange tak, Rasmus! Jeg har fået det implementeret, og det ser ud til at virke rigtig godt.

Har du et bud på, hvordan jeg får pilene, der peger nedad tilbage ude i højre siden?

Igen - mange tak!

Svar: Tilpasse Javascript menu en smule

Anonymous — Mon, 19 Aug 2013 12:04:20 GMT

Jens Andersen:
Kan man downloade filerne til den menu gratis? På tutsplus

Ja, det er frit at hente på siden.

Svar: Tilpasse Javascript menu en smule

Rasmus L. Knabe — Sun, 18 Aug 2013 17:11:58 GMT

Takker, og i så fald vil jeg da klart lave det uden brug af Javascript.. Specielt når vi taler 48 linjer jQuery.. Det virker som overkill :)

Svar: Tilpasse Javascript menu en smule

Casper Tofte — Sun, 18 Aug 2013 17:08:48 GMT

Rasmus L. Knabe:

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)

Svar: Tilpasse Javascript menu en smule

Rasmus L. Knabe — Sun, 18 Aug 2013 16:58:54 GMT

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

Svar: Tilpasse Javascript menu en smule

Rasmus L. Knabe — Sun, 18 Aug 2013 16:42:02 GMT

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):

Svar: Tilpasse Javascript menu en smule

Rasmus L. Knabe — Sun, 18 Aug 2013 16:33:13 GMT

Sorry.. Jeg var vist lidt hurtigt.. Der er en del mere jQuery ser jeg lige.. Prøver lige at se om jeg kan hitte ud af hvad der sker :)

Svar: Tilpasse Javascript menu en smule

Rasmus L. Knabe — Sun, 18 Aug 2013 16:26:46 GMT

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?

Svar: Tilpasse Javascript menu en smule

Rasmus L. Knabe — Sun, 18 Aug 2013 16:19:27 GMT

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

Svar: Tilpasse Javascript menu en smule

Jens Andersen — Sun, 18 Aug 2013 16:13:56 GMT

Ellers så send mig en mail med koderne, så kan jeg kigge på det i aften og sende det tilbage rettet, hvis jeg finder ud af det.

Jeg har rodet med den slags problemer før, det er meget nemmere når jeg ser koderne i sammenhæng.

Kan man downloade filerne til den menu gratis? På tutsplus

Svar: Tilpasse Javascript menu en smule

Jens Andersen — Sun, 18 Aug 2013 16:11:30 GMT

Det er nok noget onclick der får menuen frem som dropdown. Prøv at ændre onclick til onload.

Det kan være at det er det.

Tilpasse Javascript menu en smule

Anonymous — Sun, 18 Aug 2013 15:00:12 GMT

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?