Hallo,
ich möchte eigentlich etwas machen, von dem ich dachte, dass es eigentlich recht einfach gehen müsste. Es scheint sogar so einfach zu sein, dass es in allen Tutorials oder sonstigem direkt übersprungen wird. Ich hätte gern eine zweizeilige horizontale Navigation, wobei die Unterpunkte von der Seite abhängen, auf der ich gerade bin. Meine Links bekomme ich als Liste:
HTML-Code:
<ul class="level_1">
<li class="active submenu first"><strong class="active submenu first" aria-haspopup="true" itemprop="name">Home</strong>
<ul class="level_2">
<li class="first"><a href="inktober.html" title="Inktober" class="first" itemprop="url"><span itemprop="name">Inktober</span></a></li>
<li><a href="septemeer.html" title="Septemeer" itemprop="url"><span itemprop="name">Septemeer</span></a></li>
<li><a href="fotografie.html" title="Fotografie" itemprop="url"><span itemprop="name">Fotografie</span></a></li>
<li><a href="comics.html" title="Comics" itemprop="url"><span itemprop="name">Comics</span></a></li>
<li><a href="3d-artworks.html" title="3D Artworks" itemprop="url"><span itemprop="name">3D Artworks</span></a></li>
<li class="last"><a href="animation.html" title="Animation" class="last" itemprop="url"><span itemprop="name">Animation</span></a></li>
</ul>
</li>
<li class="sibling"><a href="about.html" title="About" class="sibling" itemprop="url"><span itemprop="name">About</span></a></li>
<li class="sibling last"><a href="blog.html" title="Blog" class="sibling last" itemprop="url"><span itemprop="name">Blog</span></a></li>
</ul>
Es soll jetzt so sein, dass die drei Elemente auf Ebene 1 immer schön verteilt sind und in einer zweiten Zeile dann die Unterpunkte der Home-Seite sind. Es soll also so aussehen, wenn ich auf den Seiten "About" und "Blog" bin:
Code:
| Home || About || Blog |
Das klappt soweit auch. Wenn ich dann auf "Home" bin, soll es so aussehen:
Code:
| Home || About || Blog |
| Element 1 | Element 2 | Element 3 | Element 4 |
Bisher sieht es leider so aus:
Code:
| Home || About || Blog |
| Element 1 | Element 2 | Element 3 | Element 4 |
Meine CSS-Fähigkeiten sind echt eingerostet. Mein bisheriger CSS-Code sieht wie folgt aus:
Code:
#nav-main ul {
font-size: 1.2em;
display: flex;
justify-content: space-around;
flex-direction: row;
padding: 0.4em 1.5em 0.1em 1.5em;
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #f3f3f3;
}
#nav-main a{
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Irgendwie komme ich nicht auf die richtige Idee und wäre über Hilfe sehr glücklich.
EDIT: Meine Idee aktuell ist, die Unterpunkte auf level_2 per "position:absolute" aus dem Textfluss herauszunehmen. Allerdings mag mir auch das noch nicht so wirklich gelingen.
Gruß
Martin
Lesezeichen