• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wie macht man eine Navi-Hover-Fläche über die ganze Seite?

marcelgerard

marcelgerard

Mitglied
Hi Leute,

ich beschäftige mich zur Zeit mir dem Thema Navigation. Ich würde gerne eine Navigation erstellen, bei dem die Hover-Fläche (kenne den Fachbegriff nicht so ganz) über die ganze Seite geht. Um es einfacherer zu erklären oder zu zeigen z.B das bekannteste Klatsch-Blatt. Wenn man auf die Navi schaut z.B "Bundesliga" dann öffnet sich die Navigation über die gesamte Fläche der Seite. Ich würde gerne wissen wie das geht, auf was ich achten muss. Bei mir ist z.B auch noch ein Logo links vor der Navigation, dennoch soll darunter die Hover-Fläche entlang gehen. Ist dies möglich und wenn ja wie?

Bei mir startet die Navigation immer an seinem Hauptnavi-Punkt und nicht weiter links davon.

Freue mich, wenn mir jemand helfen könnte oder Tipps hat.

LG Marcel
 
marcelgerard schrieb:
Hi Leute,

ich beschäftige mich zur Zeit mir dem Thema Navigation. Ich würde gerne eine Navigation erstellen, bei dem die Hover-Fläche (kenne den Fachbegriff nicht so ganz) über die ganze Seite geht. Um es einfacherer zu erklären oder zu zeigen z.B das bekannteste Klatsch-Blatt. Wenn man auf die Navi schaut z.B "Bundesliga" dann öffnet sich die Navigation über die gesamte Fläche der Seite. Ich würde gerne wissen wie das geht, auf was ich achten muss. Bei mir ist z.B auch noch ein Logo links vor der Navigation, dennoch soll darunter die Hover-Fläche entlang gehen. Ist dies möglich und wenn ja wie?

Bei mir startet die Navigation immer an seinem Hauptnavi-Punkt und nicht weiter links davon.

Freue mich, wenn mir jemand helfen könnte oder Tipps hat.

LG Marcel
Zum Vergrößern anklicken....

Hatten wir so eine ähnliche Diskussion nicht schon einmal ? :cool:
Das ist genau ein umgekehrtes Fallbeispiel wo du im Container (<li>Bundesliga</li>) auf position:relative verzichtest, damit sich das position:absolute des Child-Elements nicht am direkten Parent ausrichtet, sondern erst an einem weiter übergeordneten Element. In diesem Fall ".main-nav".
Da .main-nav so breit ist wie die Seite, ist auch das Menü so breit.

Lässt sich in den Dev Tools deines Browsers nachvollziehen.

Sehr komisch beschrieben, aber ich geh jetzt baden :D
 
Hmm, bei mir funktioniert das nicht. Im Grunde hab ich es so wie du, aber er dockt nicht an das nächste höhere Element an. Wenn ich das position: relative; wegnehme passiert gar nichts, er bleibt einfach so wie es ist. Ich durchblicke irgendwie die Navigation-Funktion nicht.

Das ist mein html Code:

HTML: 
<header class="nav-top">
    <div class="logo">LOGO</div>
    <nav class="nav-menu">
        <ul>
              <li><a href="#">Dashboard</a></li>
             <li>
                <a href="#">System</a>
                <ul>
                <li><a href="#">Reisen</a></li>
                <li><a href="#">Fotografieren</a></li>
                </ul>
              </li>
              <li><a href="#">Content</a>
                  <ul>
                 <li><a href="#">Reisen</a></li>
                 <li><a href="#">Fotografieren</a></li>
                     </ul>
            </li>
              <li><a href="#">Help</a></li>
             </ul>
    </nav>
</header>

Das ist mein CSS Code dazu:

Code: 
.nav-menu ul {
    list-style-type: none;
    display: flex;
}

.nav-menu ul li {
    position: relative;
}

.nav-menu ul li ul {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
}

.nav-menu ul li:hover ul { display: block; }

.nav-menu li a {
    display: block;
}

So entsteht eine normale Navigation mit zwei Untermenüs. Hat halt noch kein Design in der Schrift, aber funktioniert an sich. Aber was mach ich jetzt, damit es über die ganze Seite geht? Wie gesagt, wenn ich position: relative; wegnehme passiert gar nichts. Ich würde gerne die Seite zeigen, aber die darf nicht öffentlich gezeigt werden.

LG Marcel
 
