Web-Frontend
js-Tutorial
jQuery+CSS implementiert ein seitlich verschiebbares Navigationsmenü code_jquery
jQuery+CSS implementiert ein seitlich verschiebbares Navigationsmenü code_jquery
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)!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1379
52
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
So sehen Sie das Datum der Bootstrap
Apr 07, 2025 pm 03:03 PM
ANTWORT: Sie können die Datumsauswahlkomponente von Bootstrap verwenden, um Daten auf der Seite anzuzeigen. Schritte: Stellen Sie das Bootstrap -Framework ein. Erstellen Sie ein Eingangsfeld für Datumsauswahl in HTML. Bootstrap fügt dem Selektor automatisch Stile hinzu. Verwenden Sie JavaScript, um das ausgewählte Datum zu erhalten.
