Simples CSS-Menü mit darüberliegendem Logo in der Mitte

MSX · 20 Aug. 2014

Ich hock hier an einer ansich extra simpel zu gestaltenden Seite und dem Problem, dass ich nicht weiß, wie ich ein Menü umsetzen soll. Vielleicht erst zur Übersicht ein Bild, weil das die Sache am besten erklärt:

Menü und Logo haben die gleiche Hintergrundsfarbe, wodurch man also vielleicht tricksen könnte. Ich hatte probiert, das Logo in die Liste mit reinzunehmen und als Link zur Startseite zu deklarieren, aber dann ist es nicht mittig und ich bekomms auch nicht so hin, dass es oben und unten übersteht. Das nächste Problem wäre, dass ich die Seite natürlich "reponsive" (oh, wie ich diesen Buzzwordkram hasse) haben möchte und dann sollte das Logo über dem Menü bleiben und das Menü selbst sich darunter befinden. Dabei sollten die einzelnen Menüpunkte alle gleich breit bleiben. Auch soll natürlich beachtet werden, dass beim Skalieren der Schrift, der Menübalken mittig vom Logo bleiben sollte.

Nun hab ich selbstverständlich ewig lang rumgesucht und rumgebastelt, aber es will einfach nicht. Drum hier auch kein Quelltext, weils eh nicht funktioniert und wohl der komplett falsche Ansatz ist. Und wie ne Liste aussieht, weiß hier jeder.

Ganz großes Kino wären noch Dropdown-Menüs, so wie da: http://codepen.io/micahgodbolt/full/mnLiF
Es würde aber notfalls auch sowas hier reichen: http://rutgerkooijman.nl/navigation/html/

Hat hier jemand einen Denkansatz, Link, oder einen Schnipsel Quelltext für mich? - Javascript soll nicht benutzt werden. Ich will das gern schön rein und sauber haben.

Edit: Ach ja: Ich hatte auch probiert, zwei Menülisten links und rechts neben das Logo zu stellen, aber dann weiß ich nicht, wie ich die dazu bringe, dass sie bis zum Rand gehen. Und das mit der Mittigkeit wäre wieder ein Problem, mal davon abgesehen, dass auf einem Handy dann eben das Logo nicht mehr oben stünde.

gelöschter Benutzer · 21 Aug. 2014

ultra quick & dirty, nur um dir ne Idee zu geben:

[src=html5]<html>
<head>
<title>simples Menü mit Logo in der Mitte</title>
</head>
<body>
<header>
<div class="img-header"></div>
<nav class="nav-header">
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
<div class="logo-header">Logo</div>
<ul>
<li>Link3</li>
<li>Link4</li>
</ul>
</nav>
</header>
<article class="main">
<h1>Rest der Seite</h1>
<p>bla bla lorem ipsum</p>
</article>
<style>
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
}
header, .main {
width: 60em;
margin: 0 auto;
background: #ffffaa;
height: 10em;
}
.main {
background: #aaaaff;
margin-top: -2em;
}
.img-header {
width: 100%;
height: 8em;
background: #ffaaff;
z-index: -10;
}
.nav-header {
height: 5em;
z-index: 90;
position: relative;
top: -1em;
}
.nav-header > ul {
width: 44%;
float:left;
background: #aaffaa;
}
nav > .logo-header {
width: 12%;
height: 100%;
float:left;
background: #ffaaaa;
}
</style>
</body>
</html>
[/src]

Was funktioniert an der Float-Lösung mit 3 Containern bei dir nicht?

EDIT: geht natürlich auch als eine Liste, musst dann nur innerhalb Klassen setzen und die entsprechend anpassen. Ist wohl auch sauberer ;-)

Kugelfisch · 21 Aug. 2014

phre4k, das Problem des Float-Ansatzes ist, dass er nur dann funktioniert, wenn dem Logo eine width-Eigenschaft in Prozent zugewiesen werden kann. Bei einer Pixelgrafik könnte das problematisch sein. Wenn das Logo fixe Proportionen (in Pixeln) haben soll, wäre die Verwendung von absoluter Positionierung in Verbindung mit Margins für die beiden Menü-Teile eine Alternative. In diesem Fall kann das Logo auch das erste Unterelement des nav-Elements sein, was die gewünschte Anpassung für schmale Viewports (Logo über dem Menü) vereinfacht. Zum Beispiel:

HTML:

