Menübreite anpassen und Items in Submenü verschieben wenn Breite nicht gegeben

[Purdey]

Hallo ich bin auf der Suche nach einer bestimmen Menüfunktionalität:

Und zwar soll ähnlich dem PHPMYADMIN Menü das Menü solange horizontal dargestellt werden wie die Elemente in der Auflösung darstellbar sind, ist dies durch Verkleinerung des Fensters oder der Auflösung nicht mehr gegeben so sollten die später nicht sichtbaren Menüpunkte ins Dropdown wandern.

Anbei zwei Beispiele:






Ich hoffe Ihr könnt mir helfen.

 

[Carrear]

Erkundige dich mal zum Thema Responsive Designs und Media Queries, ich denke da liegt die Lösung. Du kannst je nach Ausgabebreite in Pixeln unterschiedliche CSS Angaben für Elemente festelegen.

 

[Purdey]

Ja soweit ist mir das bewusst nur die Frage ist wie lasse ich die elemente in ein submenü (dropdown) springen wie abgebildet.

 

[Carrear]

ja wie gesagt media queries und dann die darstellung der liste ändern

 

[Purdey]

ich kann mir aber nicht vorstellen wie das gehen soll wird die Liste dann in der Menge einfach beschnitten? weil ich kann ja nach 3 Einträgen abschneiden aber

3 Einträge können kurz oder lang seien

a | b | c

sein aber auch

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa | bbbbbbbbbbbbbbbbbbbbbbbbbbb | ccccccccccccccccccccccccc

Weißt du worauf ich hinaus will?

 

[Carrear]

Ahja, jetzt verstehe ich erst richtig was du willst. Es sah in so klein aus wie ein Untermenü. Ich hätte da ne Idee.

Du könntest deinen einzelnen Menüelementen Klassen zuweisen. Darüber könntest du dann die Breite mit JS auslesen und addieren und dann nach und nach angeben, ab welcher Pixelbreite des umgebenden Containers jeder einzelne Menüpunkt in dem normalen Menü auf display none und im Dropdown auf Display: block gestellt wird. Verstehste?

 

[Purdey]

Ah sorry da habe ich mich wohl bissl schwierig ausgedrückt.

Grob verstanden habe ich es.

Kannst du vielleicht ein kleines Beispiel geben?

 

[Carrear]

Schematisch gerne.

<menuecontainer>
	<hauptmenü>
		<Elementeins />
		<Elementzwei/>
		<Elementdrei/>
	</hauptmenü>
	<dropdownmenü>
		<Elementeins />
		<Elementzwei/>
		<Elementdrei/>
	</dropdownmenü>
</menuecontainer>

variable breiteElementeins = breite(Elementeins);
variable breiteElementzwei = breite(Elementzwei);
variable breiteElementdrei = breite(Elementdrei);

function Menüresize{
	if(breite(Menuecontainer) < breiteElementeins + breiteElementzwei + breiteElementdrei) {
		hauptmenü>Elementdrei.css('display','none');
		dropdownmenü>Elementdrei.css('display','block');
	}
	
	if(breite(Menuecontainer) < breiteElementeins + breiteElementzwei) {
		hauptmenü>Elementzwei.css('display','none');
		dropdownmenü>Elementzwei.css('display','block');
	}
	
	if(breite(Menuecontainer) < breiteElementeins ) {
		hauptmenü>Elementeins.css('display','none');
		dropdownmenü>Elementeins.css('display','block');
	}
}

beiLadendesFensters(Menüresize);
beiResizeDesFensters(Menüresize);

 

[Purdey]

Vielen Dank und das müsste ich dann wohl für i elemente machen, da ich ja die anzahl nicht kenne?

 

[Carrear]

Naja wenn die Anzahl mittelfristig variabel ist, dann müsstest du die Elemente einfach vorher zählen und es für i elemente mit einer schleife machen achso und wenn es bei vergrößern des Fensters auch wieder andersrum laufen soll müssten die einzelnen if schleifen so aussehen denke ich:

    if(breite(Menuecontainer) < breiteElementeins + breiteElementzwei + breiteElementdrei) {
        hauptmenü>Elementdrei.css('display','none');
        dropdownmenü>Elementdrei.css('display','block');
    } elseif(breite(Menuecontainer) >= breiteElementeins + breiteElementzwei + breiteElementdrei) {
        hauptmenü>Elementdrei.css('display','block');
        dropdownmenü>Elementdrei.css('display','none');
    }