Responsive Menü Icons und Text bei Mobile, Desktop und Tablet unterschiedlich

[NetBull]

Hi,

arbeite mich gerade in responsive ein.

Würde gerne eine Menüleiste links/rechts einbauen. Diese soll auf dem Desktop mit Text und Icon, auf dem Tablet nur mit Text und auf dem Mobile nur mit Icon geladen werden. Ich finde irgendwie nicht den richtigen Ansatz wie man so etwas löst.

LG NetBu||

 

[Jan-Frederik Stieler]

Hi,
Arbeitest du zufällig mit einem Css-Framework?
Ansonsten solltest du dir Helfer-Klassen erstellen mit denen du Dinge ein- und ausblenden kannst.

Als Beispiel mal die Klassen von Bootstrap:

.visible-xs (less than 768px) visible
.visible-sm Small (up to 768 px) visible
.visible-md Medium (768 px to 991 px) visible
.visible-lg Larger (992 px and above) visible
.hidden-xs Extra small (less than 768px) hidden
.hidden-sm Small (up to 768 px) hidden
.hidden-md Medium (768 px to 991 px) hidden
.hidden-lg Larger (992 px and above) hidden

.visible-xs {
display: none !important;
}

@media (max-width: 767px){

.visible-xs {
display:block !important ;
}

}

Also du musst für jede Variante immer die Situation sichtbar nicht sichtbar im CSS beschreiben.
Das obere Beispiel habe ich mir jetzt aus Bootstrap. Natürlich kannst du das schreiben wie du willst.

Ich hoffe die Vorgehensweise ist klargeworden.

Grüße