<!DOCTYPE html>
<html>
<head>
<title>42</title>
<style type="text/css">
.menu {
	background: blue;
	height: 2em;
	position: relative;
}
.menu ul li {
	padding: 0;
	background: yellow;
	display: table-cell;
	text-align: center;
}
.menu ul li:hover {
	background: white;
}
.menu ul li a {
	padding: 5px;
	display: block;
}
.menu ul {
	margin: 0;
	padding: 0;
	display: table;
	table-layout: fixed;
	width: 100%;
}
.menu div {
	position: absolute;
}
.menu .menu_left {
	left: 0;
	right: 50%;
	margin-right: 110px;
}
.menu .menu_right {
	margin-left: 110px;
	right: 0;
	left: 50%;
}
.menu img {
	position: absolute;
	left: 50%;
	margin-left: -110px;
	background: black;
	top: -50%;
}

@media screen and (max-width: 500px){
	.menu img {
		position: static;
		display: block;
		margin: 0 auto;
	}
	.menu .menu_left, .menu .menu_right {
		position: static;
		margin: 0;
	}
	.menu {
		height: auto;
	}
}

.header {
	height: 200px;
	background: orange;
}
</style>
</head>
<body>
<div class="header"></div>
<nav class="menu">
	<img src="https://ngb.to/ngb_assets/ngb_logo.png" alt="Foo">
	<div class="menu_left">
	<ul>
		<li><a href="#">Foo 1</a></li>
		<li><a href="#">Foo 2</a></li>
		<li><a href="#">Foo 3</a></li>
	</ul>
	</div>
	<div class="menu_right">
	<ul>
		<li><a href="#">Bar 1</a></li>
		<li><a href="#">Bar 2</a></li>
		<li><a href="#">Bar 3</a></li>
	</ul>
	</div>
</nav>
</body>
</html>

Der Nachteil dieses Ansatzes ist, dass die Höhe des nav-Elements im Stylesheet festgelegt werden muss, da das Element ausschliesslich absolut positionierte Unterelemente enthält und sie deshalb zu 0 kollabieren würde - dazu lässt sich allerdings eine relative Einheit wie z.B. [kw]em[/kw] oder [kw]ex[/kw] nutzen. Ausserdem müssen die Pixel-Dimensionen des Logos bekannt sein und im Stylesheet verankert werden, was etwas unschön ist.

Ausserdem gilt natürlich zu beachten, dass das Logo auch in den Inhaltsbereich unterhalb der Navigationsleiste hineinragt und ggf. Inhalte überdeckt.

epiphora · 21 Aug. 2014

Die Lösung vom Kugelfisch halte ich ebenfalls für ideal. Falls Du in der Navigation so lange Linkbeschriftungen nutzt, dass sie sich bei schmalen Viewport überschneiden:

... dann könntest Du auch noch folgende Regeln einführen, sodass die Wörter automatisch abgekürzt werden:

[src=css].menu ul li a {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}[/src]

Alternativ setzt Du den Schwellwert für den Wechsel zur zweizeiligen Navigation einfach schon früher.

MSX · 21 Aug. 2014

Vielen Dank euch schon mal! Ich bastel da heute mal ein wenig dran herum und melde mich dann wohl morgen im Verlauf des Tages mit Ergebnissen.

Das von epiphora angesprochene Problem stellt sich in der Tat. Mir ist auch nicht ganz klar, ab wann ich auflösungsbedingte Breakpoints setzen sollte, da es ja so viele verschiedene Auflösungen bei den unterschiedlichsten Endgeräten gibt. So müsste ich also wirklich mit der von ihm vorgeschlagenen Regel arbeiten, was ich aber nicht sonderlich schön fände. Mir wäre es lieber, wenn die einzelnen Menüpunkte alle gleich viel Platz haben, nicht gekürzt werden und bei einer zu kleinen Auflösung dann halt eine zweizeilige Navigation rauskommt.

Insgesamt sieht mir das aber nach einer Menge Getrickse aus und ich bin gerade ernsthaft am Überlegen, ob ich nicht doch lieber auf eine absolut sichere Variante umsteigen sollte, indem ich das Logo schlicht übers Menü lege. Sieht dann zwar nicht mehr wie gewünscht aus, aber ist dafür halt deutlich sicherer, was die Anzeige angeht. Aber erstmal versuche ich mich noch an den bisherigen Ansätzen.

Kugelfisch · 21 Aug. 2014

MSX schrieb:
Insgesamt sieht mir das aber nach einer Menge Getrickse aus und ich bin gerade ernsthaft am Überlegen, ob ich nicht doch lieber auf eine absolut sichere Variante umsteigen sollte, indem ich das Logo schlicht übers Menü lege. Sieht dann zwar nicht mehr wie gewünscht aus, aber ist dafür halt deutlich sicherer, was die Anzeige angeht.

