Meny för telefon
Jag håller i mitt gymnasiearbete på att skapa en hemsida med tre olika designer, en för PC, en för surfplatta och en för telefon. Nu har jag fått problem med att skapa den meny som jag vill ha för mobil och surfplatta. Jag vill ha en meny som liknar sen som typ jysk har på sin hemsida (bild ett visar menyknappen högst upp till vänster och bild två visar hur menyn ser ut när man öppnat den) men har ingen aning om hur man gör! Skulle uppskatta hjälp med vilka tekniker man ska använda.
(Till PC versionen har jag en klassisk meny med länkar i en lista, display inline o menyn täcker hela övre kanten)
edit: ändrade en felstavning i rubriken
#1 jag har tyvärr bara lärt mig CSS,javascript(väldigt lite) och HTML och tror att jag bara får använda detta.. Osäker på om vi får använda plugins, hah, har googlat runt lite men inte riktigt hittat det jag söker men ska kolla dina länkar o se om jag kan klura ut det :)
Okej, men kolla in länk två i så fall och se om det är vad du tänkt dig. Det finns förklaringar till koden med där så den borde vara iaf hyfsat lätt att förstå :)
Du kan göra mobilmenyer ganska enkelt med enbart HTML och CSS3. I stora drag gäller följande.
1. Använd CSS3 Media Queries för att dölja standardmenyn och visa mobilmenyn vid en viss pixelbredd på skärmen.
2. CSS-kod för att dölja/visa element är:
visibility: hidden;
visibility: visible;
3. Både mobilmenyn och standardmenyn bör bestå av vanliga listelement som är stylade på önskat sätt i CSS.
- …
4. För att testa hur det fungerar är det bara att dra i webbläsarfönstret och se hur det automatiskt anpassar sig efter mobilformat när bredden blivit tillräckligt liten.
Kolla min sida med tjänster för att bygga gratis hemsida.
#4 bra tips men grejen är väl det att menyn inte ska synas konstant även om man är inne pä mobil sidan, löste det med hjälp av andra länken i #1 och det funkar nu kanon! :)
Det finns ett framework som kallas Bootstrap!
Finns att ladda ner på http://getbootstrap.com/
Där har dom en färdig css fil och det är endast bara att använda sig av class tags..
Kika på det! Riktigt användbart