Vertikales Dropdown-Menü in js. JQuery: Dropdown-Menü mit Cookies. Neues CSS3-Menü im Apple-Stil

In diesem Tutorial zeigen wir Ihnen, wie Sie ein Dropdown-Menü für die Seitenleiste erstellen, um die Navigation auf Ihrer Website noch einfacher zu gestalten. Diese Art von Menü ist ein beliebter Trend im modernen Webdesign. Viele Websites verwenden diese Art von Menü. Mit seiner Hilfe können Sie das Chaos auf den Projektseiten beseitigen, sie lesbarer machen und die Aufmerksamkeit der Benutzer auf den Hauptinhalt lenken.

Dies ist eine großartige Möglichkeit, Minimalismus ohne Ablenkungen zu erreichen. Heute werden wir selbst ein solches Menü erstellen.

Um ein Navigationsmenü zu erstellen, werfen wir zunächst einen Blick auf die Einstellungen:

Animationsmenü-Demo

Zuerst müssen Sie Normalize.css herunterladen und die Standardbrowser-Stile konfigurieren, um sicherzustellen, dass das Menü in allen Browsern gleich aussieht. Um einen Pfeil vor Menüpunkten mit Unterpunkten anzuzeigen, verwenden wir FontAwesome. Um die Klassen im Menü zu wechseln, laden Sie jQuery und verschieben Sie den gesamten benutzerdefinierten jQuery-Code in script.js. Der letzte Link ist die Haupttabelle für das Webprojekt.

Hamburger-Symbol

Das Hamburger-Symbol ist ein häufiges Attribut der Site-Navigation. Es wird oft mit einer Symbolschriftart wie FontAwesome erstellt, aber in diesem Tutorial werden wir einige Animationen hinzufügen, sodass wir es von Grund auf neu erstellen. Unser Hamburger-Symbol ist ein Span-Tag mit drei Div-Klassen, dargestellt als horizontale Streifen.

Die Stile sehen so aus:

