Hallo ihr Lieben! Auf die Gefahr hin, dass hier keiner mehr mitliest...
Ich habe auf meiner Seite das Menü als Linkliste konfiguriert und zwar so, dass es bei großen Bildschirmen rechts und links vom Haupttext steht und bei kleinen oben.
Jetzt möchte ich noch ein paar Zusatzlinks angeben, die am Desktop auch an der Seite stehen sollen (ob rechts oder links. wäre zweitrangig), bei schmalen Bildschirmen (Handy) aber unten.
Die einzige Lösung, die ich zustande gebracht habe, ist mit posiion:absolute, was mir nicht so gut gefällt, weil das Bild je nach Zeilenumbruch sehr unterschiedlich wird. Gibt es eine bessere Möglichkeit?
Auch Antworten wie "das würde ich überhaupt alles ganz anders machen" sind willkommen, aber bitte im Rahmen von HTML und CSS.
Hier das Minimalbeispiel:
HTML
Code:
<nav>
<ul class="navi">
<li><span>Hauptmenü</span></li>
</ul>
<ul class="navi2" aria-label="Menüfortsetzung">
<li><span>Nebenmenü</span></li>
</ul>
</nav>
<main>
<div class="Inhalt">
Großes Textfeld mit Haupttext
</div>
<aside>
<ul class="secmenu">
<li><span>Zusatzlinks</span></li>
</ul>
</aside>
</main>
CSS
Code:
.Inhalt {
background-color: yellow;
min-height: 20em;
margin: 0 15%
}
ul.navi,
ul.navi2,
ul.secmenu {
background-color: green; margin:0; padding:0;
}
ul.navi li,
ul.navi2 li,
ul.secmenu li {
list-style: none
}
@media (min-width:55rem) {
ul.navi,
ul.navi2 {
margin-top: 1rem;
width: 15%;
}
ul.navi {
float: left;
}
ul.navi2 {
float: right;
}
ul.secmenu {
position: absolute;
right: 0;
top: 16rem;
width: 10%;
}
}
@media (max-width: 55rem) {
ul.navi,
ul.navi2 {
float: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin-top: .5rem;
}
ul.secmenu {
clear: both;
max-width: 25em;
flex: auto;
margin: 0;
}
}
https://jsfiddle.net/2x1cd5zy/
Lesezeichen