Seitenmenüs werden häufig beim Website-Design verwendet und diese Art von Menü ist auf vielen Websites zu sehen. Es kann wichtige Informationen anzeigen, sie lesbarer und schöner machen und den Wert der Benutzererfahrung erfüllen!
Heute zeige ich Ihnen, wie Sie mit JQuery und CSS ein seitliches Schiebemenü implementieren.
Effektanzeige Quellcode-Download
Um Erstellen Sie ein Navigationsmenü. Schauen wir uns zunächst die HTML-Struktur an:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Animation Menu Demo</title> <link rel="stylesheet" href=" <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <link rel="stylesheet" href=" <script src=" </script> <script src="script.js"> </script> <link rel="stylesheet" href="style.css"> </head><body> <!-- Content goes here --> </body> </html>
Um dies sicherzustellen, verweisen wir zunächst auf normalize.css als Standardstil Unser Menü wird in jedem Browser angezeigt. Das Gerät ist das gleiche. Wir verwenden das Schriftartensymbol „Fontawesome“, um das Menüpunkt-Down-Symbol anzuzeigen. Wir müssen auch auf jQuery verweisen, um die Menüumschaltung zu implementieren.
Panel-Schaltflächen
Jede Website-Panel-Navigationsschaltfläche ist ähnlich. Oft handelt es sich um eine Symbolschriftart wie „fontagwesome“, aber in diesem Tutorial möchte ich etwas Animation hinzufügen, also machen wir das mit horizontalen Linien. Im Grunde ist unsere Schaltfläche ein Bereich mit drei Divs, die als horizontale Linien angezeigt werden. Der
<span class="toggle-button"> <div class="menu-bar menu-bar-top"></div> <div class="menu-bar menu-bar-middle"></div> <div class="menu-bar menu-bar-bottom"></div> </span>
-Stil sieht folgendermaßen aus:
.toggle-button {
position: fixed;
width: 44px;
height: 40px;
padding: 4px;
transition: .25s;
z-index: 15;
}
.toggle-button:hover {
cursor: pointer;
}
.toggle-button .menu-bar {
position: absolute;
border-radius: 2px;
width: 80%;
transition: .5s;
}
.toggle-button .menu-bar-top {
border: 4px solid #555;
border-bottom: none;
top: 0;
}
.toggle-button .menu-bar-middle {
height: 4px;
background-color: #555;
margin-top: 7px;
margin-bottom: 7px;
top: 4px;
}
.toggle-button .menu-bar-bottom {
border: 4px solid #555;
border-top: none;
top: 22px;
}
.button-open .menu-bar-top {
transform: rotate(45deg) translate(8px, 8px);
transition: .5s;
}
.button-open .menu-bar-middle {
transform: translate(230px);
transition: .1s ease-in;
opacity: 0;
}
.button-open .menu-bar-bottom {
transform: rotate(-45deg) translate(8px, -7px);
transition: .5s;
}Die Schaltfläche hat eine feste Position und scrollt die Seite, wenn sie sich nicht bewegt. Es verfügt außerdem über einen Z-Index von :15, um sicherzustellen, dass es immer über anderen überlappenden Elementen liegt. Die Schaltfläche besteht aus drei horizontalen Linien. Jede horizontale Linie hat ihren eigenen Stil und wir fügen ihr den .menu-bar-Stil hinzu. Die übrigen Stile der Klasse wurden in separate Stildateien verschoben. Wenn die Animation stattfindet, fügen wir eine Klasse .button-open hinzu. Wir zitieren jQuery, das bequemer zu implementieren sein kann:
$(document).ready(function() {
var $toggleButton = $('.toggle-button');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
});
});Anfänger sind möglicherweise nicht mit jQuery vertraut, lassen Sie mich erklären, was los ist. Zuerst initialisieren wir eine Variable namens $togglebutton, die unseren Button enthält. Wir speichern es als Variable und erstellen dann einen Ereignismonitor, der auf Schaltflächenklicks wartet. Jedes Mal, wenn darauf geklickt wird, führt der Ereignis-Listener die Methodenfunktion toggleclass() aus, um .button-open umzuschalten.
.button-open Damit können wir die Art und Weise ändern, wie diese Elemente angezeigt werden. Wir verwenden die CSS3-Funktionen „translate()“ und „rotate()“, um die obere und untere horizontale Linie um 45 Grad zu drehen, und die mittlere horizontale Linie verschwindet allmählich. Sie können in der Demo auf die Schaltfläche klicken, um den Effekt zu sehen.
Seitenmenü
Die HTML-Struktur des Seitenmenüs ist wie folgt:
<div class="menu-wrap"> <div class="menu-sidebar"> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li class="menu-item-has-children"><a href="#">Click The Arrow</a> <span class="sidebar-menu-arrow"></span> <ul class="sub-menu"> <li><a href="#">Alignment</a></li> <li><a href="#">Markup</a></li> <li><a href="#">Comments</a></li> </ul> </li> <li><a href="#">Courses</a></li> <li><a href="#">Get In Touch</a></li> </ul> </div> </div>
Nicht erklärt in Details hier Für jeden Menüstil schauen wir uns das .menu-wrap-Div an. Sein Stil ist wie folgt:
.menu-wrap {
background-color: #6968AB;
position: fixed;
top: 0;
height: 100%;
width: 280px;
margin-left: -280px;
font-size: 1em;
font-weight: 700;
overflow: auto;
transition: .25s;
z-index: 10;
}Seine Position ist fest, sodass das Menü immer an der gleichen Stelle scrollt. Die Höhe ist auf 100 % eingestellt. Beachten Sie, dass der linke Rand auf einen negativen Wert eingestellt ist, wodurch das Menü nicht mehr angezeigt wird. Um ihm einen Erscheinungseffekt zu verleihen, rufen wir mit jquery eine andere Klasse auf, um sie anzuzeigen und zu schließen. Der JavaScript-Code lautet wie folgt:
$(document).ready(function() {
var $toggleButton = $('.toggle-button'),
$menuWrap = $('.menu-wrap');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
$menuWrap.toggleClass('menu-show');
});
});Wir fügen eine Variable $menuwrap hinzu, die alle Elemente des Menüs enthält, und verwenden dasselbe Ereignis, um die Schaltfläche zu erstellen. Diese .menu-show hat einen linken Rand von 0 und fügt einige Box-Schatteneffekte hinzu.
.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #B9ADAD;
}Untermenüs und Links
Möglicherweise stellen Sie fest, dass ein Listenelement die Klasse .menu-item-has-children hat. Enthält Untermenüs. Gleichzeitig gibt es nach dem Link eine Klasse .sidebar-menu-arrow.
<li class="menu-item-has-children"><a href="#">Click The Arrow</a> <span class="sidebar-menu-arrow"></span> <ul class="sub-menu"> <!-- List items --> </ul> </li>
span hat ein ::after-Pseudoelementpaket, das Fontawesome-Pfeile implementiert. Standardmäßig sind Untermenüs ausgeblendet und erscheinen nur, wenn Sie auf das übergeordnete Menü klicken:
$(document).ready(function() {
var $sidebarArrow = $('.sidebar-menu-arrow');
$sidebarArrow.click(function() {
$(this).next().slideToggle(300);
});
});Wenn wir auf den Pfeil klicken, wird eine Funktion nach dem nächsten Element ihrer Zielspanne aufgerufen und sichtbar gemacht. Wir verwenden den Slidetoggle von jquery. Es lässt den Gleiteffekt eines Elements erscheinen oder verschwinden. Die Funktion verfügt über einen Animationszeitparameter.
Schließlich hat unser Demo-Menüpunkt einen Hover-Effekt. Es verwendet ein ::after-Pseudoelement. Der Code lautet wie folgt:
.menu-sidebar li > a::after {
content: "";
display: block;
height: 0.15em;
position: absolute;
top: 100%;
width: 102%;
left: 50%;
transform: translate(-50%);
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
transition: background-position .2s .1s ease-out;
background-size: 200% auto;
}
.menu-sidebar li > a:hover::after {
background-position: -100% 0;
}Dieses ::after-Pseudoelement enthält absolut positionierte Elemente auf Blockebene unter jedem Link mit einer Höhe und Breite von 0,15em. Wir wenden nicht nur die Hintergrundfarbe auf die Linie an, sondern verwenden auch die Funktion linear-gradient() für das Hintergrundbild. Obwohl der Zweck dieser Funktion darin besteht, einen Farbverlauf zu erzeugen, können wir durch Angabe eines Prozentsatzes eine Änderung der Verlaufsfarbe bewirken.
.menu-sidebar li > a::after {
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}Die Hälfte der Linien hier ist transparent und die andere Hälfte ist gelb. Übergeben Sie die Hintergrundgröße auf 200 % der Breite, sodass der transparente Teil die Breite aller Links einnimmt.
Der transparente Teil kann andere Farben verwenden. Dadurch entsteht die Illusion einer mit einer anderen Farbe gefüllten Linie, in Wirklichkeit handelt es sich jedoch nur um eine Linie aus zwei Farben.
Das Obige ist der Inhalt von jQuery + CSS zur Implementierung eines seitlich verschiebbaren Navigationsmenüs code_jquery. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!