Toggle-button (Position: fest; Breite: 44px; Höhe: 40px; Abstand: 4px; Übergang: .25s; Z-Index: 15; ) .toggle-button:hover ( Cursor: Zeiger; ) .toggle-button .menu -bar ( Position: absolut; Randradius: 2 Pixel; Breite: 80 %; Übergang: .5s; ) .toggle-button .menu-bar-top ( Rand: 4 Pixel durchgezogen #555; Rand unten: keine; oben: 0; ) .toggle-button .menu-bar-middle ( Höhe: 4px; Hintergrundfarbe: #555; Rand oben: 7px; Rand unten: 7px; oben: 4px; ) .toggle-button .menu-bar -bottom ( border: 4px solid #555; border-top: none; top: 22px; ) .button-open .menu-bar-top ( transform: rotate(45deg) translator(8px, 8px); Transition: .5s; ) .button-open .menu-bar-middle ( transform: Translate(230px); Übergang: .1s Easy-In; Deckkraft: 0; ) .button-open .menu-bar-bottom ( transform: rotieren(-45deg) Translate(8px, -7px); Übergang: .5s; )

Das Symbol hat eine feste Position und ändert sich beim Scrollen der Seite nicht. Es hat außerdem einen Z-Index von 15, was bedeutet, dass es immer über anderen Elementen liegt. Besteht aus drei Balken, die jeweils einen anderen Stil aufweisen. Daher verschieben wir jede Leiste in die class.menu-bar. Die restlichen Stile verschieben wir in separate Klassen. Die Magie entsteht, wenn wir dem Span-Tag eine weitere Klasse hinzufügen, die öffentlich ist. Wir fügen es mit jQuery wie folgt hinzu:

$(document).ready(function() ( var $toggleButton = $(".toggle-button"); $toggleButton.on("click", function() ( $(this).toggleClass("button-open" ); ) ); ) );

Für diejenigen, die mit jQuery nicht vertraut sind: Wir initialisieren eine Variable mit $toggleButton, die unser Symbol enthält. Wir speichern es ohne Bedarf in einer Variablen mit JavaScript. Dann erstellen wir einen Ereignis-Listener, der auf Klicks auf das Symbol wartet. Jedes Mal, wenn der Benutzer auf das Hamburger-Symbol klickt, löst der Ereignis-Listener die Funktion toggleClass() aus, die die Funktion „class.button-open“ umschaltet.

Sobald die Klasse .button-open hinzugefügt wurde, können wir damit die Art und Weise ändern, wie Elemente angezeigt werden. Wir verwenden die CSS3-Funktionen „translate()“ und „rotate()“, um die obere und untere Leiste um 45 Grad zu drehen und die mittlere Leiste nach rechts zu verschieben und auszublenden. Hier ist die Animation, die Sie anpassen können:

Dropdown-Navigationsmenü

Nachdem Sie nun Ihr Hamburger-Symbol haben, machen wir es nützlich und erstellen ein Dropdown-Menü, wenn Sie darauf klicken. So sieht das Menülayout aus:

Jetzt gehen wir nicht näher auf die einzelnen Stile dieses Menüs ein, sondern konzentrieren uns auf einige wenige wichtige Punkte. Da sind zunächst die Klassen div und .menu-wrap. Schauen Sie sich seine Stile an:

Menüumbruch (Hintergrundfarbe: #6968AB; Position: fest; oben: 0; Höhe: 100 %; Breite: 280 Pixel; linker Rand: -280 Pixel; Schriftgröße: 1em; Schriftstärke: 700; Überlauf: automatisch ; Übergang: .25s; Z-Index: 10; )

Die Position ist fest, sodass das Menü beim Scrollen der Seite immer an derselben Position bleibt. Bei einer Höhe von 100 % nimmt das Menü den gesamten vertikalen Platz auf der Seite ein. Bitte beachten Sie, dass das Feld „Rand links“ auf eine negative Zahl eingestellt ist, die der Breite des Menüs entspricht. Das bedeutet, dass das Menü aus dem Ansichtsfenster verschwindet. Um es wieder sichtbar zu machen, erstellen wir mit jQuery eine weitere Toggler-Klasse. Unser JavaScript-Datei wird so aussehen:

$(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 weitere Variable $menuWrap hinzu, die den Menü-Wrapper enthält. Verwenden Sie denselben Event-Handler, den wir zuvor erstellt haben. Nur dieses Mal wechseln wir zwei Klassen: eine für die Schaltfläche und eine für die Menü-Shell. Der linke Randwert von class.menu-show ist 0, dadurch wird ein Schatteneffekt hinzugefügt.

Menu-show ( margin-left: 0; box-shadow: 4px 2px 15px 1px #B9ADAD; )

Untermenüs und Links

Möglicherweise stellen Sie fest, dass eines der Listenelemente über eine Klasse „class.menu-item-has-children“ verfügt, die ein Untermenü enthält. Darüber hinaus befindet sich direkt unter dem Link ein Span-Tag mit der Klasse .sidebar-menu-arrow.

span hat ein ::after-Pseudoelement und enthält einen FontAwesome-Pfeil. Standardmäßig ist das Untermenü ausgeblendet und wird nur angezeigt, wenn Sie auf den Pfeil klicken. So können wir es mit jQuery machen:

$(document).ready(function() ( var $sidebarArrow = $(".sidebar-menu-arrow"); $sidebarArrow.click(function() ( $(this).next().slideToggle(300); ) ); ) );

Wenn wir auf den Pfeil klicken, rufen wir eine Funktion auf, die wiederum auf das nächste Element direkt nach dem Span (in unserem Fall das Untermenü) abzielt und es sichtbar macht. Die von uns verwendete Funktion ist slideToggle. Es lässt ein Element erscheinen und verschwinden. Die Funktion in unserem Beispiel hat einen Parameter – die Dauer der Animation.

Die Menüpunkte im Beispiel haben einen Hover-Effekt. Es wird mit dem Pseudoelement ::after erstellt. Der Code sieht so aus:

Menü-Seitenleiste li > a::after ( Inhalt: ""; Anzeige: Block; Höhe: 0,15 em; Position: absolut; oben: 100 %; Breite: 102 %; links: 50 %; transformieren: übersetzen(-50 % ); Hintergrundbild: linearer Farbverlauf (nach rechts, transparent 50,3 %, #FFFA3B 50,3 %); Übergang: Hintergrundposition .2s .1s Easeout; Hintergrundgröße: 200 % automatisch; ) .menu-sidebar li > a:hover::after ( Hintergrundposition: -100 % 0; )

Das ::after-Pseudoelement enthält am Ende jedes Links ein Blockebenenelement mit einer Gesamtbreite und -höhe von 0,15 em. Es sieht alles wie eine Unterstreichung aus. Das Besondere ist, dass wir nicht nur die Hintergrundfarbe auf die Linie anwenden, sondern die Funktion linear-gradient() verwenden Hintergrundbild. Obwohl diese Funktion dazu gedacht ist, Farbverläufe zu erzeugen, können wir die Farbe ändern, indem wir die gewünschten Prozentsätze angeben.

Menü-Seitenleiste li > a::after ( Hintergrundbild: linearer Farbverlauf (nach rechts, transparent 50,3 %, #FFFA3B 50,3 %; )

Die Hälfte der Linie ist hier transparent und die andere Hälfte ist gelb. Indem wir die Hintergrundgröße auf 200 % festlegen, verdoppeln wir die Breite unseres Blocks. Jetzt nimmt der transparente Teil die gesamte Breite des Links ein und der gelbe Teil wandert nach links und wird unsichtbar. Wir ändern die Hintergrundposition beim Hover auf -100 %. Jetzt wird der gelbe Teil sichtbar und der transparente Teil ausgeblendet.

Anstelle des transparenten Teils können Sie auch jede andere Farbe verwenden. Sie können auch mit Farbverläufen experimentieren.

Jedes der von uns betrachteten Elemente funktioniert als Ganzes. Sie können ein solches Menü mit jedem Website-Design aus der TemplateMonster-Sammlung erstellen. Wie Sie sehen, ist dies einfacher, als Sie sich vorstellen können. Viel Erfolg bei der Erstellung professioneller und benutzerfreundlicher Websites!

In diesem Artikel entwickeln wir ein einfaches Dropdown-Menü mit jQuery. Schauen Sie sich zunächst die Demodatei an. Wir hoffen, dass Sie zumindest ein wenig Grundkenntnisse in jQuery und CSS haben. Die wichtigsten Aspekte beim Erstellen dieses Dropdown-Menüs sind die Anwendung der CSS-Parameter: Position, oben, links, Z-Index.

Mit diesen Parametern können wir sicher sein, dass unser Menü genau unter dem Link erscheint, über den wir mit der Maus geklickt haben, und alle anderen Elemente genau abdeckt. Wir sorgen auch dafür, dass das Menü beim Schweben angezeigt wird und verschwindet, wenn der Cursor wegbewegt wird. Um diese Ereignisse zu implementieren, verwenden wir die jQuery-Funktionen: Mouseenter und Mouseleave. Und das ist alles, was wir brauchen, um ein Dropdown-Menü zu erstellen!

Demodatei des Endergebnisses und Download-Link

HTML Quelltext

Schauen Sie sich den HTML-Code für das Dropdown-Menü an:

Wie Sie sehen, verwenden wir hier ungeordnete Listen, um Menüelemente zu implementieren. Jedem Menülink ist eine Dropdown-Menüklasse zugewiesen, und das Dropdown-Menü selbst wird von einer Sublink-Klasse abgedeckt. Die Klassennamen werden von jQuery verwendet, um zu bestimmen, welches Menü angezeigt werden soll.

CSS-Code

Schauen Sie sich den CSS-Code an:

/* CSS für Dropdown-Menüstart */
ul
{
Listenstil:none;
Polsterung:0px;
Rand: 0px
}

Ulli
{
Anzeige:inline;
float:left;
}

Ulli A
{
Farbe:#ffffff;
Hintergrund:#990E00;
Rand rechts: 5px;
Schriftdicke: fett;
Schriftgröße:12px;
Schriftfamilie:verdana;
Textdekoration: keine;
Bildschirmsperre;
Breite: 100 Pixel;
Höhe:25px;
Zeilenhöhe:25px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
Rand: 1px einfarbig #560E00;
}

ul li a:schweben
{
Farbe:#cccccc;
Hintergrund:#560E00;
Schriftdicke: fett;
Textdekoration: keine;
Bildschirmsperre;
Breite: 100 Pixel;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
Rand: 1 Pixel durchgehend #000000;
}

ul li.sublinks a
{
Farbe:#000000;
Hintergrund:#f6f6f6;
border-bottom:1px solid #cccccc;
Schriftstärke:normal;
Textdekoration: keine;
Bildschirmsperre;
Breite: 100 Pixel;
text-align:center;
margin-top:2px;
}

ul li.sublinks a:hover
{
Farbe:#000000;
Hintergrund:#FFEFC6;
Schriftstärke:normal;
Textdekoration: keine;
Bildschirmsperre;
Breite: 100 Pixel;
text-align:center;
}

ul li.sublinks
{
Anzeige:keine;
}

/* CSS für das Ende des Dropdown-Menüs */

Der größte Teil des CSS-Codes wird zum Formatieren von Menüs verwendet (Sie können Folgendes angeben). Aussehen Menü nach eigenem Ermessen), aber auch hier gibt es einige wichtige Punkte:

1 – Tabs entfernen mit list-style:none;

2 – Wir wissen, dass Listen Blockelemente sind und immer in vertikaler Reihenfolge angezeigt werden. Um sie horizontal zu positionieren, geben wir ihnen den Parameter „inline elements“ und richten sie mithilfe des folgenden Codes nach links aus:

Anzeige:inline;
float:left;

3 – Standardmäßig sind Links Inline-Elemente. Wir wandeln sie mit display:block in Blockelemente um (damit wir ihnen jetzt einen Breitenwert geben können).

4 – Das gesamte Menü ausblenden mit:

Ul li.sublinks
{
Anzeige:keine;
}

jQuery

Stellen Sie sich die alten Zeiten vor, als Dropdown-Menüs noch mit einfachen Mitteln implementiert wurden Javascript-Code Außerdem war eine Menge unnötiger Code nötig. Aber heute brauchen wir nur noch jQuery:

$(Funktion())(

Untermenü.css((
Position:"absolut",

zIndex:1000
});

Submenu.stop().slideDown(300);

$(this).slideUp(300);
});
});
});

Eine sehr interessante und einfache Sache. Wir erklären Ihnen, wie es funktioniert. Zu Beginn verpacken wir wie üblich unseren Code in einen jQuery-Controller:

$(Funktion())(
...
});

Unser Code wird aktiviert, wenn der Mauszeiger über ein Element bewegt wird (Mouseenter-Funktion), dem die Dropdown-Menüklasse ($(".dropdown") zugewiesen ist. In unserem Fall ist das ein Link im Menü:

$(Funktion())(
$(".dropdown").mouseenter(function())(
........
});
});