Ein Teil der Regeln - insbesondere die Darstellung der ul-Elemente mit display:table (mit table-layout:fixed) und der li-Elemente als display:table-cell - dient bloss dazu, sicherzustellen, dass die Menüpunkte alle dieselbe Breite aufweisen, d.h. sich die zur Verfügung stehende Breite gleichmässig teilen - daher wirkt das Konstrukt möglicherweise komplexer als es ist. Benötigst du dieses Verhalten nicht, kannst du die entsprechenden Definitionen natürlich entfernen und die Breite anderweitig festlegen.

Das grundsätzliche Problem in deinem Fall ist, dass du für die gewünschte Darstellung Breiten in Prozent (die Menüleiste soll insgesamt 100% der Breite des Viewports einnehmen) und Breiten in Pixel (die intrinsische Breite des Logos) mischen musst. Da in CSS 2.1 keine Möglichkeit vorgesehen ist, um Ausdrücke wie z.B. `50%-110px` auszuwerten, musst du dazu Positionierung und Aussenabstände kombinieren, da diese Werte am Ende addiert werden. Erst in CSS Level 3 Units and Values wird mit calc()-Ausdrücke eine Möglichkeit geschaffen, auch Längenangaben in verschiedenen Einheiten dynamisch zu kombinieren vgl. http://www.w3.org/TR/css3-values/#calc-notation.

Dass bei Unterscheiten einer gewissen Viewport-Mindestbreite Unschönheiten durch overflows auftreten, ist eine Folge der eingangs erwähnten Tabellen-Darstellung, die für die gleichmässige Aufteilung der Breite zwischen den Menüpunkten sogt, und nicht direkt eine Folge der absoluten Positionierung. Das lässt sich bei diesem Ansatz nur dadurch vermeiden, dass eine Mindestbreite für das übergeordnete Element festgelegt wird.

In deinem Fall würde sich meines Erachtens im Sinne eines Responsive-Designs anbieten, drei Ansichten vorzusehen: die von dir ursprünglich gewünschte Möglichkeit mit dem mittigen Logo in der Navigationsleiste für breite Viewports (Breite > ~1000px), eine Ansicht, bei der sich das Logo oberhalb einer einzigen Menüleiste befindet, die dann die gesamte Breite nutzen kann für Viewports mittlerer Breite (Breite > ~500px) und für schmale Viewports die ursprünglich vorgeschlagene Version, bei welcher die beiden Teile der Menüleiste untereinander platziert werden.

MSX · 21 Aug. 2014

Ich geb zu, es sieht unnötig komplex aus, aber das hätte ich vorrangig auf meine mittlerweile fehlende Übung geschoben. Gleichgroße Breiten sollte es ansich schon haben. Zumindest finde ich es deutlich schöner. Den Kunden dagegen würde das nicht interessieren.

Warum nicht schon vor Jahren eine Möglichkeit des Berechnens von Abständen etc. eingeführt wurde, erschloss sich mir noch nie. Das halte ich für eine rudimentäre Sache aus jedem Blickwinkel auf HTML [*] und den Sinn dahinter. Merci für den Link. Schön, dass das immerhin nun irgendwann mal kommen soll.

Vielen Dank auch für den Hinweis bezüglich Overflows. Dann mal sehen, ob ich da doch noch etwas tun kann. Und noch mehr Dank für den Vorschlag bezüglich Breakpoints! Das klingt nach einer wirklich sinnvollen Aufteilung und sollte auch noch ohne großen Aufwand umsetzbar sein, da die Seite ansich wie gesagt insegesamt sehr simpel aufgebaut ist.

Ansich wäre es auch nicht dramatisch, wenn ein paar User eine fehlerhafte Seite zu sehen bekämen, aber das auch wieder nur aus Kundensicht. Ich persönlich halte da gar nichts davon und bin gerade bei einer solch einfachen Seite aus Prinzip dagegen, zu pfuschen. Das kann auch einfach nicht sein, denk ich mir halt.

[*] Edit: Bzw. CSS.

Simples CSS-Menü mit darüberliegendem Logo in der Mitte

MSX

Retro-Nerd-Hippie

gelöschter Benutzer

Guest

Kugelfisch

Nerd

epiphora

aus Plastik

MSX

Retro-Nerd-Hippie

Kugelfisch

Nerd

MSX

Retro-Nerd-Hippie