Dies ist ein Dropdown-Navigationsmenüeffekt, der das Startmenü von Windows 10 imitiert. Dieses Dropdown-Menü verwendet jQuery und CSS3, um einen ähnlichen Stileffekt wie das Windows 10-Startmenü zu erzielen. Der Code ist prägnant und der Effekt ist sehr stilvoll.
Demo ansehen Quellcode herunterladen
Die HTML-Struktur dieses Dropdown-Menüs ist sehr einfach. Die grundlegende HTML-Struktur ist wie folgt:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id= "top-bar" class = "top-bar" >
<div class = "bar" >
<button id= "navbox-trigger" class = "navbox-trigger" ><i class = "fa fa-lg fa-th" ></i></button>
</div>
<div class = "navbox" >
<div class = "navbox-tiles" >
<a href= "#" class = "tile" >
<div class = "icon" ><i class = "fa fa-home" ></i></div><span class = "title" >Home</span>
</a>
......
</div>
</div>
</div>
|
Nach dem Login kopieren
CSS-Stil
Im CSS-Stil ist die obere Navigationsleiste .top-bar auf eine feste Höhe von 50 Pixel und relative Positionierung eingestellt und erhält einen hohen Z-Index-Wert.
1 2 3 4 5 | .top-bar {
height : 50px ;
position : relative ;
z-index : 1000 ;
}
|
Nach dem Login kopieren
Das Dropdown-Menü.navbox ist zunächst ausgeblendet. Es verwendet die absolute Positionierung und verschiebt es mithilfe der TranslateY-Methode auf 200 Pixel über der Navigationsleiste.
1 2 3 4 5 6 7 8 9 10 11 12 13 | .top-bar .navbox {
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
-webkit-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all .2s;
transition: all .2s;
}
|
Nach dem Login kopieren
Wenn dann das Dropdown-Menü aktiviert wird, wird seine Transparenz auf 1 zurückgesetzt, wird sichtbar und durch die TranslateY-Methode wieder an seine ursprüngliche Position verschoben.
1 2 3 4 5 6 7 8 9 | .top-bar.navbox-open .navbox {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity .3s, -webkit-transform .3s;
transition: opacity .3s, transform .3s;
}
|
Nach dem Login kopieren
JavaScript
In diesem Spezialeffekt wird jQUEry verwendet, um die entsprechende Klasse zu wechseln und die Menüschaltfläche zu öffnen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | ( function () {
$(document).ready( function () {
$( '#navbox-trigger' ).click( function () {
return $( '#top-bar' ).toggleClass( 'navbox-open' );
});
return $(document).on( 'click' , function (e) {
var $target;
$target = $(e.target);
if (!$target.closest( '.navbox' ).length && !$target.closest( '#navbox-trigger' ).length) {
return $( '#top-bar' ).removeClass( 'navbox-open' );
}
});
});
}.call( this ));
|
Nach dem Login kopieren