css jquery legördülő menü kattintásra. Sima nyitás menü jQuery segítségével. Legördülő navigációs menü

Miután több kérést kaptam, úgy döntöttem, hogy írok egy cikket a legördülő menü készítéséről. Egy ilyen menü létrehozásának legjobb és legegyszerűbb módja a jQuery használata.

Nézzük először a HTML jelölést.

jQuery alapú legördülő menü Egyszerű legördülő menü

itthon
Termékek
Szolgáltatások
Lépjen kapcsolatba velünk

tartalom

Van egy egyszerű rendezetlen lista ul , ennek li címkéi képezik a navigációs menü alapját. Ezután adja hozzá az alábbi kódot a megfelelő li címkéhez a legördülő lista felépítéséhez.

Ha óvatos, két dolgot fog észrevenni:

1. A li címkének van egy legördülő osztálya.
2. A szülőhivatkozás ddIcon osztályú.

A legördülő osztály a jQuery-ben a legördülő menü megjelenítésére/elrejtésére szolgál. A második osztályú ddIcon a legördülő menüre mutató mutató megjelenítésére szolgál.

A menüstílusokban nincs semmi különös – a szokásos stílusok a következők:

Container (szélesség: 960px; margó: 0 auto; padding-top: 50px; ) .container h1 ( font-size: 30px; color: #666; margin-bottom: 1em; ) .container nav ( border-radius: 4px; background-color: #fff; relatív pozíció: #fff; relatív pozíció: #fff; magasság: bal.) ; ) .container nav ul li a ( betűméret: 12 képpont; szövegdekoráció: nincs; betűsúly: félkövér; szövegátalakítás: nagybetűs; szín: #545454; kitöltés: 13px 15px; kijelző: blokk; jobb szegély: 1px átlátszó #f9f.container a.container a. d.png") újbóli tőzeg 86% 52%; kitöltés: 13px 25px 13px 15px;) -sugár: 4px 0 0 4px;) 0; ) .container nav ul li .subNav h4 ( margin-bottom: 0,5em; ) .container nav ul li .subNav h4 a (betűméret: 11px; szín: #edc951; szövegátalakítás: nagybetűs; keret-alsó: 1px szilárd #D33B:0px7p); .subNav h4 a:hover ( szín: #edc951; ) .container nav ul li .subNav h4 a span ( float: jobb; font-size: 10px; color: #fff; -moz-transition: color 0,5s easy 0s; ) .container navub Nav li A ize: 16px; szín: #488fb8; vonalmagasság: 1,3; ) .container .section cikk fejléce p ( padding-top: 20px; font-size: 20px; color: #333; line-height: 1.3; margó-alsó: .4em; )

Most újra kell élesztenünk legördülő menü. Ebben lesz segítségünkre a legegyszerűbb jQuery függvény.

$(function()( $("li.dropdown").hover(function() ( if ($("this:has(div.sub.subNav)"))( $(".subNav").css(("display":"none")); $(".subNav", this).css(("display":"block"("inpozíciós("). ":"1001") ); $(this).addClass("aktív"); ) ), function()( $(".subNav").css(("display":"none")); $(this).removeClass("active"); $("nav ul li").css(("pozíció":"relatív"); ")");

A lista minden eleméhez lehetőség van saját legördülő menü létrehozására: a li elemen belül helyezzünk el egy blokkot a class.subnav -al, és a class.dropdownt is hozzárendeljük magához a li-hez.

Ebben az oktatóanyagban megmutatjuk, hogyan hozhat létre oldalsó legördülő menüt a még egyszerűbb navigáció érdekében. Ez a menü a modern webdizájn népszerű trendje. Sok webhely használja ezt a menütípust. Ezzel megszabadulhat a projekt oldalain uralkodó káosztól, olvashatóbbá teheti azt, a felhasználók figyelmét a fő tartalomra irányítva.

Ez egy nagyszerű módja a minimalizmus elérésének zavaró tényezők nélkül. Ma mi magunk készítünk egy ilyen menüt.

A navigációs menü létrehozásához először nézzük meg a beállításokat:

Animációs menü bemutató

Először be kell töltenie a Normalize.css fájlt, és be kell állítania az alapértelmezett böngészőstílusokat, ügyeljen arra, hogy a menü minden böngészőben egyforma legyen. A FontAwesome segítségével nyilat jelenítünk meg az alelemekkel rendelkező menüelemek előtt. A menüben az osztályok közötti váltáshoz betöltjük a jQuery-t, és az összes egyéni jQuery kódot áthelyezzük a script.js fájlba. Az utolsó hivatkozás a webprojekt főtáblája.

Hamburger ikonra

A hamburger ikon egy gyakori webhelynavigációs attribútum. Gyakran olyan ikon-betűtípussal készítik, mint a FontAwesome, de ebben az oktatóanyagban animációt adunk hozzá, így a semmiből fogjuk megépíteni. A hamburger ikonunk egy span címke, amely három div osztályt tartalmaz, vízszintes sávok formájában.

A stílusok így néznek ki:

Váltógomb ( pozíció: rögzített; szélesség: 44 képpont; magasság: 40 képpont; kitöltés: 4 képpont; átmenet: 0,25 s; z-index: 15; ) .toggle-button:hover ( kurzor: mutató; ) .toggle-button .menu-bar (pozíció: abszolút ; szegély: 8%us szélesség: abszolút -bar-top ( border: 4px solid #555; border-bottom: none; top: 0; ) .toggle-button .menu-bar-middle ( magasság: 4px; background-color: #555; margin-top: 7px; margin-bottom: 7px; top: solid border5 #button. 5; border-top: none; top .button-open .menu-bar-top ( transzformáció: forgatás(45deg) translate(8px, 8px); átmenet: .5s; ) .button-open .menu-bar-middle (transzformáció: translate(230px); átmenet: .1s-open-bottom-in0 (buttonpenacity) könnyű-in . : forgatás (-45 fok) fordítás (8 képpont, -7 képpont); átmenet: 0,5 s; )

Az ikon rögzített pozícióval rendelkezik, és nem változik az oldal görgetése közben. 15-ös z-indexe is van, ami azt jelenti, hogy mindig a többi elem tetején lesz. Három sávból áll, amelyek mindegyike más stílusú. Ezért minden sávot áthelyezünk a .menu-bar osztályba. A fennmaradó stílusok külön osztályokba kerülnek. A varázslat akkor következik be, amikor egy másik osztályt adunk a span címkéhez, amely nyilvános. Hozzáadjuk vele jQuery a következő módon:

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

Azok számára, akik nem ismerik a jQuery-t, a $toggleButton segítségével inicializálunk egy változót, amely az ikonunkat tartalmazza. Változóban tároljuk JavaScript nélkül. Ezután létrehozunk egy eseményfigyelőt, amely figyeli az ikonkattintásokat. Minden alkalommal, amikor a felhasználó a hamburger ikonra kattint, az eseményfigyelő elindítja a toggleClass() függvényt, amely átkapcsolja a .button-open osztályt.

A .button-open osztály hozzáadása után megváltoztathatjuk az elemek megjelenítési módját. A CSS3 translate() és rotate() függvényeket használjuk, hogy a felső és alsó sávokat 45 fokkal elforgatjuk, és középső sáv jobbra mozdult és eltűnt. Itt vannak a testreszabható animációk:

Legördülő navigációs menü

Most, hogy megvan a hamburger ikonja, tegyük hasznossá, és hozzunk létre egy legördülő menüt, amikor rákattintunk. Így néz ki a menü jelölése:

Most nem részletezünk minden stílust ennél a menünél, inkább néhányra összpontosítunk. fontos pontokat. Először is, ez egy div és egy .menu-wrap osztály. Nézd meg a stílusait:

Menü tördelése (háttérszín: #6968AB; pozíció: rögzített; felső: 0; magasság: 100%; szélesség: 280px; bal margó: -280px; betűméret: 1em; betűsúly: 700; túlcsordulás: automatikus; átmenet: .25s; z-index: 10;)

A pozíció fix, így a menü az oldal görgetése közben mindig ugyanabban a pozícióban marad. A 100%-os magasság lehetővé teszi, hogy a menü a teljes függőleges helyet elfoglalja az oldalon. Vegye figyelembe, hogy a bal margó értéke negatív szám, megegyezik a menü szélességével. Ez azt jelenti, hogy a menü eltűnik a nézetablakból. Hogy ismét látható legyen, létrehozunk egy másik váltóosztályt a jQuery segítségével. A miénk JavaScript fájlígy fog kinézni:

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

Adjon hozzá egy másik $menuWrap változót, amely tartalmazza a menü burkolóját. Használja ugyanazt az eseménykezelőt, amelyet korábban készítettünk. Csak ezúttal két osztályt váltunk: egyet a gombhoz és egyet a menüburkolóhoz. A .menu-show osztály bal margójának értéke 0, ez árnyékhatást ad.

Menü-megjelenítés (margó balra: 0; doboz-árnyék: 4px 2px 15px 1px #B9ADAD; )

Almenük és hivatkozások

Észreveheti, hogy az egyik listaelemnek van egy .menu-item-has-childs osztálya, amely almenüt tartalmaz. Ezenkívül közvetlenül a link alatt található egy span címke a .sidebar-menu-arrow osztállyal.

A span tartalmaz egy::after pszeudoelemet, és tartalmaz egy FontAwesome nyilat. Alapértelmezés szerint az almenü rejtett, és csak akkor lesz látható, ha rákattint a nyílra. A jQuery segítségével a következőképpen tehetjük meg:

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

Amikor a nyílra kattintunk, egy függvényt hívunk meg, ami viszont közvetlenül a span után következő elemet célozza meg (esetünkben egy almenüt), és teszi láthatóvá. Az általunk használt funkció a slideToggle. Megjelenik és eltűnik az elem. A példánkban szereplő függvénynek egy paramétere van - az animáció időtartama.

A példa menüelemei hover hatásúak. A::after pszeudoelem használatával jön létre. A kód így néz ki:

Menu-sidebar li > a::after ( tartalom: ""; kijelző: blokk; magasság: 0,15 em; pozíció: abszolút; felső: 100%; szélesség: 102%; bal: 50%; transzformáció: lefordítás (-50%); háttér-kép: lineáris gradiens (jobbra, átlátszó 50,3%, #FFFA3B; -oute background1; -size: 2 00% auto; ) .menu-sidebar li > a:hover::after ( háttérpozíció: -100% 0; )

Az ::after pszeudoelem minden hivatkozás alján tartalmaz egy blokkszintű elemet teljes szélességgel és 0,15 em magassággal. Az egész aláhúzásnak tűnik. A sajátosság az, hogy nem csak a háttérszínt alkalmazzuk a vonalra, hanem a linear-gradient() függvényt használjuk a háttérképen. Bár ennek a funkciónak a célja színátmenetek létrehozása, a színt a kívánt százalékos érték megadásával megváltoztathatjuk.

Menu-sidebar li > a::after ( háttérkép: lineáris gradiens (jobbra, átlátszó 50,3%, #FFFA3B 50,3%); )

Itt a vonal fele átlátszó, a másik fele sárga. A háttér 200%-os méretével megduplázzuk dobozunk szélességét. Most az átlátszó rész elfoglalja a hivatkozás teljes szélességét, a sárga rész pedig balra mozog és láthatatlanná válik. A lebegtető háttér pozícióját -100%-ra módosítjuk. Most a sárga rész láthatóvá válik, az átlátszó rész pedig el van rejtve.

Az átlátszó rész helyett bármilyen más színt is használhat. A színátmenetekkel is kísérletezhet.

Az általunk vizsgált elemek mindegyike összességében működik. Egy ilyen menüt a TemplateMonster gyűjtemény bármely weboldalán létrehozhat. Amint látja, ez könnyebb, mint gondolná. Sok sikert a professzionális és felhasználóbarát weboldalak készítéséhez!

Ma az oldalnavigáció új generációjáról szeretnék válogatni - a teljes képernyős menükből. Olyan esetekben használatosak, amikor maga a navigáció nincs az oldalon, csak egy gomb van, amire rákattintva megnyílik a menü. Hasonló elv látható a -keretrendszerben is, amikor a navigációs sáv már nem fér el, a menüpontok listáját tartalmazó blokk egyszerűen el van rejtve. Helyette egy gomb jelenik meg, amely általában három csíkból áll. Megnyomásakor kiesik teljes menü. Sok modern weboldalon a menü tartósan el van rejtve még nagy képernyőkön is. Ez úgy történik, hogy ne töltse be az oldalt. Bár most nem szabad ezt minden projektjénél megtenned. Ha a menü másodlagos jelentőségű, akkor elrejtheti, de ha nagy, összetett szerkezetű webhelye van, ezt a lehetőséget jobb, ha nem használja. Így. VAL VEL általános elv elvégezte a munkát, de adott típus A menü elég szokványos, valami újat szeretne. Nem is olyan régen kezdtem észrevenni olyan oldalakat, amelyek navigációja nem egyszerűen kiesik, hanem teljes képernyőn megnyílik egy felugró ablakban. Valami olyan, mint a népszerű csúszópanelek, de az egész a munkaterület teljes területét foglalja el. Az oldalak mögött külön jQuery pluginek és css3 megoldások kezdtek megjelenni, amelyekről tulajdonképpen ez a téma.
Személy szerint nagyon szeretem a navigációs menü ezt a megvalósítását, mivel kényelmes a mobileszközökkel rendelkező felhasználók számára, és nagyon lenyűgözően néz ki a nagy monitorokon. Egyre több oldal van teljes képernyős menüvel, ingyenesen jQuery bővítmények is egyre nagyobb, és a koncepció fokozatosan trenddé válik.
Így. 20 jQuery plugin a teljes képernyős menühöz a felugró ablakban.

Teljes képernyős push-navigáció A ma elérhető egyik legjobb ingyenes teljes képernyős navigációs szkript. A "Menü" gomb megnyomásakor megjelenik a navigáció, valamint egy névjegyblokk, ami nagyon kényelmes a webhely látogatója számára, mivel a hívás elérési útja 1 kattintással kevesebb lesz. Szeretném megjegyezni, hogy a forgatókönyv és mobil eszközök névjegyekkel ellátott blokk navigáció alá kerül.
Az ablak kialakításának nagyon szép kiegészítője az animált SVG ikon. Alapértelmezés szerint három sávnak tűnik, de kattintásra az ikon nyíllá változik, ami azt jelzi, hogy a menü elrejthető Kerekített animált navigáció Egy másik nagyon klassz. jquery szkript teljes képernyős navigáció ugyanazoktól a fejlesztőktől, mint a fenti beépülő modul. Ennek a forgatókönyvnek nagyon klassz és szokatlan megjelenési hatása van. A menü gomb megnyomásakor a css3 segítségével az ikonból egy hullám árad át az egész monitoron, ami a menüelemek hátterébe nő. Ugyanaz a rejtő hatás.
Ez a navigáció remekül működik mobil eszközökön, de tekintve, hogy elég erős a spawn effektus, szerintem a régebbi telefonokon lassú lesz (nem teszteltem, ezért örülnék, ha megírnád a tapasztalataidat kommentben).

Perspektivikus oldalnézeti navigáció Egy másik látványos teljes képernyős menüszkript. A menü gomb megnyomásakor az oldal látható része az effektussal oldalra kerül, a felszabaduló területen megjelenik egy menü. Számos spawn animációs effektus létezik.
Sajnos be mobiltelefon nem működik megfelelően: ha sok menüelem van, és azok nem férnek el a képernyőn, akkor a függőleges görgetés nem jelenik meg, és a navigáció egyszerűen megszakad.

Teljes oldalas bevezető és navigáció Elég egyszerű teljes képernyős menüszkript. Nem mondhatom, hogy nagyon hatékony, de kényelmes lesz mobileszközökön.

Fly Side Menu Egy másik teljes képernyős menü, amelyben a látható rész 3D effektussal oldalra kerül, de más fejlesztőktől. A korábbi hasonló szkripttől eltérően ennek jól kell működnie mobil eszközökön, mert ha a menü nem fér el a képernyőn, megjelenik a függőleges görgetés.

Ebben a cikkben egy egyszerű legördülő menüt fogunk kidolgozni a jQuery használatával. Először nézze meg a demo fájlt. Reméljük, hogy rendelkezik legalább néhány alapvető jQuery- és CSS-ismerettel. A legördülő menü létrehozásának legfontosabb szempontja az alkalmazás css opciók: pozíció, felül, bal, z-index.

Ezekkel a lehetőségekkel biztosak lehetünk abban, hogy menünk pontosan azon hivatkozás alatt fog megjelenni, amelyre az egeret mutatta, és pontosan lefedi az összes többi elemet. A menüt a lebegtetéskor is megjelenítjük, és a kurzor elmozdításakor eltűnik. Ezen események megvalósításához a jQuery függvényeket fogjuk használni: mouseenter és mouseave. És ez minden, amire szükségünk van egy legördülő menü létrehozásához!

A végeredmény demófájlja és letöltési linkje

HTML kód

Tekintse meg a legördülő menü HTML kódját:

Amint látja, itt rendezetlen listákat fogunk használni a menüpontok megvalósításához. Minden menühivatkozáshoz hozzá van rendelve egy legördülő menüosztály, magát a legördülő menüt pedig egy allink osztály fedi le. A jQuery az osztályneveket fogja használni annak meghatározásához, hogy melyik menüt jelenítse meg.

CSS kód

Nézd meg a CSS kódot:

/* CSS a legördülő menü indításához */
ul
{
list-style:none;
padding:0px;
margó: 0 képpont
}

ul li
{
display:inline;
balra lebeg;
}

ul li a
{
szín:#ffffff;
háttér:#990E00;
margó-jobb:5px;
betűsúly: félkövér;
betűméret: 12 képpont;
font-family:verdana;
szöveg-dekoráció:nincs;
display:block;
szélesség: 100 képpont;
magasság: 25px;
vonalmagasság: 25 képpont;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
keret: 1px tömör #560E00;
}

ul li a: lebeg
{
szín:#cccccc;
háttér:#560E00;
betűsúly: félkövér;
szöveg-dekoráció:nincs;
display:block;
szélesség: 100 képpont;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
keret: 1px tömör #000000;
}

ul li.allinkek a
{
szín:#000000;
háttér:#f6f6f6;
border-bottom:1px tömör #cccccc;
font-weight:normal;
szöveg-dekoráció:nincs;
display:block;
szélesség: 100 képpont;
text-align:center;
margó felső: 2 képpont;
}

ul li.sublinks a:hover
{
szín:#000000;
háttér:#FFEFC6;
font-weight:normal;
szöveg-dekoráció:nincs;
display:block;
szélesség: 100 képpont;
text-align:center;
}

ul li.sublinks
{
display:none;
}

/* CSS a legördülő menü végéhez */

A legtöbb CSS-kód a menü formázására szolgál (megadhatod kinézet menü saját belátása szerint), de itt is van néhány fontos pont:

1 - Távolítsa el a lapokat list-style:none;

2 - Tudjuk, hogy a listák blokk szintű elemek, és mindig függőleges sorrendben jelennek meg. A vízszintes elrendezés érdekében megadjuk nekik az inline elem paramétert, és a bal oldalra igazítjuk a következő kóddal:

display:inline;
balra lebeg;

3 - A hivatkozások alapértelmezés szerint soron belüli elemek. Ezeket blokkelemekké alakítjuk a display:block segítségével (így most már szélességi értéket is tudunk adni nekik).

4 - Az összes menü elrejtése a következővel:

Ul li.sublinks
{
display:none;
}

jQuery

Képzeld el a régi időket, amikor a legördülő menük durva javascript kóddal, plusz egy csomó felesleges kóddal voltak megvalósítva. De ma már csak a jQueryre van szükségünk:

$(függvény()(

submenu.css((
pozíció: "abszolút",

zIndex:1000
});

Almenu.stop().slideDown(300);

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

Nagyon érdekes és egyszerű dolog. Hadd magyarázzuk el, hogyan működik. Kezdésként és szokás szerint a kódunkat egy jQuery vezérlőbe csomagoljuk:

$(függvény()(
...
});

Kódunkat akkor hívják meg, amikor az egérkurzort egy olyan elem fölé viszi (mouseenter funkció), amelyhez legördülő osztályt ($().dropdown") rendeltek. Esetünkben ez egy link a menüben:

$(függvény()(
$(.dropdown").mouseenter(function()(
........
});
});

Győződjön meg róla, hogy az összes előzőt elrejti (elrejti()). nyissa meg a menüket mielőtt az egérkurzor a következő hivatkozásra ugrik:

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

Vegye figyelembe a stop funkciót, amely segít abban, hogy egyszerre csak egy legördülő menü jelenjen meg, amikor az egérkurzor a menü különböző hivatkozásaira navigál. Ha nem használjuk ezt a funkciót, akkor minden legördülő menü nyitva marad addig a pillanatig, amíg az egérkurzort teljesen el nem távolítjuk a menütől. Ez némi átfedést hoz létre, ezért el kell kerülnünk. Ezután vesszük a jelenleg kibontott legördülő menüt, és hozzárendeljük egy változóhoz:

Var almenü = $(this).parent().next();

Íme, mi lesz a HTML-kódban:

Amikor az egérkurzor egy legördülő osztályt tartalmazó hivatkozás felett áll, a parent()-val visszalépünk, és megállunk az "li"-nél, majd a next(-nél) a kívánt legördülő menüben találjuk magunkat, és az "li" már az alhivatkozások (allinkek) osztályával lesz. Így a jQuery megkönnyíti számunkra, hogy megtudjuk, melyik legördülő menü jelenjen meg, ha az egérmutató egy adott hivatkozás felett van.

submenu.css((
pozíció: "abszolút",
top: $(this).offset().top + $(this).height() + "px",
balra: $(this).offset().left + "px",
zIndex:1000
});

A kód nagyon fontos, mert biztosítja, hogy a legördülő menü pontosan az adott link alatt jelenjen meg. Ha a pozíciót abszolút értékre állítjuk, akkor az elemet oldalunk bármely területén elhelyezhetjük. Ezt követően a $(this).offset().top paraméterrel határozzuk meg a hivatkozás legfelső pozícióját, amely felett a kurzor áll (ez arra az aktuális menüpontra vonatkozik, amely felett a kurzor áll), és adunk hozzá egy magassági értéket, hogy a menü pontosan a hivatkozás alatt jelenjen meg. Valami hasonlót csinálunk a bal oldali paraméterrel. Ezután a z-index segítségével biztosítjuk, hogy menünk a többi elem tetején jelenjen meg.

Almenu.stop().slideDown(300);
Természetesen használhat más animációs lehetőségeket is, mint például a fadeIn, animáció saját stílusokkal stb.

Most el kell hagynunk a legördülő menü megjelenítésének koncepcióját, és el kell rejteni. A következő kódrészletre van szükségünk:

Almenu.mouseleave(function()(
$(ez).slideUp(300);
});

A legördülő menü elrejtéséhez a slideUp-ot, a slideDown antonimáját használjuk. Ne feledje, hogy az almenü egy változó, amelyet egy adott legördülő menü meghatározásához hoztunk létre.

Így van egy vonzó egyszintű jQuery legördülő menünk.

Továbbá, ha érdekli, megtekintheti az előző módszert CSS használatával ami a cikkben le van írva -

Most az üzlethez. Az előző cikkhez hasonlóan először is írjuk meg a menü HTML kódját. A kód ugyanaz, mint abban a cikkben, hogy ne legyen félreértés és érthetőbb. Két elemből álló menü, és mindkettőnek van almenüje.

1. bekezdés
- Legördülő menü 1
- Legördülő menü 2
- Legördülő menü 3
2. pont
- Legördülő menü 1
- Legördülő menü 2
- Legördülő menü 3

Ha van ilyen vagy hasonló vonala, amely már csatlakoztatta a könyvtárat, akkor ezt ne tegye újra.

jQuery(document).ready(function($)( $("#slow_nav ul li").hover(function () ( $("ul", this).stop().slideDown(400); ), function () ( $("ul", this).stop().slideUp(400; )); ));

A szkript második sorában megadjuk a menünk azonosítóját. Ha jelentkezik ez a módszer a saját menüjébe, majd természetesen módosítsa a nevet a sajátjára. Ebben az esetben ez a #slow_nav .

Beállíthatja az animáció idejét is. Ebben a szkriptben a nyitás és a zárás 400 ezredmásodpercre van beállítva, ami 0,4 másodperc. Ha akarja, módosíthatja nagyobb vagy kisebb értékre.

Az utolsó lépés, stílusok hozzáadása. Nagyon hasonlítanak az előző cikkben szereplő stílusokhoz, csak nincs bennük css tulajdonságait animációk.

#lassan color:#333 ; color:#fff; ) #slow_nav li ul( position:absolute; list-style:none; text-align:center; top:15px; font-size:15px; left:0; margin:0; padding:0; display:none; ) #slow_nav li ul ul #x3p8; _nav li ul li: last-child( border-bottom:none; ) #slow_nav li ul li a( padding:5px 12px; color:#fff; display:block; ) #slow_nav li ul li:hover( background-color:#444; ) #slow_nav listx-ul-chil:l:dpx;s low_nav li ul li:first -child:before(tartalom:""; pozíció:abszolút; szélesség:1px; magasság:1px; keret:5px tömör átlátszó; keret-alsó szín:#333; bal:10px; felső:-10px; )

Szintén hozzáadva a stílusokhoz új sor, amellyel a szkript megfelelően működik. A - #slow_nav li ul elem display:none; . Ha nem adja hozzá, akkor először a legördülő menü jelenik meg, és csak akkor tűnik el, ha a kurzort fölé viszi. Az összes többi stílus megegyezik az előző cikkben leírtakkal.

Az előző módszerhez hasonlóan ez is nemcsak saját maga által írt menükre alkalmazható, hanem ugyanazokra a dinamikus menükre is, amelyeket tartalomkezelő rendszerek, például WordPress hoznak létre. Ehhez kicsit módosítani kell a stílusokon és kész. Vagyis az első HTML kódot nem kell használni, csak stílusokat. A stílusokban a #slow_nav azonosítónevet le kell cserélni arra, ami lesz, és lehet még valamit részletezni. Nem részletezem. Minden eset személyes megközelítést igényel, ezért sajnálom 🙂

Ennyi, köszönöm a figyelmet. 🙂