Stellen wir sicher, dass wir alle zuvor geöffneten Menüs verstecken(), bevor der Mauszeiger zum nächsten Link springt:

$(".sublinks").stop(false, true).hide();

Beachten Sie die Stoppfunktion, die uns hilft, nur ein Dropdown-Menü anzuzeigen, wenn sich der Mauszeiger über verschiedene Links im Menü bewegt. Wenn wir diese Funktion nicht verwenden, bleibt jedes Dropdown-Menü geöffnet, bis wir den Mauszeiger vollständig vom Menü wegbewegen. Dadurch kommt es zu Überschneidungen, daher sollten wir dies vermeiden. Als nächstes nehmen wir das aktuell erweiterte Dropdown-Menü und weisen es einer Variablen zu:

Var submenu = $(this).parent().next();

Folgendes wird im HTML-Code passieren:

Wenn wir den Mauszeiger über einen Link mit der Dropdown-Klasse bewegen, bewegen wir uns mit parent() zurück und halten bei „li“ an. Wenn wir dann next() verwenden, befinden wir uns im gewünschten Dropdown-Menü und „li“ wird bereits mit den Unterklassen-Links (Sublinks) sein. Auf diese Weise können wir mit jQuery leichter herausfinden, welches Dropdown-Menü angezeigt werden soll, wenn wir mit der Maus über einen bestimmten Link fahren.

