CSS Horizontales Menü mit mehreren Ebenen

RFB18

Lieutenant
Registriert
Dez. 2021
Beiträge
760
Guten Morgen,

aktuell bin ich dabei für unser Intranet ein paar Änderungen zu implementieren, darunter ein horizontales Menü mit mehreren Eben auf CSS Basis.

Da meine HTML und CSS Kenntnisse eher mau bzw absolut Basic sind, tue ich mir aktuell schwer die übernächste Ebene einzubinden. Ich habe hier mal eine Skizze welche zeigt, was aktuell geht (grün) und was noch hin soll bzw nicht klappt (rot)

Skizze.png

Den Code für das Menü habe ich mir irgendwo im Netz zusammengesucht, aber leider finde ich absolut nichts wenn es um mehrere Ebenen geht. Wenn überhaupt, dann mit Javascript, was nicht verwendet werden soll.

Anbei mal der CSS Code zum aktuellen Menü:

CSS:
*,
*:before,
*:after {
  margin: 10;
  padding: 0;
  box-sizing: border-box;
}
/*Farbe der Links im Menü */
.menu a {
    color:black;
    text-decoration:none;
}
/* Menüleiste */
.menu {
  width: 90%;
  margin: 1% auto 1% auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #333;
  max-width: 1600px;
}
.menu ul li {
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: white;
  display: inline-block;
  padding: 15px;
  position: relative;
}
.menu ul li ul {
  display: none;
}
.menu ul li:hover {
  cursor: pointer;
  background-color: red;
}
/* erster aufklappender Kasten */
.menu ul li:hover ul {
  display: block;
  margin-top: 15px;
  width: 250px;
  left: 0%;
  position: absolute;
}
.menu ul li:hover ul li {
  display: block;
  background-color: red;
}
.menu ul li ul li ul{
  display: none;
}
.menu ul li ul li:hover {
  cursor: pointer;
  background-color: red;
}
/* zweiter aufklappender Kasten */
.menu ul li ul li:hover ul {
  display: block;
  margin-top: 15px;
  width: 250px;
  left: 0%;
  position: absolute;
}
.menu ul li ul li:hover ul li {
  display: block;
  background-color: red;
}
/* "NEU" Infobox in den Untermenüs */
.menu ul li:hover ul li span {
  float: right;
  color: white;
  background-color: black;
  padding: 2px 5px;
  text-align: center;
  font-size: 0.8rem;
  border-radius: 3px;
}
/* Farbe des Kasten über welchen gehovert wird*/
.menu ul li:hover ul li:hover {
  background-color: white;
}

In dieser Konstellation öffnet sich zwar Kasten 4.1, aber unter Kasten 4 mit etwas Abstand:
aktuell.png

Funktioniert mein Vorhaben überhaupt mit reinem CSS?

Vielen Dank euch schon einmal.
 
ja das geht mit CSS, ich glaube die 3. ebene braucht left:100% muß es mir aber mal anschauen, schon lange nicht mehr gemacht.

Edit: weiters wird glaube ich top:0 in der 3. ebene benötigt, da es sonst runtersteht weil position absolute automatisch einfach am unteren rand des vorigen elements steht (hab dein bild nicht wirklich verstanden), Beispiele ergänzt.

Einen Bug hast du noch drin, es muß zumindest immer so lauten: .menu ul li:hover > ul sonst werden alle sub uls gleichzeitig getriggert. das > bedeuted "nur direkt beinhaltete kindelemente"


hast du für mobil ein extra menü das mit klick aufgeht? das ist der grund dafür das reine hover menüs selten geworden sind. Problematisch wirds auch wenn der ganz rechte top level menüpunkt so eine struktur hat, weil dann schieb sich das unter den bildschirmrand raus. das könntest du mit extra CSS für .menu > ul > li:last-child li:hover > ul verändern in die andere richtung.

ist auch nur ein 4-zeiler:

CSS:
.menu > ul > li:last-child li:hover > ul{
  left:auto;
  right:100%;
}
PS: i love CSS ;-)