Neben der Frage, wo genau im HTML-Code position:relative anzuwenden ist, um ein absolut positioniertes Element über die ganze verfügbare Breite darzustellen, fehlen hierfür zusätzlich in deinem CSS die hier gezeigten Zeilen #17 u. #18, damit die Arbeit erfolgreich abgeschlossen wird.
CSS: 
/* CSS-Resets (im Fiddle) */
* {margin:0;padding:0;box-sizing:border-box;}
/* nav / .nav-menu relativ positionieren, Hintergrund visualisiert die Breite */
.nav-menu {position:relative;background:#ccc;}
...
/* im Kontext zum verwendeten display:flex für ul */
.nav-menu ul li {
    /*position: relative;*/ /* gilt für nav */
    flex: 1; /* Breite wird gleichmäßig verteilt */
}
.nav-menu ul li ul {
    display: none;
    position: absolute;
    background-color: #eee; /* anstatt #fff auf weißem Seitenhintergrund (im Fiddle) */
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    left: 0; /* Startposition f. abs. positioniertes Element erforderlich: soll sich auf nav beziehen, ansonsten gilt weiterhin li als "Ausgangspunkt", da unmittelbares Parent von ul */
    width: 100%; /* Breite f. abs. positioniertes Element erforderlich, ansonsten bestimmt Inhalt die Breite, alternativ right: 0; */
}
...


PS: <nav> ist als das erste unmittelbare Elternelement des Navigationsmenü, und dem Kontext entsprechend, von mir für die relative Positionierung frei ausgewählt.

Denkbar wäre in dem gezeigten HTML unter den aktuellen (CSS)Bedingungen aber auch <header>.
Oder direkt das erste/oberste <ul> :D
Eben eines dieser übergeordneten Elemente, die die verfügbare Breite des Viewports komplett ausfüllen...
 
Hi Spicelab,

danke für deine Hilfe, hat bei mir geklappt, jetzt bin ich schon um einiges schlauer. Ich hätte da gleich zu dem Thema die nächste Frage. Ich würde gerne einen kleinen Pfeil über meinen Navipunkt machen. Kann das nicht genau erklären, aber hier mal ein Bild.

testbild.png


Hab schon bei anderen Seiten angeschaut und es versucht nachzumachen, aber scheitert alles. Eine Hilfestellung im Netz konnte ich nicht finden.

LG Marcel
 
Ich bekomme es trotzdem nicht hin, weil die Beispiele alle einem anderen Selektor gemacht wurden. Wenn ich es an meine anpasse passiert gar nichts Was muss ich machen, damit es funktioniert:

HTML Code:

HTML: 
<nav class="nav-menu">
        <ul>
              <li class="top-menu"><a href="#">Dashboard</a></li>
             <li class="top-menu">
                <a href="#">System</a>
                <ul>
                <li class="sub-menu"><a href="#">Reisen</a></li>
                <li class="sub-menu"><a href="#">Fotografieren</a></li>
            <li class="sub-menu"><a href="#">Fotografieren</a></li>
            <li class="sub-menu"><a href="#">Fotografieren</a></li>
                </ul>
              </li>
              <li><a href="#">Content</a>
                  <ul>
                 <li><a href="#">Reisen</a></li>
                 <li><a href="#">Fotografieren</a></li>
                     </ul>
            </li>
              <li><a href="#">Help</a></li>
             </ul>
    </nav>

CSS Code:

Code: 
.nav-menu ul {
    list-style-type: none;
    display: flex;
}

.nav-menu ul li ul {
    display: none;
    position: absolute;
    min-width: 140px;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.nav-menu ul li:hover ul { display: block; }

.top-menu a {
    color: #444;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    padding-right: 25px; 
}

.sub-menu a {
    display: block;
    color: #444;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    padding: 8px 16px 8px;
}

.top-menu a:hover {
    color: #43aee0;
}

.sub-menu a:hover {
    background-color: #f9f9f9;
    color: #444;
}

Irgendwas mache ich falsch. Sorry wenn ich da zu viel Hilfe von euch in Anspruch nehme, ich lerne so immer am besten, wenn ich gute Vorlagen sehe. Aber in meinem Fall klappt das irgendwie nicht. Anscheinend mache ich was bei den Selektoren falsch.

LG Marcel
 
marcelgerard schrieb:
Ich bekomme es trotzdem nicht hin, weil die Beispiele alle einem anderen Selektor gemacht wurden.
Zum Vergrößern anklicken....
Du wirst kaum im Netz ein Beispiel finden, das sich mit deinen Selektoren deckt.
marcelgerard schrieb:
Wenn ich es an meine anpasse passiert gar nichts Was muss ich machen, damit es funktioniert:

Irgendwas mache ich falsch: [...] ich lerne so immer am besten, wenn ich gute Vorlagen sehe
Zum Vergrößern anklicken....
Sind meine beiden Linkempfehlungen nicht ausreichend?

Beide Beispiele nutzen die Pseudoelemente ::before und ::after, von denen in deinem CSS nichts zu sehen ist - zumal der zweite Link das CSS nach deinen Vorgaben generiert.
 
Doch an sich hab ich es verstanden, aber es funktioniert bei mir nicht, weil ich nicht weiß, welches Selektor jetzt eingesetzt werden muss. Ich verstehe das jetzt so, dass ich das bei mir eingeben muss:

Code: 
.nav-menu:after, .nav-menu:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.nav-menu:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 30px;
    margin-left: -30px;
}
.nav-menu:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
}

Denn nav-menu ist bei mir das Hover Pop Fenster was aufgeht, wenn man mit der Maus drüber fährt. Aber funktionieren tut es nicht.
 
marcelgerard schrieb:
Doch an sich hab ich es verstanden, aber es funktioniert bei mir nicht, weil ich nicht weiß, welches Selektor jetzt eingesetzt werden muss. Ich verstehe das jetzt so, dass ich das bei mir eingeben muss:

Code: 
.nav-menu:after, .nav-menu:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.nav-menu:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 30px;
    margin-left: -30px;
}
.nav-menu:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
}

Denn nav-menu ist bei mir das Hover Pop Fenster was aufgeht, wenn man mit der Maus drüber fährt. Aber funktionieren tut es nicht.
Zum Vergrößern anklicken....

Nimm mal hier http://www.cssarrowplease.com den Border weg, dann ist das etwas einfacher zu verstehen.
 
Hab ich mal gemacht und dann auch mal den Selektor geändert:

Code: 
.nav-menu ul li ul:after {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 30px;
    margin-left: -30px;
}

Jetzt wird er angezeigt, sobald ich die anderen Sachen in die CSS zufüge, also das border Zeug, ist er wieder weg.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben