Elemente ausblenden bei Überstand

HomerX · **HomerX** » 18.05.2014, 12:20 **Elemente ausblenden bei Überstand**

Hallo,

bei einer neuen Website möchte ich ein horizontales Menü einbauen. Das Menü soll aus insgesamt 6 einzelnen Menüpunkten bestehen.

Bei kleinen Geräten wie z.B. Smartphones passen in der Regel jedoch nicht alle 6 Menüpunkte in das Menü. Deshalb würde ich die Menüpunkte die nicht mehr in das Menü passen gerne ausblenden.

Doch wie mache ich das am besten ?

Ich habe keine CSS-Funktion gefunden, mit der man Elemente ausblenden kann, die nicht (oder nur zum Teil) sichtbar sind.

Könnt ihr mir da weiterhelfen ?

Vielen Dank,
MfG HomerX

Aiken · **Aiken** » 18.05.2014, 15:20 **Elemente ausblenden bei Überstand**

overflow: hidden

aber ne responsive loesung waere am besten

HomerX · **HomerX** » 18.05.2014, 19:27 **Elemente ausblenden bei Überstand**

Mit "overflow: hidden;" wird jedoch nur der Überstand ausgeblendet. Ich suche jedoch eine Lösung, die den ganzen Menüpunkt ausblendet, wenn ein Teil des Menüpunktes z.B. über einen Div-Container hinaussteht.

Das ganze soll für ein Responsive Design sein. Wenn das Browserfenster verkleinert wird, dann sollen bestimmte Menüpunkte (alle die keinen Platz mehr haben) ausgeblendet werden.

Ich hoffe ihr versteht was ich meine.

Danke für eure Antworten.

nerd · **nerd** » 19.05.2014, 01:56 **Elemente ausblenden bei Überstand**

Ohje, deine herrangehensweise an das problem ist voellig falsch, und was du machen willst geht mit css auch nicht. Respsonsive heisst NICHT dass du unpassende menus versteckst und unbenutzbar machst, sondern dass du das layout so auf kleine screens anpasst dass es trotzdem noch in vollem umfang benutzbar ist.

Wenn dein menue so gross ist dass es nicht passt und auf handys mehr als 1/2 screen einnimmt, dann solltest du das komplette menu als einziges element auf die deiner startseite/index unterbringen (und vertikal statt horizontal anordnen), und auf allen unterseiten setzt du ganz oben einen link <a href=".">Menu</a>.

Du solltest dir mal die responsive webseiten von grossen anbietern ansehen wie dort die menues strukturiert sind. https://www.bostonglobe.com/ ist z.b sehr gut gemacht wenn es responsive design geht, ich selbst verwende aber immer jquerymobile (einfacher umziusetzen und getesttet auf vielen verschiedenen plattformen).

RK423 · **RK423** » 10.06.2014, 18:07 **Elemente ausblenden bei Überstand**

Z.B. display: inline-block und feste Breite für die Menüpunkte und feste Höhe und overflow: hidden für das Menü, sodass die überzähligen in die zweite Zeile fallen, die jedoch nicht sichtbar ist.

Can · **Can** » 10.06.2014, 18:17 **Elemente ausblenden bei Überstand**

Ausblenden? Also dann gibts ja keine Möglichkeit für den Nutzer auf die Unterseiten zu kommen.

Nimm ein "fertiges" responsive Menü Plugin wie zB.
https://jpanelmenu.com/examples/jrespond/index.html

Einfach mal ausprobieren, zusammenschieben. Schon wird die Menüzeile "zusammengefasst" und bleibt bedienbar.

Ansonsten kann man auch mit CSS an sog. sollbruchstellen arbeiten damit die Menüpunkte untereinander dargestellt werden wenn nicht genug Platz ist. Eine JS Lösung ist aber meistens am sichersten.

Gruß