jQuery+CSS implementiert ein seitlich verschiebbares Navigationsmenü code

Heim

Web-Frontend

js-Tutorial

jQuery+CSS implementiert ein seitlich verschiebbares Navigationsmenü code_jquery

PHP中文网

May 16, 2016 am 09:00 AM

cssjquery

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=&#39;https://fonts.googleapis.com/css?family=Montserrat&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;>
<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 = $(&#39;.toggle-button&#39;);
$toggleButton.on(&#39;click&#39;, function() {
$(this).toggleClass(&#39;button-open&#39;);
});
});

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 = $(&#39;.toggle-button&#39;),
$menuWrap = $(&#39;.menu-wrap&#39;);
$toggleButton.on(&#39;click&#39;, function() {
$(this).toggleClass(&#39;button-open&#39;);
$menuWrap.toggleClass(&#39;menu-show&#39;);
});
});

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 = $(&#39;.sidebar-menu-arrow&#39;);
$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)!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Ist JavaScript in C geschrieben? Prüfung der BeweiseApr 25, 2025 am 12:15 AM

Ja, der Motorkern von JavaScript ist in C. 1) Die C -Sprache bietet eine effiziente Leistung und die zugrunde liegende Steuerung, die für die Entwicklung der JavaScript -Engine geeignet ist. 2) Die V8-Engine als Beispiel wird sein Kern in C geschrieben, wobei die Effizienz und objektorientierte Eigenschaften von C kombiniert werden.

JavaScripts Rolle: das Web interaktiv und dynamisch machenApr 24, 2025 am 12:12 AM

JavaScript ist das Herzstück moderner Websites, da es die Interaktivität und Dynamik von Webseiten verbessert. 1) Es ermöglicht die Änderung von Inhalten, ohne die Seite zu aktualisieren, 2) Webseiten durch DOMAPI zu manipulieren, 3) Komplexe interaktive Effekte wie Animation und Drag & Drop, 4) die Leistung und Best Practices optimieren, um die Benutzererfahrung zu verbessern.

C und JavaScript: Die Verbindung erklärteApr 23, 2025 am 12:07 AM

C und JavaScript erreichen die Interoperabilität durch WebAssembly. 1) C -Code wird in das WebAssembly -Modul zusammengestellt und in die JavaScript -Umgebung eingeführt, um die Rechenleistung zu verbessern. 2) In der Spieleentwicklung kümmert sich C über Physik -Engines und Grafikwiedergabe, und JavaScript ist für die Spiellogik und die Benutzeroberfläche verantwortlich.

Von Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptApr 22, 2025 am 12:02 AM

JavaScript wird in Websites, mobilen Anwendungen, Desktop-Anwendungen und serverseitigen Programmierungen häufig verwendet. 1) In der Website -Entwicklung betreibt JavaScript DOM zusammen mit HTML und CSS, um dynamische Effekte zu erzielen und Frameworks wie JQuery und React zu unterstützen. 2) Durch reaktnatives und ionisches JavaScript wird ein plattformübergreifendes mobile Anwendungen entwickelt. 3) Mit dem Elektronenframework können JavaScript Desktop -Anwendungen erstellen. 4) Node.js ermöglicht es JavaScript, auf der Serverseite auszuführen und unterstützt hohe gleichzeitige Anforderungen.

Python gegen JavaScript: Anwendungsfälle und Anwendungen verglichenApr 21, 2025 am 12:01 AM

Python eignet sich besser für Datenwissenschaft und Automatisierung, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python funktioniert in Datenwissenschaft und maschinellem Lernen gut und unter Verwendung von Bibliotheken wie Numpy und Pandas für die Datenverarbeitung und -modellierung. 2. Python ist prägnant und effizient in der Automatisierung und Skripten. 3. JavaScript ist in der Front-End-Entwicklung unverzichtbar und wird verwendet, um dynamische Webseiten und einseitige Anwendungen zu erstellen. 4. JavaScript spielt eine Rolle bei der Back-End-Entwicklung durch Node.js und unterstützt die Entwicklung der Vollstapel.

Die Rolle von C/C bei JavaScript -Dolmetschern und CompilernApr 20, 2025 am 12:01 AM

C und C spielen eine wichtige Rolle in der JavaScript -Engine, die hauptsächlich zur Implementierung von Dolmetschern und JIT -Compilern verwendet wird. 1) C wird verwendet, um JavaScript -Quellcode zu analysieren und einen abstrakten Syntaxbaum zu generieren. 2) C ist für die Generierung und Ausführung von Bytecode verantwortlich. 3) C implementiert den JIT-Compiler, optimiert und kompiliert Hot-Spot-Code zur Laufzeit und verbessert die Ausführungseffizienz von JavaScript erheblich.

JavaScript in Aktion: Beispiele und Projekte in realer WeltApr 19, 2025 am 12:13 AM

Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.

JavaScript und das Web: Kernfunktionalität und AnwendungsfälleApr 18, 2025 am 12:19 AM

Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.

See all articles