Wie kann ich mehrere Reihen nebeneinander erstellen mit CSS?

DamianToczek · 4. Januar 2017

Hallo,
wie im Titel schon geschrieben.
Ich erstelle eine Mobile Webseite und möchte das die Links <a href> in der Navigation in zwei oder mehreren Reihen angezeigt werden. Wie zb hier:

Mein Code sieht zurzeit so aus:

Code:

<div id="myNav" class="overlay">
	<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
	
		<div class="overlay-content">
			<a href="#">About</a>
			<a href="#">Services</a>
			<a href="#">Clients</a>
			<a href="#">Contact</a>
		</div>
	</div>

und CSS

Code:

.overlay-content {
  width: 100%;
  background-color:red; /**Rot ist nur dazu da damit ich die Änderungen sehe :p **/
}

fotoman · 4. Januar 2017

Irgendwie solltest Du mal ein paar Grundlagenbücher/kurse zu HTML/CSS/MySQL und PHP durchlesen.

Für ein horinzontales Menü genügt u.U. eine Menüleiste (also das ganze als Liste mit "display: inline", wozu es hunderte von Beispiel-Toturials im Netz gibt, z.B.
Horizontale Navigation mit CSS erstellen in 7 Schritten | akademie.de

Und wenn es dann irgendwann um den Content der Seite geht und das ganze repsonsive werden soll, bin ich mittlerweile auf Flexboxen umgestiegen anstatt Tabellen oder div-Elemente zu nutzen, die man per CSS dann entsprechend in der Gegend herumschieben muss. Siehe
Creating a Responsive Tiled Photo Gallery with Pure CSS - DWUser.com Education Center
An equal height grid using Flexbox | Clearleft
Responsive grid using flexbox and the justify-content property

DamianToczek · 4. Januar 2017

Edit fiddle - JSFiddle
Ich weiß nicht wieso es im Fiddle nicht geht aber im FTP geht es.
Also wenn man diese 3 Striche oben rechts drückt öffnet sich mein Menu unter dieser Linie wo "JustFAQ.it" steht. (Ist ne border linie keine <hr>)
Wenn sich dieses Menü öffnet wird auch ein "X" angezeigt damit man es wieder schließt.
Ich würde gerne es so machen dass dieses Symbol mit drei Strichen sich in dieses "X" ändert und das Menü schließt.

fotoman · 5. Januar 2017

Und wo ist das Problem, den innerHTML des class="navbutton" beim Öffnen gegen das "X" auszutauschen und beim Schließen wieder gegen den Hamburger-Button?
JavaScript DOM HTML

Außer natürlich, dass es sich an nichts hält, was man sonst gewöhnt ist.

Wenn schon, dann doch gleich sowas:
Hamburger Animated Icon
oder eine der andern Animabtionen:
20 Yummy Hamburger Menu Animations - Hongkiat

ZAM · 5. Januar 2017

Wäre auch eine simple Methode auf der du aufbauen kannst.

PHP:

<div id="myNav" class="navbar">
	<ul>
		<li>
			<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>	
		</li>	
		<li class="navbar-content">
			<a href="#">About</a>
			<a href="#">Services</a>
			<a href="#">Clients</a>
			<a href="#">Contact</a>
		</li>
	</ul>
</div>

<style type="text/css">
.navbar {
	display: table;
}
.navbar > ul {
    display: table-row;
}
.navbar > ul > li {
	display: table-cell;
}
.navbar-content {
  width: 100%;
  background-color:red; /**Rot ist nur dazu da damit ich die Änderungen sehe :p **/
}
</style>

Wie kann ich mehrere Reihen nebeneinander erstellen mit CSS?

DamianToczek

Gesperrt

fotoman

Volt-Modder(in)

DamianToczek

Gesperrt

fotoman

Volt-Modder(in)

ZAM

Inventar

Ähnliche Themen