[DEV] Responsive HeaderBar - NavigationsLeiste oben

[Lehrling]

Wenn ich deine Seite mit dem firefox 33.1.1 öffne, sieht alles so aus wie es aussehen soll. Dieser kleine Versatz tritt bei mir nicht auf.

[Crizzo]

Bei mir weiterhin.

@JS-Lösung:
Die CSS-Variante geht auch ohne JavaScript im Browser.

[HabNurNeFrage]

Hi,

im IE8 funktionieren die Media-Queries nicht. Dafür aber das JavaScript.
3.1 ist im IE8 auch nur bedingt responsiv, ist aber egal, da ebenso praxisfern wie Fenster größer und kleiner ziehen.
Ohne JavaScript wird im Web fast nichts mehr richtig angezeigt oder läuft erst gar nicht, meine Menüersetzung für kleinere Auflösungen auch nicht.
Dann wäre es sogar seltsam, wenn das Menü-Icon eingeblendet, das Menü selbst aber nicht angezeigt würde.

LG

PS: Bleibt der Versatz auch nach dem Drücken von F5?

[Crizzo]

3.1 ist im IE8 auch nur bedingt responsiv, ist aber egal, da ebenso praxisfern wie Fenster größer und kleiner ziehen.

Eigentlich nicht. Denn, ich hab z.B. nur 1920x1080px aufm TFT. Nutze jetzt je nach Platzbedarf vom restlichen Fenster zwischen 40 und 70% der Breite für eine Webseite. Und das eben mit hin und her ziehen. Da ist das bei 3.1 schon sehr geil, dass es sich On-the-fly anpasst.

PS: Bleibt der Versatz auch nach dem Drücken von F5?

Ja. Hab auch mal den Cache geleert.

[HabNurNeFrage]

Hi,

habe nun alle heights, margins und paddings in em angegeben.
Ist der Versatz noch da? Ist der sonst bei irgendwem noch zu sehen?

LG

[Crizzo]

Das ist vollkommen egal. Die "Float"-Elemente <li> und <ul> innerhalb von <div> dehnen ihre Elternelemente nicht in der Höhe aus, weil die äußern z.B. kein Float haben oder du 2.) nicht clearst usw.

[Lehrling]

so sieht es bei mir im firefox 33.1.1 aus:
http://forumstyling.de/Mix/ascraeus.png

[Talk19zehn]

Hi, meine kleine Zwischenfrage lautet: Soll das eine pure horizontale Navigation werden? Also ohne Sub-Menu etc. innerhalb vom Menu und in ein "Hamburger-Icon" fließen, falls die Breite nicht ausreichend ist?
Bringt 3.1.x das nicht schon mit?

LG

Edit: Wenn ja ..., nur eine Idee!

// Anfang Idee

Code: Alles auswählen

		<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
		<div>
			<h3>Ascraeus-Menu</h3>
			<ul class="linklist">
				<li class="leftside small-icon icon-register"><a href="#" title="">Dein Link</a></li>
				<li class="leftside small-icon icon-register"><a href="#" title="">Dein Link</a></li>
				<li class="leftside small-icon icon-register"><a href="#" title="">Dein Link</a></li>
				<li class="leftside small-icon icon-register"><a href="#" title="">Dein Link</a></li>
				<li class="leftside small-icon icon-register"><a href="#" title="">Dein Link</a></li>
				<!-- IF U_ACP -->
				<li class="leftside small-icon icon-acp"><a href="#" title="">AdministratorIn-Link</a></li>
				<!-- ENDIF -->
			</ul>
		</div>
		<!-- ENDIF -->
			<p style="height: 8px;"></p>
				<div style="clear: both"></div>  

Dem Container habe ich keine Klasse zugewiesen, könne man allerdings und auch noch aufhübschen. Anstelle von "leftside" ging auch "rightside" und h3 könnte man in einen Container packen und floaten.
Das Absatzelement schafft Platz. If-Bedingung nur mal so notiert.

Responsiv wird´s selbsttätig, wenn ich richtig geschaut habe.

// Ende Idee

Edit: Meine Güte, nun hat mich auch noch die Rechtschreibprüfung überrumpelt.

[HabNurNeFrage]

Hi.

Man könnte natürlich auch weitere Elemente in die Schnellzugriffsleiste packen, aber ich denke,
dass einige gerne weitere Links zu z.B. CustomPages von der Boardnavigation getrennt haben möchten.

Wenn Du funktionierendes HTML für ein responsives MultilevelMenü hast, immer her damit

LG

[Talk19zehn]

Oh, ich war zu langsam! --> Hm , Mulitlevel? Siehe Schnell-Idee im Edit!