damit du nicht das ganze CSS in den weiteren Ebenen überschreiben mußt kannst du statt .menu ul li:hover > ul auch .menu > ul > li:hover > ul schreiben.

hier gibts eine beispielumsetzung, die ich auf die schnelle gefunden habe, da sollte alles relevante drin stehen:
http://www.pmob.co.uk/temp/drop-down-multi.htm

Basis
CSS:
.menu ul li{
  display:inline-block;
  position:relative;
}
.menu ul li ul{
  display:none;
}
Relevante teile
CSS:
.menu ul li:hover > ul{
  display:block;
  position:absolute;
}
.menu > ul > li:hover > ul{
  margin-top:15px;
  width:250px;
  left:0;
}
.menu ul li ul li:hover > ul{
  margin-top:10px;
  width:150px;
  left:100%;
  top:0;
}
.menu > ul > li:last-child li:hover > ul{
  left:auto;
  right:100%;
}

ich hab jetzt in dem beispiel die werte der 3. ebene verändert um das zu demonstrieren.
das doppelte aufschreiben entfällt wenn es gleich ist und wird nur oben in der allgemeinen definition eingetragen
CSS:
.menu ul li:hover > ul{
  display:block;
  position:absolute;
  margin-top:15px;
  width:250px;
}
.menu > ul > li:hover > ul{
  left:0;
}
.menu ul li ul li:hover > ul{
  left:100%;
  top:0;
}
.menu > ul > li:last-child li:hover > ul{
  left:auto;
  right:100%;
}

das lässt sich auch noch weiter vereinfachen:
CSS:
.menu ul li:hover > ul{
  display:block;
  position:absolute;
  margin-top:15px;
  width:250px;
  left:100%;
}
.menu > ul > li:hover > ul{
  left:0;
}
.menu ul li ul li:hover > ul{
  top:0;
}
.menu > ul > li:last-child li:hover > ul{
  left:auto;
  right:100%;
}
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: Tolotos und RFB18
Schaue ich mir mal an, danke.

Mobil ist unrelevant, reines Firmen-Intranet für Desktop PCs. Entsprechend wird auch kein Klick benötigt im Menü, wäre ja aber relativ einfach einzubauen wenn notwendig.

Mehr als diese hier gezeigten Ebenen wird es definitiv nicht geben, das ist Maximum. Entsprechend sollte es auch keine Probleme geben mit "aus dem Bild raus".
 
hab nochmal beispiele angefügt ;-)
Ergänzung ()

RFB18 schrieb:
Mehr als diese hier gezeigten Ebenen wird es definitiv nicht geben, das ist Maximum.
Berühmte letzte Worte. das habe ich in den letzten 10 Jahren mehr als 30 Mal gehört und nur in wenigen Fällen ist es eingetroffen. Horizontale Menüs sind diesbezüglich geradezu der Klassiker.

Wenn etwas gut funktioniert, wird es genutzt... was ja nichts schlechtes ist.
Ergänzung ()

Hab noch was gefunden und ergänzt
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: floq0r und RFB18
Ich teste damit mal ein wenig, mal sehen was bei rum kommt :D
 
Jetzt ist natürlich wieder ein anderes Problem entstanden, das Menü muss ja auch auf einer "neuen" Unterseite zu sehen sein. Wie löse ich das am besten? iframe?
 
Wird nicht klappen, ist ne einfache html datei die auf ne stylsheet.css zugreift, mehr basic und schlicht geht gar nicht. Entsprechend bleiben mir nicht viele Möglichkeiten, vermutlich lasse ich weitere Seiten ohne Menü in einem neuem Tab öffnen und man macht es halt wieder zu.
 
Du könntest im Client-Browser das Menü mit JS aus einer html Datei nachladen. Dann geht die Seite nicht mehr ohne JS, das könnte in deinem Fall aber egal sein.
 
Einfach die Navigation in jede Seite einfügen.
 
Zurück
Oben