Hinzufügen von Bild (Tab) unter Pop-up-Navigationsleiste

Question

Hallo ist es möglich, die (Bild) Registerkarte unterhalb der roten Rahmen hinzufügen und immer noch reagieren, wenn der Cursor über die Registerkarte ist.

Was ich versuche zu erreichen ist, so dass der Tab herausragt und wenn die Maus über den Tab schwebt, erscheint das Menü.

Hier ist ein Beispiel, aber mit der Registerkarte unter der Navigationsleiste, wenn Sie den Mauszeiger über oder innerhalb des roten Rahmens bewegen. Das Problem ist, dass die Registerkarte auch ausgeblendet ist.

* { box-sizing: border-box; margin: 0; padding: 0; } 
 
nav { 
 
    position: absolute; 
 
    top: -100px; 
 
    left: 0; 
 
    right: 0; 
 
    height: 110px; 
 
    border: 1px solid red;  
 
    background-image: url("http://static.tumblr.com/e2rgcy1/mWPod8ter/tab.png"); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    -webkit-transition: all 500ms ease-out; 
 
    -moz-transition: all 500ms ease-out; 
 
    -o-transition: all 500ms ease-out; 
 
    transition: all 500ms ease-out; 
 
    z-index: 5; 
 
} 
 
nav:hover, nav.toggleNav { 
 
    top: 0px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #a137a7; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
} 
 
/* Hover color */ 
 

 
li a:hover { 
 
    background-color: #732878; 
 
} 
 
.footer { 
 
    color: #fff; 
 
    clear: both; 
 
    margin: 0em 0em 0em 0em; 
 
    padding: 0.70em 0.75em; 
 
    background: #000; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    top: 490px; 
 
    border-top: 1px solid #000; 
 
    opacity: .7; 
 
}

<nav> 
 

 
    <ul> 
 
    <li> 
 
    <a href="/"a target="_blank"> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" /> 
 
     </a> 
 
    </li> 
 

 
    <li> 
 
     <a href="/" onclick="window.open(this.href, 'mywin', 
 
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" /> 
 
     </a> 
 
    </li> 
 

 

 
    
 

 
    </ul> 
 
</nav>

Answer 1

Dies sollten Sie in die richtige Richtung bekommen. Wenn Sie dies nur mit CSS (kein JavaScript) behandeln möchten und es reaktiv ist, insbesondere wenn sich Ihre Höhe der Navigationsleiste ändert, würde ich Medienabfragen einrichten, die eine feste Höhe für Ihr Navigationsgerät bei jedem der von Ihnen festgelegten Haltepunkte festlegen . Grund für die Verwendung einer festen Höhe ist, dass Sie das Menü jedes Mal auf diese genaue Größe versetzen können.

Ich habe das Tab-Bild in das HTML verschoben, anstatt es als Hintergrundbild zu verwenden. Ich habe bemerkt, dass das Bild eine Menge Leerzeichen hat. Ich würde das Bild abschneiden und entfernen, um Dinge in der css einfacher zu positionieren. Ich habe das nicht geändert, aber wenn Sie das tun, müssen Sie das CSS ein wenig ändern, um die neue Bildgröße unterzubringen. Ich habe es ein bisschen gemutscht, um es zu zentrieren, aber dieser zusätzliche weiße Raum ruiniert irgendwie die Zentrierung. Sie wollen wirklich links: 50%, dann einen negativen Rand der halben Breite des Bildes, um es zu zentrieren.

* { box-sizing: border-box; margin: 0; padding: 0; } 
 
nav { 
 
    position: relative; 
 
    top: -70px; 
 
    left: 0; 
 
    right: 0; 
 
    height: 70px; 
 
    border: none;  
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    -webkit-transition: all 500ms ease-out; 
 
    -moz-transition: all 500ms ease-out; 
 
    -o-transition: all 500ms ease-out; 
 
    transition: all 500ms ease-out; 
 
    z-index: 5; 
 
    padding: 0; 
 
    text-align:center; 
 
} 
 
#img-toggle { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    position:absolute; 
 
    top: -3px; /* fix this when you've trimmed your image */ 
 
    left: 32%; /* fix this when you've trimmed your image */ 
 
    } 
 
nav:hover, nav.toggleNav { 
 
    top: 0px; 
 
} 
 
ul { 
 
    height: 70px; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #a137a7; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
} 
 
/* Hover color */ 
 

 
li a:hover { 
 
    background-color: #732878; 
 
} 
 
.footer { 
 
    color: #fff; 
 
    clear: both; 
 
    margin: 0em 0em 0em 0em; 
 
    padding: 0.70em 0.75em; 
 
    background: #000; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    top: 490px; 
 
    border-top: 1px solid #000; 
 
    opacity: .7; 
 
}

<nav> 
 

 
    <ul> 
 
    <li> 
 
    <a href="/"a target="_blank"> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" /> 
 
     </a> 
 
    </li> 
 

 
    <li> 
 
     <a href="/" onclick="window.open(this.href, 'mywin', 
 
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"> 
 
     <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" /> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
    <img id='img-toggle' src="http://static.tumblr.com/e2rgcy1/mWPod8ter/tab.png"/> 
 
</nav>