68 besökare, 1 medlem och 2 Studenter är online nu
Loopia

Webdesign och HTML

WDS medlem (WDS member)

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 och Media Query

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 »

 

Responsiv meny med jQuery

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!

WDS medlem (WDS member)

 

Responsiv meny utan jQuery

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!

WDS medlem (WDS member)

 

Responsiv meny med undermenyer

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!

WDS medlem (WDS member)

 

Fler exempel med undermenyer

Exempel 3

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 »

 

Exempel 4

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 »

 

Exempel 5

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 »

 

Exempel 6

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!

WDS medlem (WDS member)

 

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!