Logga in
 |
En meny som anpassas efter den enhet som används för att visa webbplatsen kallas för mobil eller responsive meny. De webbplatser som byggs idag måste vara anpassade för visning i olika enheter som dator, surfplatta och smartphone mm.
Viewport är den synliga del som visas för användaren. Genom att ange vilken Viewport som ska användas så kan du anpassa hur sidinnehållet visas i enhetens synliga yta.
Media query är CSS som används i sidor ska anpassas till den enhet och skärmbredd som används.
Viewport och Media Query används i de responsiva menyerna i exemplen. Läs mer i guiden Responsiv layout »
En responsiv meny som använder jQuery för att visa och dölja menyval på mobila enheter.
Så här kan exemplet se ut i webbläsaren i full bredd:
Så här kan exemplet se ut i webbläsaren med minskad bredd på webbläsarfönstret:
När den responsiva meny-knappen klickas så expanderas menyn:
Du kan se hur exemplet ovan ser ut i olika enheter och olika storlekar på bildskärmar hos Responsinator.com »
Klicka på ikonen nedan för att läsa hela guiden med kod och beskrivningar!
|
De flesta responsiva använder jQuery eller javascript. Det här exemplet visar en responsiv meny som endast använder CSS för att visa och dölja menyval på mobila enheter.
Så här kan exemplet se ut i webbläsaren i full bredd:
Så här kan exemplet se ut i webbläsaren med minskad bredd på webbläsarfönstret:
När den responsiva meny-knappen klickas så expanderas menyn:
Du kan se hur exemplet ovan ser ut i olika enheter och olika storlekar på bildskärmar hos Responsinator.com »
Klicka på ikonen nedan för att läsa hela guiden med kod och beskrivningar!
|
De flesta responsiva menyer, och då särskilt dropdown-menyer med undermenyer, använder jQuery eller javascript. Det här exemplet visar en responsiv meny som endast använder CSS för att visa och dölja menyval på mobila enheter.
Så här kan exemplet se ut i webbläsaren i full bredd:
Så här kan exemplet se ut i webbläsaren med minskad bredd på webbläsarfönstret:
När den responsiva meny-knappen klickas så expanderas menyn:
Du kan se hur exemplet ovan ser ut i olika enheter och olika storlekar på bildskärmar hos Responsinator.com »
Klicka på ikonen nedan för att läsa hela guiden med kod och beskrivningar!
|
Så här kan exemplet se ut i webbläsaren i full bredd:
Så här kan exemplet se ut i webbläsaren med minskad bredd på webbläsarfönstret:
När den responsiva meny-knappen klickas så expanderas menyn:
Du kan se hur exemplet ovan ser ut i olika enheter och olika storlekar på bildskärmar hos Responsinator.com »
Så här kan exemplet se ut i webbläsaren i full bredd:
Så här kan exemplet se ut i webbläsaren med minskad bredd på webbläsarfönstret:
När den responsiva meny-knappen klickas så expanderas menyn:
Du kan se hur exemplet ovan ser ut i olika enheter och olika storlekar på bildskärmar hos Responsinator.com »
Så här kan exemplet se ut i webbläsaren i full bredd:
Så här kan exemplet se ut i webbläsaren med minskad bredd på webbläsarfönstret:
När den responsiva meny-knappen klickas så expanderas menyn:
Du kan se hur exemplet ovan ser ut i olika enheter och olika storlekar på bildskärmar hos Responsinator.com »
Så här kan exemplet se ut i webbläsaren i full bredd:
Så här kan exemplet se ut i webbläsaren med minskad bredd på webbläsarfönstret:
När den responsiva meny-knappen klickas så expanderas menyn:
Du kan se hur exemplet ovan ser ut i olika enheter och olika storlekar på bildskärmar hos Responsinator.com »
Klicka på ikonen nedan för att läsa hela guiden med kod och beskrivningar!
|
OBS! Om du vill du läsa hela guiden måste du vara WDS medlem!
Du kan beställa tjänsten WDS medlem här »
Är du redan WDS medlem?
Klicka på ikonen "WDS medlem" högst upp för att läsa hela guiden!
skriv ut »