SiteVision-bloggen

Publicerat: 2016-10-30

Uppdaterad guide: Fixa en mobilmeny till din responsiva webbplats

Att navigera sig fram i en vanlig webb-meny på mobilen kan vara svårt, men det finns en enkel lösning. En mobilmeny som du kan sätta samman på egen hand. Detta blogginlägg visar dig, steg för steg hur du går tillväga för att lägga ut en mobilanpassad meny på din webbplats.

Med hjälp av några enkla instruktioner och fyra filer kan du lägga till en meny anpassad för responsiva sajter på din webbplats. Det kommer se ut lite som här bredvid, men självklart kan du göra egna förändringar av utseendet om du vill det.

För att ro i land det hela behöver du följande:

  • En responsiv webbplats
  • Behörigheten "Hantera funktioner för utvecklare".
  • Behörighet till mallarna för webbplatsen.
  • Ha laddat ner filerna meny.txtTextfil (textfil, 3.4 kB) och meny.css.
  • Ha bilderna meny.png och pil_ner.png till hands.


1. Ladda upp bilder och lägg till css

Börja med att ladda upp bilderna meny.png och pil_ner.png till bildarkivet. Markera därefter bilderna en och en i bildarkivet för att kopiera id-numren. Spara Spara id-numret i till exempel ett textdokument så du har tillgång till dem senare.

Nu är det dags att gå till grundmallen, där den mobilanpassade menyn ska ligga.

Det är här du ska lägga till CSS-filen. Markera grundmallen, välj Egenskaper. Där under kategorin "Utseende" finns valet CSS-tillägg.

I dialogrutan namnger du ditt tillägg. Exempelvis kan du kalla det för "Meny".

I rutan för källa klickar du på "bläddra"-ikonen till höger för att komma åt filarkivet.

I övre delen av dialogrutan väljer du att växla resurs, och väljer där "Fil"

Här väljer du sedan att ladda upp css-filen "meny.css"

Inställningar för att lägga till CSS-tillägget på mallen kan du därefter lämna orörda, enligt bilden nedan. Du vill inte koppla menyn till någon brytpunkt, eftersom css-filen redan innehåller information om när menyn ska ändras. Klicka ok.

2. Menymodulen

Vi kommer använda oss av modulen Meny och lägga in den kod som finns i filen meny.txtTextfil som egen mall. Leta fram modulen som heter Meny, eller lägg till den om det behövs. Dubbelklicka på den och se till att den är inställd på att visas horisontellt. Gå sedan till sista fliken, som heter "Avancerat". Här bockar du i alternativet "Använd egen mall för horisontell meny".

Öppna filen meny.txtTextfil i en textredigerare på din dator. Kopiera hela koden i filen. Hoppa tillbaka till menymodulen och "Ändra mall". Ta bort all kod som ligger där sedan tidigare och klistra in den nya koden.

3. Ändra id-nummer i mallen

Nu är det dags att peka ut bilderna du redan lagt till i bildarkivet. På rad 17 och 28 i koden vi klistrade in under "Ändra mall" finns två länkar/id-nummer som behöver justeras.

Gå tillbaka till id-numren du sparat, byt därefter ut dem så att de matchar respektive bild. Rad 17 ska du lägga in id-numret för bilden "meny.png", på rad 28 ska du lägga in id-numret för "pil_ner.png".

Klicka ok. Nu kan du testa så att allt fungerar som tänkt. Se till att uppdatera webbläsarfönstret. Glöm inte heller att publicera både huset och mallen.

Vill du göra några ändringar i menyn, som att ändra färger eller byta ut bilderna för pilen och menyn, så går det såklart utmärkt, men då får du lösa det på egen hand.

PS. Bilder och text i menyn är vita, så du kanske behöver lägga en bakgrundsfärg för att allt ska synas. Eller varför inte byta ut bilderna själv?


Inlägget är skrivet av Emma Melkersson. Fler blogginlägg och nyheter från oss:

Vill du ha nyheter, blogginlägg och erbjudanden bekvämt levererade till din e-postadress? Prenumerera på vårt nyhetsbrev inSite! Fyll i din e‑postadress nedan:

Följ SiteVision:

Blogginlägget är skrivet av

  • Supportsamordnare
  • 070-7207524
  • twitter.com/msomiem

Dela inlägget:

Fler blogginlägg: