Problem mit Script

[Rolf B]

Hallo thementholist,

du könntest das Folgende machen - aber ich bin noch nicht überzeugt, dass da am Ende eine gute Bedienbarkeit rauskommt. Ein Menü, dass ständig in der Mitte sitzt? Willst Du den Inhalt systematisch drum herumfummeln, so dass das Menü keine Inhalte verdeckt? Aber das ist deine Sache...

1. Einen Container um das nav Element herumlegen. Dem gebe ich die Klasse "beeHive", denn Honig findet man bekanntlich im Bienenstock 🐝🐝🐝. Das Innere des <nav> habe ich jetzt nicht abgeschrieben und durch ... angedeutet.

  <div class="beeHive">
    <nav>
       ...
    </nav>
  </div>

2. Den Bienenstock platzieren wir mit CSS fixed in die Bildschirmmitte:

   .beeHive {
      position: fixed;
      left: calc(50vw - 80px);
      top: calc(50vh - 70px);
   }

calc ist eine CSS Funktion zum Berechnen von CSS Maßen. Das Minus muss von Leerzeichen umgeben sein! calc(50vw - 80px) bedeutet: 50% der Viewportbreite (Anzeigebereich vom Browser) minus 80 Pixel. Der linke Rand des .beeHive ist damit 80px links von der Fenstermitte, und weil das nav.honey 160px breit ist (ohne die hinausgeschobenen Menüpunkte), ist es damit genau horizontal zentriert. Wegen der Höhe von 140px berechnen wir den oberen Rand dementsprechend mit calc(50vh - 70px). Die Größe des beeHive gebe ich nicht an, die ermittelt sich automatisch über den Inhalt. Wenn Du das Menü an einer anderen Stelle haben willst, ändere die Berechnung.

3. Das nav.honey und nav.honey ul ändern wir so:

nav.honey {
	border-bottom: 70px solid #fd4;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	position: relative;
	width: 80px;
}

nav.honey ul {
	list-style-type: none; 
  margin: 0;
  padding: 0;
}

Die nav.honey ul Regel ist bei Dir drin, aber vom nav.honey etwas entfernt. Such sie dir raus und ändere sie, nicht einfach meine Regel hineinkopieren.

Dem ul Element habe ich margin und padding 0 gegeben, weil sonst der Default-Margin des ul das Menü um einige Pixel nach unten schiebt und die Berechnung von top vermasselt.

Und wie gesagt, das Folgende scheint unnötig. Wenn ich es entferne, ändert sich aus meiner Sicht kein Hover-Effekt. Ich bemerke in deinem Pen aber auch keinen Flackereffekt mehr. Keine Ahnung was da passiert.

nav.honey ul.open li {
	z-index: 0;
}

Beachte auch bitte, dass das navi-js so gestrickt ist, dass es alle Klassen, die für nav.honey nötig sind, dynamisch nachlädt. Du musst diese Änderungen also in deiner Kopie von honey-navi.css machen.

Ich hoffe, ich habe nichts vergessen 🤕

Rolf