Navigation so anpssen..

[Ripperz]

Moin,
ich möchte gerne meine Navigationsleiste anpassen.
Und zwar möchte ich gerne das so wie hier -> https://www.musterring.com/de-DE/home/

Wenn sich die Level 2 öffnet, das alles außerhalb des Menüs dunkelgrau wird. Ich hab schon viel probiert, aber bekomme kein brauchbares Ergebniss hin.
Kann mir einer helfen?

[JMMB]

Hallo,
das zur Zeit helle Grau versteckt sich in dem Selektor:

@media (min-width: 992px)
.section-wrap.section-wrap--header .navbar-menu .dl-menuwrapper .navbar-collapse#collapseMain ul.navbar-main > li .submenu-wrap .submenu-wrap--area {
    background: #f7f7f7;
    border-left: 10vw solid #f7f7f7;
    border-right: 10vw solid #f7f7f7;
    box-shadow: 50vw 0 0 0 #f7f7f7, -50vw 0 0 0 #f7f7f7;
}

....

Hoffe das hilft schon

[mlweb]

Ich glaube das ist nicht gemeint. Gemeint scheint mir das Abdunkeln der restlichen Seite. Habe aber auf Anhieb leider auch nicht gesehen wie das gelöst ist.

[Nicolas]

In dem Submenu submenu-wrap--area steckt ein leeres span mit der Klasse submenu-pageoverlay.

.section-wrap.section-wrap--header .navbar-menu .dl-menuwrapper .navbar-collapse#collapseMain ul.navbar-main > li .submenu-wrap .submenu-wrap--area > .submenu-pageoverlay {
  position: absolute;
  top: 100%;
  left: -50vw;
  right: -50vw;
  width: auto;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  cursor: default;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s 0s ease;
}

Auf :hover vom Hauptmenüpunkt wird es dann sichtbar:

.section-wrap.section-wrap--header .navbar-menu .dl-menuwrapper .navbar-collapse#collapseMain ul.navbar-main > li:hover > .submenu-wrap .submenu-pageoverlay {
  opacity: 1 !important;
}

[Ripperz]

Ok, und wie wende ich das von der Struktur an, ich habe das standard Template das so aussieht.

<nav>
<ul class="level1">
   <li>
         <ul class="level2">
                   <li></li>
   </li>
<ul>
</nav>

[mlweb]

Du musst Dir das Template so anpassen, dass ein span generiert wird wie Du es benötigst. Das sollte durch das Template nur für die zweite Ebene generiert werden. Danach dann mit css so gestalten wie Du es brauchst.