Untermenü.css((
Position:"absolut",
oben: $(this).offset().top + $(this).height() + „px“,
links: $(this).offset().left + „px“,
zIndex:1000
});

Der Code ist sehr wichtig, da er dafür sorgt, dass das Dropdown-Menü genau unter dem jeweiligen Link angezeigt wird. Wenn die Position auf absolut gesetzt ist, können wir das Element in jedem beliebigen Bereich unserer Seite positionieren. Als nächstes bestimmen wir die obere Hover-Position des Links mit $(this).offset().top (dies bezieht sich auf den aktuell schwebenden Menüpunkt) und fügen einen Höhenwert hinzu, damit das Menü genau unter dem Link erscheint. Ähnliches machen wir mit dem linken Parameter. Anschließend verwenden wir Z-Index, um sicherzustellen, dass unser Menü über anderen Elementen angezeigt wird.

Submenu.stop().slideDown(300);
Natürlich können Sie auch andere Animationsoptionen wie Einblenden, Animationen mit Ihren eigenen Stilen usw. verwenden.

Jetzt müssen wir uns von dem Konzept der Anzeige eines Dropdown-Menüs verabschieden und es ausblenden. Wir brauchen diesen Code:

Submenu.mouseleave(function())(
$(this).slideUp(300);
});

Um ein Dropdown-Menü auszublenden, verwenden wir slideUp, das Antonym von slideDown. Beachten Sie, dass es sich bei „Untermenü“ um eine Variable handelt, die wir erstellt haben, um ein bestimmtes Dropdown-Menü zu definieren.

Somit haben wir in jQuery ein attraktives einstufiges Dropdown-Menü.

Unter Verwendung der klassischen JQuery wurden viele Artikel zu diesem Thema geschrieben. Ich habe versucht, die Aufgabe ein wenig zu verkomplizieren, indem ich die Möglichkeit hinzugefügt habe, Menüabschnitte geöffnet (oder geschlossen, je nach Wahl des Benutzers) zu lassen, während man sich auf der Website bewegt.
Um dieses Problem zu lösen, habe ich mich für die Verwendung des JQuery-Cookie-Plugins entschieden. Der Vorteil dieses Plugins besteht darin, dass der Vorgang clientseitig erfolgt, was wiederum die Belastung des Servers reduziert. Minuspunkt: Wenn der Benutzer JS deaktiviert hat, funktioniert das Plugin nicht. Diese Option ziehe ich aber nicht in Betracht, da dann der ganze Sinn des Dropdown-Menüs verschwindet. Also, fangen wir an.
Zuerst müssen wir das JQuery-Framework selbst und das JQuery-Cookie-Plugin verbinden:

Code: HTML

Als nächstes folgt die Markierung. Es wird wie eine einfache Liste aussehen, nichts Übernatürliches. Das Einzige, was mir auffällt, ist, dass das Tag einen Titel enthalten sollte. Wenn Sie darauf klicken, wird ein Menü angezeigt:

Code: HTML

Erster Titel

Erster Link

Zweiter Link

Dritter Link

Zweiter Titel

Erster Link

Zweiter Link

Dritter Link

Dritter Titel

Erster Link

Zweiter Link

Dritter Link

Vierter Titel

Erster Link

Zweiter Link

Dritter Link

Nun, und so weiter bis ins Unendliche. Jetzt kommt der interessanteste Teil. Ich werde dem Code ein paar Kommentare hinzufügen, damit er ungefähr klar ist.

Code: JS

$(document).ready(function())(
if($.cookie("num_open_ul"))( // geprüft, ob ein Eintrag in den Cookies vorhanden ist
if($.cookie("num_open_ul") != 0)( // und dieser Eintrag ist ungleich 0
var number_eq = parseInt($.cookie("num_open_ul")-1);
$(".navigation_body").eq(number_eq).show().prevAll("#navigation h2.navigation_head:first").addClass("active_navigation");
}
};
$("#navigation h2.navigation_head").click(function())( // Wenn darauf geklickt wird, funktioniert diese Funktion
if(!$(this).next().is(":visible"))(
$("div.navigation_body").siblings("div.navigation_body").slideUp(500); // wenn andere geöffnet sind, schließe alles außer dem aktuellen
}
$(this).next("div.navigation_body").slideToggle(500).siblings("div.navigation_body").slideUp(500);
$(this).toggleClass("active_navigation").siblings("#navigation h2.navigation_head").removeClass("active_navigation"); // Der offenen Klasse wurde eine Klasse hinzugefügt, um den Stil zu ändern
setTimeout(fncookie, 600); //die Aufnahme selbst in Cookies mit einer Verzögerung, damit das Skript Zeit hat, seine Arbeit vor der Aufnahme abzuschließen (500 ms – Geschwindigkeit, Verzögerung – 600 ms)
});
function fncookie())( // die Aufnahmefunktion selbst
var number_open_ul = 0;
var i = 0;
$("div.navigation_body").each(function())(
i++;
if($(this).is(":visible"))(
number_open_ul = i;
}
$.cookie("num_open_ul", number_open_ul, (expires:3, path:"/")); // 3 Tage lang für die gesamte Website speichern.
});
}
});

Das heißt, wenn der Benutzer nun das Menü öffnet, die Website verlässt und ein paar Tage später wieder dorthin zurückkehrt, bleibt das Menü für ihn weiterhin geöffnet.
Und zum Schluss bleibt uns noch eine kleine Bemerkung: Eigentlich CSS-Stile. Sie können es nach Ihrem Geschmack machen, im Beispiel habe ich ein fertiges Design aus einem der Projekte übernommen

Code: CSS

#navigation (
Rand: 80px automatisch;
Breite: 250px;
}
#navigation h2, #navigation h2.navigation_head (
Schriftgröße: 18px;
Schriftstärke: fetter;
Hintergrundfarbe: #ffb6c1;
Hintergrundbild: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ffe9e9),color-stop(100%,#ffb6c1));
Hintergrundbild: -webkit-linear-gradient(#ffe9e9,#ffb6c1);
Hintergrundbild: -moz-linear-gradient(#ffe9e9,#ffb6c1);
Hintergrundbild: -o-linear-gradient(#ffe9e9,#ffb6c1);
Hintergrundbild: linear-gradient(#ffe9e9,#ffb6c1);

Polsterung: 5px 3px 6px 3px;
Rand: automatisch;
Position: relativ;
}
#navigation h2.navigation_head:after (
Position: absolut;
rechts: 5px;
Farbe: #550000;
Inhalt: „cssb“;
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
Cursor: Zeiger;
}
.active_navigation(
Hintergrundbild: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ffb6c1),color-stop(100%,#ffe9e9)) !important;
Hintergrundbild: -webkit-linear-gradient(#ffb6c1,#ffe9e9) !important;
Hintergrundbild: -moz-linear-gradient(#ffb6c1,#ffe9e9) !important;
Hintergrundbild: -o-linear-gradient(#ffb6c1,#ffe9e9) !important;
Hintergrundbild: linear-gradient(#ffb6c1,#ffe9e9) !important;
}
.active_navigation:after (
Position: absolut;
rechts: 5px;
Inhalt: „cssd“ !important;
}
.navigation_body(
Anzeige:keine;
}
#navigation ul (
Rand: 0;
Polsterung: 0;
Listenstiltyp: keiner;
}
* html #navigation ul li(
Höhe: 1 %;
}
#navigation div.navigation_body ul li (
Rand links: 10px;
}
#navigation a (
Schriftfamilie: " Mal neu Römisch";
Bildschirmsperre;
Farbe: #918871;
Polsterung: 3px;
Hintergrundfarbe: #ffe3e0;
border-bottom: 1px solid #fff;
Textdekoration: keine;
}
#navigation a:hover (
Farbe: #585858;
Hintergrundfarbe: #ffb6cc;
}

Falls es jemandem aufgefallen ist, habe ich hier versucht, die Inhaltseigenschaft zu verwenden: +/- wenn geschlossen/ Menü öffnen, aber Sie können ein Bild oder ein anderes Design hinzufügen. Ein Beispiel dafür, was wir uns ausgedacht haben, können Sie hier sehen

Wie immer bin ich bereit, Fragen anzuhören und zu versuchen, sie zu beantworten. Alles Gute, alles Gute.

Nachdem ich mehrere Anfragen erhalten hatte, beschloss ich, einen Artikel darüber zu schreiben, wie man ein Dropdown-Menü erstellt. Der beste und einfachste Weg, ein solches Menü zu erstellen, besteht darin, sich auf jQuery zu verlassen.

Schauen wir uns zunächst das HTML-Markup an

Einfaches Dropdown-Menü basierend auf jQuery. Einfaches Dropdown-Menü

Heim
Produkte
Dienstleistungen
Kontaktiere uns

Inhalt

Es gibt eine einfache ungeordnete Liste von ul , deren li-Tags die Grundlage des Navigationsmenüs bilden. Fügen Sie als Nächstes den folgenden Code zum entsprechenden li-Tag hinzu. Dadurch wird die Dropdown-Liste strukturiert.

Wenn Sie aufmerksam sind, werden Sie zwei Dinge bemerken:

1. Das li-Tag verfügt über eine Dropdown-Klasse.
2. Der übergeordnete Link hat die ddIcon-Klasse.

Die Dropdown-Klasse wird in jQuery verwendet, um ein Dropdown-Menü anzuzeigen/auszublenden. Die zweite Klasse, ddIcon, wird verwendet, um einen Zeiger auf das Dropdown-Menü anzuzeigen.

An den Menüstilen gibt es nichts Besonderes – die üblichen Stile sind:

Container (Breite: 960px; Rand: 0 automatisch; Polsterung oben: 50px;) .container h1 (Schriftgröße: 30px; Farbe: #666; Rand unten: 1em;) .container nav (Rahmenradius: 4px; Hintergrundfarbe: #fff; Höhe: 37px; ) .container nav ul li ( Position: relativ; float: links; ) .container nav ul li a ( Schriftgröße: 12px; Textdekoration: keine; Schriftstärke: fett; Texttransformation: Großbuchstaben; Farbe: #545454; Polsterung: 13px 15px; Anzeige: Block; Rand rechts: 1px fest #f9f9f9; ) .container nav ul li a.ddIcon ( Hintergrund: transparente URL("dd.png ") no-repeat 86% 52%; padding: 13px 25px 13px 15px; ) .container nav ul li a:hover ( Hintergrundfarbe: #cc333f; Farbe: #fff; ) .container nav ul li.active a ( Hintergrund -color: #cc333f; Farbe: #fff; ) .container nav ul li:first-child a ( border-radius: 4px 0 0 4px; ) .container nav ul li .subNav ( position: absolute; Hintergrundfarbe: # cc333f; Auffüllung: 15px 15px 20px; Breite: 172px; links: 0px; oben: 38px; Anzeige: keine; ) .container nav ul li .subNav .navSection ( Auffüllung: 5px 0; ) .container nav ul li .subNav h4 ( margin-bottom: 0.5em; ) .container nav ul li .subNav h4 a ( Schriftgröße: 11px; Farbe: #edc951; text-transform: großschreiben; border-bottom: 1px solid #D33B47; padding: 7px 10px; ) .container nav ul li .subNav h4 a:hover ( color: #edc951; ) .container nav ul li .subNav h4 a span ( float: right; Schriftgröße: 10px; color : #fff; -moz-transition: Farbe 0,5 Sekunden Leichtigkeit 0 Sekunden; ) .container nav ul li .subNav h4 a span:hover ( Farbe: #390206 ) .container nav ul li .subNav a ( float: keine; Grenze: keine ; Anzeige: Block; Texttransformation: Großschreibung; Farbe: #fff; Polsterung: 7px 15px; -moz-transition: Farbe 0,5s Leichtigkeit 0s; Zeilenhöhe: 1,3; ) .container nav ul li .subNav:hover ( Farbe : #390206; ) .container .section ( klar: beide; Polsterung: 10px; ) .container .section Artikel p ( Schriftgröße: 16px; Farbe: #488fb8; Zeilenhöhe: 1,3; ) .container .section Artikelkopfzeile p ( padding-top: 20px; Schriftgröße: 20px; Farbe: #333; Zeilenhöhe: 1,3; margin-bottom: .4em; )

Jetzt müssen wir wiederbeleben Dropdown-Menü. Das wird uns helfen einfachste Funktion jQuery.

$(function())( $("li.dropdown").hover(function() ( if ($("this:has(div.subNav)"))( $(".subNav").css(( " display":"none")); $(".subNav", this).css(("display":"block")); $("nav ul li").css(("position":" relative ", "z-index":"1001")); $(this).addClass("active"); ) ), function())( $(".subNav").css(("display": "none ")); $(this).removeClass("active"); $("nav ul li").css(("position": "relative", "z-index": "1")); )) ; ));

Für jedes Listenelement ist es möglich, ein eigenes Dropdown-Menü zu erstellen: Platzieren Sie innerhalb des li-Elements einen Block mit der Klasse .subnav und weisen Sie die Klasse .dropdown auch dem li selbst zu.

1. Vertikales helles jQuery-Menü 2. Cooler Effekt. Tanzmenü. 4. Dropdown-Liste mit jQuery

Hervorragende Gestaltung des Schnittstellenelements in Form einer Dropdown-Liste.

Wenn Sie mit der Maus über die Schaltfläche fahren, wird oben ein Bedienfeld angezeigt.

6. jQuery-Plugin„MobilyBlocks“ zur Anzeige eines Radialmenüs 7. Menü mit Sprites

Animiertes Javascript-Menü mit Leuchteffekt.

Frisches, schönes Menü mit jQuery.

9. jQuery-Menü „GarageDoor“ 10. vertikales jQuery-Bildlaufmenü

Umsetzung eines Menüs mit einer großen Anzahl an Artikeln. Scrollt, wenn Sie den Mauszeiger nach oben oder unten bewegen.

11. jQuery-Dropdown-Listendesign 12. Seitennavigations-Plugin

Reibungsloses Scrollen zum gewünschten Abschnitt auf der Seite. jQuery-Plugin Eine Seite Navigation".

13. Plugin „Menü für animierte Inhalte“

Neues jQuery-Plugin. Hervorragende Implementierung der animierten Seitennavigation. Wenn Sie Menüpunkte durchgehen, erscheint ein Block mit einer Beschreibung und möglichen Links, und je nach ausgewähltem Punkt ändert sich der Hintergrund der Seite, der sich unabhängig von der Größe des Browserfensters über den gesamten Bildschirm ausdehnt. Schauen Sie sich unbedingt die Demoseite an.

14. jQuery-Menü-Plugin „Sweet Menu“.

Animiertes Menü mit Popup-Elementen.

15. Das jQuery-Menü wurde korrigiert

Wenn Sie auf der Seite nach unten scrollen, bleibt das Menü am oberen Bildschirmrand fixiert.

16. Scroll-Menüs des Slider-Kits

Um ein vertikales Menü mit einer großen Anzahl von Elementen zu implementieren. Das Scrollen durch die Elemente erfolgt mit dem Mausrad oder über die Links „Zurück“ und „Weiter“.

17. Stilvolles CSS3-Menü 18. Neues CSS3-Menü im Apple-Stil

Neues Menü im Apple-Stil. Es sieht dunkler aus als zuvor, aber nicht weniger süß.

19. Ursprüngliches jQuery-Menü

Dropdown-Menü mit Hintergrundeffekt. Menüunterpunkte werden nach oben erweitert. Wenn Sie mit der Maus über einen Menüpunkt fahren, ändert sich das Hintergrundbild.

20. Animiertes Menü mit jQuery

Animiertes Menü. Menüpunkte werden in Form von Symbolen und Beschreibungen dargestellt. Mehrere tolle Effekte, wenn man mit der Maus über einen Menüpunkt fährt. Es gibt 8 Effekte. Um sie alle zu sehen, folgen Sie den Links Exemple1-Exemple8 auf der Demoseite.

21. „Scrolling-Menü“ XML-Menü mit Scrollen

Vertikales und horizontales Bildlaufmenü. Gute Entscheidung mit einer großen Anzahl an Speisen auf der Speisekarte.

22. Kontextmenü auf einer Website mit jQuery

Wenn Sie mit der rechten Maustaste auf einen bestimmten Bereich klicken, wird ein Menü angezeigt.

23. Kreisförmiges zweistufiges Menü für die Site

Wenn Sie einen Menüpunkt auswählen, werden rechts Untermenüpunkte angezeigt.

24. jQuery CSS3-Menü mit Unschärfeeffekt „Blur Menu“ CSS3

Das ursprüngliche jQuery CSS3-Menü gibt es in 7 verschiedenen Stilen. Wenn Sie mit der Maus über einen der Menüpunkte fahren, scheint der Rest zu verschwimmen.

25. Einige spektakuläre animierte jQuery CSS3-Menüs

10 kreative animierte Menüs. Horizontale und vertikale CSS3-Menüs mit verschiedenen Effekten und Übergängen.

Im Archiv befindet sich auch das Original PSD-Datei Speisekarte.

27. MagicLine-Menü

Der Hintergrund oder die Unterstreichung eines Menüelements folgt der Maus mit einer leichten Verzögerung, während der Hintergrund beim Bewegen von Element zu Element sanft seine Farbe ändert. Sehr schöner Effekt, sieht ungewöhnlich aus. Achtung: Der Effekt funktioniert nicht in der Oper

28. Bildblasen

Ein hervorragender Effekt, wenn Sie mit der Maus über eines der Bilder fahren. Der Effekt erinnert ein wenig an den oben beschriebenen jQDock.

31. Interessante jQuery-Menüs mit verschiedenen Effekten

Horizontal, vertikales Menü. Interessante Effekte.

32. Tolles jQuery-Menü im Apple-Stil 34. jQuery-Menü mit interessantem Effekt 36. Frisches Menü mit interessantem Effekt in jQuery

Sehr interessanter Effekt. Perfekt für die Gestaltung von Portfolio-Websites.

Interessanter Effekt, wenn Miniaturansichten beim Schweben auftauchen.

40. Dropdown-Liste mit automatischem Scrollen

Schöner Übergangseffekt zwischen den Elementen.

42. Tolles jQuery-Menü 43. Wunderschönes großes jQuery-Menü 44. Scrollende jQuery-Menüs

Menüpunkte werden in Form von Miniaturansichten dargestellt.

46. jQuery-Radialnavigationsmenü 47. CSS- und jQuery-Menü

Eine Navigationsleiste mit einem Suchfeld, das transparent wird, wenn Sie auf der Seite nach unten scrollen.

48. Horizontales jQuery-Menü 49. Vertikales jQuery-Menü

Tolles vertikales Menü. Wenn Sie den Cursor bewegen, wird ein Menüelement angezeigt.

50. Horizontales jQuery-Menü

Ein interessanter Effekt, wenn man mit der Maus über einen Menüpunkt fährt.

52. jQuery-Dropdown-Menü

Wenn Sie mit der Maus über das Menü fahren, werden seine Elemente angezeigt. Die angezeigten Elemente werden in Form eines Bogens angezeigt, dessen Radius Sie bei der Konfiguration des Plugins festlegen können. In manchen Browsern sehen Sie keine bogenförmige Darstellung, das Menü wird gerade angezeigt, was den Gesamteindruck dieser jQuery-Menüimplementierung jedoch nicht beeinträchtigt.

53. CSS- und jQuery-Navigationsleiste

Ein interessanter Effekt, wenn man mit der Maus über einen Menüpunkt fährt.

54. jQuery-Popup-Panel

Frisch animiertes Menü in Grautönen.

58. Spaltennavigation auf der Website mit jQuery

Eine interessante Lösung für die Navigation, die in Form vertikaler Streifen dargestellt wird. Wenn Sie mit der Maus über diese Balken fahren, werden ein Bild für das Element und eine Liste mit Untermenüs angezeigt. Wenn Sie auf einen Untermenüpunkt klicken, erscheint eine Seite mit einer Beschreibung. Diese Implementierung eignet sich perfekt für Werbeseiten oder Präsentationen. Schauen Sie sich unbedingt die Demo des Plugins an.

59. jQuery-Site-Navigation

Die Seitennavigation wird in Form von 4 Bildern dargestellt. Wenn Sie mit der Maus darüber fahren, werden Sie einen interessanten Animationseffekt bemerken.

60. Die Navigationsleiste scrollt mit dem Inhalt

Navigationsbereich. Durch Klicken auf den Pfeil wird die Seite gescrollt. Die Navigation scrollt mit dem Seiteninhalt.

61. jQuery-Panel mit verschiedenen sozialen Diensten