Kam interesē, var apskatīties iepriekšējā metode izmantojot CSS, kas aprakstīts rakstā -
Tagad uz biznesu. Tāpat kā iepriekšējā rakstā, vispirms rakstīsim HTML mūsu izvēlnes kods. Kods tāds pats kā tajā rakstā, lai nav neskaidrību un saprotamāk. Izvēlne ar diviem vienumiem, un abiem ir apakšizvēlnes.
Ja jums ir šāda vai līdzīga līnija, kas jau ir savienojusi bibliotēku, to nevajadzētu darīt vēlreiz.
Skripta otrajā rindā mēs norādām mūsu izvēlnes ID. Ja jūs piesakāties šādā veidā uz savu izvēlni, pēc tam dabiski mainiet nosaukumu uz savu. AT Šis gadījumsŠis - #slow_nav.
Varat arī iestatīt animācijas laiku. Šajā skriptā atvēršana un aizvēršana ir iestatīta uz 400 milisekundēm, kas ir 0,4 sekundes. Ja vēlaties, varat to mainīt uz lielāku vai mazāku vērtību.
Pēdējais solis, stilu pievienošana. Tie ir ļoti līdzīgi stiliem no pēdējā raksta, tikai tiem nav css īpašības animācijas.
#slow_nav > ul(platums: 500px; margin:25px auto 0; ) #slow_nav > ul > li(saraksta stils: nav; displejs: inline-block; position:relative; polsterējums:0; ) #slow_nav a(text- dekorācija:nav;) #slow_nav > ul > li > a( font-size:18px; padding:5px; background-color:#333; color:#fff; ) #slow_nav li ul( position:absolute; list-style: nav; text-align:center; top: 15px; font-size:15px; left:0; margin:0; polsterējums:0; displejs:nav; ) #slow_nav li ul li(fona krāsa:#333; borta- bottom:1px solid #888; ) #slow_nav li ul li:last-child( border-bottom:none; ) #slow_nav li ul li a( polsterējums:5px 12px; color:#ffff; display:block; ) #slow_nav li ul li:hover( background-color:#444; ) #slow_nav li ul li:first-child( margin-top:25px; position:relative; ) #slow_nav li ul li:first-child:before( content:"" ; pozīcija: absolūts; platums: 1 pikseļi; augstums: 1 pikseļi; apmale: 5 pikseļi, vienkrāsains, caurspīdīgs; apmales-apakšā-krāsa: #333; pa kreisi: 10 pikseļi; augšā: -10 pikseļi; )
Pievienots arī stilu vienam jauna līnija, ar kuru skripts darbojas pareizi. Elementam - #slow_nav li ulīpašums ir iestatīts displejs: nav;. Ja jūs to nepievienosiet, tad nolaižamā izvēlne sākotnēji būs redzama un pazudīs tikai pēc tam, kad kursors tiks novietots virs tās. Visi pārējie stili ir tādi paši kā iepriekšējā rakstā.
Tāpat kā iepriekšējo metodi, arī šo var piemērot ne tikai pašu rakstītām izvēlnēm, bet arī tām pašām dinamiskajām izvēlnēm, kuras veido, piemēram, satura pārvaldības sistēmas WordPress. Lai to izdarītu, jums ir nedaudz jāpielāgo stili, un viss. Tas ir, pirmais HTML kods nav jāizmanto, tikai stili. Stīlos ir jāaizstāj ID nosaukums #slow_nav ar to, kas jums būs, un ir iespējams vēl kaut ko sīkāk labot. Es neiedziļināšos detaļās. Katram gadījumam nepieciešama individuāla pieeja, tāpēc atvainojiet 🙂
Tas arī viss, paldies par uzmanību. 🙂
Šajā rakstā mēs izstrādāsim vienkāršu nolaižamā izvēlne izmantojot jQuery. Vispirms apskatiet demonstrācijas failu. Mēs ceram, ka jums ir vismaz dažas pamatzināšanas par jQuery un CSS. Šīs nolaižamās izvēlnes izveides galvenie aspekti ir CSS parametru pielietošana: pozīcija, augšdaļa, pa kreisi, z-indekss.
Izmantojot šīs opcijas, mēs varam būt pārliecināti, ka mūsu izvēlne parādīsies tieši zem saites, virs kuras tā virzīja kursoru, un precīzi aptvers visus citus vienumus. Mēs arī liksim izvēlnei parādīties, virzot kursoru, un pazudīs, kad kursors tiks pārvietots prom. Lai īstenotu šos notikumus, mēs izmantosim jQuery funkcijas: mouseenter un mouseleave. Un tas ir viss, kas mums nepieciešams, lai izveidotu nolaižamo izvēlni!
Gala rezultāta demonstrācijas fails un lejupielādes saite
HTML kods
Apskatiet nolaižamās izvēlnes HTML kodu:
Kā redzat, šeit mēs izmantosim nesakārtotus sarakstus, lai ieviestu izvēlnes vienumus. Katrai izvēlnes saitei ir piešķirta nolaižamās izvēlnes klase, un pašu nolaižamo izvēlni sedz apakšsaites klase. Klašu nosaukumus izmantos jQuery, lai noteiktu, kuru izvēlni parādīt.
CSS kods
Apskatiet CSS kodu:
/* CSS nolaižamajai izvēlnei Sākt */
ul
{
saraksta stils: nav;
polsterējums:0px;
piemale: 0px
}
ul li
{
displejs: iekļauts;
pludiņš:pa kreisi;
}
ul li a
{
krāsa: #ffffff;
fons:#990E00;
mala-labā: 5 pikseļi;
fonta svars: treknrakstā;
fonta izmērs: 12 pikseļi;
font-family:verdana;
teksta noformējums: nav;
displejs: bloks;
platums: 100 pikseļi;
augstums: 25 pikseļi;
līnijas augstums: 25 pikseļi;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
apmale: 1px solid #560E00;
}
ul li a: virziet kursoru
{
krāsa:#cccccc;
fons:#560E00;
fonta svars: treknrakstā;
teksta noformējums: nav;
displejs: bloks;
platums: 100 pikseļi;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
apmale: 1px solid #000000;
}
ul li.apakšsaites a
{
krāsa:#000000;
fons:#f6f6f6;
apmale-bottom: 1px solid #cccccc;
fonta svars: normāls;
teksta noformējums: nav;
displejs: bloks;
platums: 100 pikseļi;
text-align:center;
mala augšdaļa: 2 pikseļi;
}
ul li.sublinks a:hover
{
krāsa:#000000;
fons:#FFEFC6;
fonta svars: normāls;
teksta noformējums: nav;
displejs: bloks;
platums: 100 pikseļi;
text-align:center;
}
ul li.apakšsaites
{
displejs: nav;
}
/* CSS nolaižamās izvēlnes beigām */
Lielākā daļa CSS koda tiek izmantota izvēlnes formatēšanai (varat dot izskats izvēlne pēc saviem ieskatiem), taču šeit ir arī daži svarīgi punkti:
1 – Ciļņu noņemšana ar list-style:none;
2 – Mēs zinām, ka saraksti ir bloka līmeņa elementi un vienmēr tiek rādīti vertikālā secībā. Lai tie būtu izkārtoti horizontāli, mēs piešķiram tiem iekļautā elementa parametru un izlīdzinām tos kreisajā pusē ar šādu kodu:
displejs: iekļauts;
pludiņš:pa kreisi;
3
– Saites pēc noklusējuma ir iekļauti elementi. Mēs tos pārveidojam par bloku elementiem ar display:block (lai tagad varētu tiem piešķirt platuma vērtību).
4 - Slēpt visas izvēlnes, izmantojot:
Ul li.apakšsaites
{
displejs: nav;
}
jQuery
Iedomājieties vecos laikus, kad nolaižamās izvēlnes tika ieviestas ar neapstrādātu javascript kods, turklāt tur bija daudz nevajadzīga koda. Bet šodien viss, kas mums nepieciešams, ir jQuery:
$(funkcija()(
submenu.css((
pozīcija: "absolūti",
zIndekss:1000
});
Apakšizvēlne.stop().slideDown(300);
$(tas).slideUp(300);
});
});
});
Ļoti interesanta un vienkārša lieta. Paskaidrosim, kā tas darbojas. Lai sāktu, kā parasti, mēs iesaiņojam savu kodu jQuery kontrollerī:
$(funkcija()(
...
});
Mūsu kods tiek izsaukts, kad peles kursors tiek virzīts (peles ievadīšanas funkcija) virs elementa, kuram ir piešķirta nolaižamā klase ($(.dropdown")). Mūsu gadījumā šī ir saite izvēlnē:
$(funkcija()(
$(.dropdown").mouseenter(function()(
........
});
});
Paslēpsim() visas iepriekšējās atvērtās izvēlnes, pirms pele pāriet uz nākamo saiti:
$(.sublinks").stop(false, true).hide();
Ņemiet vērā apturēšanas funkciju, kas palīdz mums vienlaikus parādīt tikai vienu nolaižamo izvēlni, kad peles kursors pārvietojas uz dažādām izvēlnes saitēm. Ja šo funkciju neizmantosim, tad katra nolaižamā izvēlne paliks atvērta līdz brīdim, kad pilnībā nobīdīsim peles kursoru prom no izvēlnes. Tas radīs zināmu pārklāšanos, tāpēc mums no tā jāizvairās. Tālāk mēs izmantojam pašlaik izvērsto nolaižamo izvēlni un piešķiram to mainīgajam:
Var apakšizvēlne = $(this).parent().next();
Lūk, kas būs HTML kodā:
Kad peles kursors atrodas virs saites ar nolaižamo klasi, mēs virzāmies atpakaļ ar vecāku() un apstājamies pie "li", un pēc tam ar next() atrodamies vēlamajā nolaižamajā izvēlnē, un "li" jau būs ar klases apakšsaitēm (apakšsaitēm). Tādējādi jQuery ļauj mums viegli noskaidrot, kura nolaižamā izvēlne jāparāda, kad peles kursors atrodas virs konkrētas saites.
submenu.css((
pozīcija: "absolūti",
augšā: $(this).offset().top + $(this).height() + "px",
pa kreisi: $(this).offset().left + "px",
zIndekss:1000
});
Kods ir ļoti svarīgs, jo tas nodrošina, ka nolaižamā izvēlne tiek parādīta tieši zem konkrētās saites. Ja pozīcija ir iestatīta uz absolūtu, mēs varam novietot elementu jebkurā mūsu lapas apgabalā. Pēc tam mēs nosakām saites augšējo pozīciju, virs kuras atrodas kursors, izmantojot $(this).offset().top (tas attiecas uz pašreizējo izvēlnes vienumu, virs kura virza kursoru), un pievienojam tai: augstuma vērtība lai parādītu izvēlni tieši zem saites. Mēs darām kaut ko līdzīgu ar kreiso parametru. Pēc tam mēs izmantojam z-indeksu, lai pārliecinātos, ka mūsu izvēlne tiek parādīta virs citiem elementiem.
Apakšizvēlne.stop().slideDown(300);
Protams, varat izmantot arī citas animācijas iespējas, piemēram, fadeIn, animāciju ar saviem stiliem un tā tālāk.
Tagad mums ir jāatsakās no nolaižamās izvēlnes parādīšanas koncepcijas un jāpaslēpj. Mums ir nepieciešams šāds koda fragments:
Apakšizvēlne.mouseleave(function()(
$(tas).slideUp(300);
});
Lai paslēptu nolaižamo izvēlni, mēs izmantojam slideUp, kas ir slideDown antonīms. Ņemiet vērā, ka apakšizvēlne ir mainīgais, ko mēs izveidojām, lai definētu konkrētu nolaižamo izvēlni.
Tādējādi mums ir pievilcīga viena līmeņa nolaižamā izvēlne jQuery izvēlne.
Lai rakstītu savu navigāciju jQuery vertikālas nolaižamās izvēlnes veidā ar apakškategoriju nolaižamo sarakstu, jums ir jāsaprot pats šī mehānisma princips. Bet vispirms apskatīsim navigācijas struktūru:
Navigācija
Kā jūs, iespējams, uzminējāt, mūsu nolaižamā izvēlne ir balstīta uz sarakstiem ar aizzīmēm. Virzot kursoru virs atzīmes
- tests 1
- tests 2
- tests 3
- tests 4
Bet kā, jūs jautāsiet? Jā, patiesībā tas ir ļoti vienkārši. Vispirms sapratīsim mūsu navigācijas saraksta stilu lapu, tas izskatīsies šādi:
Pamatteksts ( fons: rgb(244, 244, 244); fontu saime: Verdana; fonta svars: 100; ) /*---Navigācija---*/ #izvēlne ( platums: 200 pikseļi; piemale: 0; polsterējums: 2px; ) #menu li ( saraksta stila veids: nav; ) .menu ( pozīcija: relatīvā; fons: šokolāde; fons: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3) ; fons: -webkit-linear-gradient(augšpusē, rgb(198, 255, 242), #2AC4B3); fons: -o-linear-gradient(augšā, rgb(198, 255, 242), #2AC4B3); apmale : 1px solid #2AC4B3; ) .menu:hover ( fons: #00c; fons: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); fons: -webkit-linear-gradient( augšdaļa, rgb(230, 230, 230), #0CBFAB); fons: -o-linear-gradient(augšā, rgb(230, 230, 230), #0CBFAB); ) .izvēlnes diapazons (platums: 11 pikseļi; augstums: 11 pikseļi; displejs: bloks; pozīcija: absolūts; augšā: 8 pikseļi; pa labi: 10 pikseļi; kursors: rādītājs; ) .menu ul (platums: 150 pikseļi; mala: 0; polsterējums: 1px; pozīcija: absolūtā; augšā: -1px; pa kreisi: 198 pikseļi; ) .menu ul li ( fons: šokolāde; fons: -moz-linear-gradient(augšējais, rgb(198, 255, 242), #2AC4B3); fons: -webkit-linear-gradient(augšējais, rgb(198, 255, 242), #2AC4B3); fons: -o-linear-gradient(augšējais, rgb(198, 255, 242), #2AC4B3); apmale: 1px ciets #fff; ) .menu ul li:hover ( fons: #00c; fons: -moz-linear-gradient(augšā, rgb(230, 230, 230), #0CBFAB); fons: -webkit-linear-gradient(augšā, rgb( 230, 230, 230), #0CBFAB); fons: -o-linear-gradient(augšpusē, rgb(230, 230, 230), #0CBFAB); ) .menu a (polsterējums: 5 pikseļi; displejs: bloks; teksts- apdare: nav; krāsa: balta; ) .menu a:hover ( krāsa: balta; ) /*---END---*/
No stila lapas var redzēt, ka nolaižamais saraksts sākotnēji nav paslēpts, bet mēs šo brīdi labosim ar:
$(document).ready(function()( $(.menu ul").hide(); $(.menu span").css("fons", "url("down.png")") $("#menu li").hover(function()( $(this).children("ul").show(); /*Ekvivalents $("ul", this).show();* / $(this).find("span").css("background", "url("right.png")"); /*Ekvivalents $("span", this).css("background", "url ("right.png")");*/ ),function()( $(this).children("ul").hide(); /*Ekvivalents $("ul", this).hide (); */ $(this).find("span").css("background", "url("down.png")"); /*$("span", this).css("background" ", " url("down.png")");*/ )) ))
Tagad apskatīsim tuvāk jQuery nolaižamās izvēlnes kodu, jo. varbūt kādam tas nebūs līdz galam skaidrs. Pašā sākumā ir uzrakstīta šāda struktūra:
$(dokuments).ready(funkcija()( ))
Tajā ir komandas, kas jāizpilda pēc tam, kad lapa ir pilnībā ielādēta. Tas tiek darīts, lai neparādās dažāda veida kļūdas, ja nav iespējams atrast kādu objektu, jo tas vēl nav ielādēts.
$(.menu ul").hide();
Ko nozīmē šis ieraksts? Konstrukcija "$()" ļauj atlasīt elementus. Tāpēc pašā sākumā mums ir jāpaslēpj mūsu nolaižamais saraksts. Ņemam konstrukciju “$()” un ierakstām tajā mūs interesējošo objektu. Mūsu gadījumā šis objekts būs saraksts ar aizzīmēm ar klases "ēdienkarti". Tālāk mēs rakstām metodi “slēpt ()”, kas ļauj paslēpt mūs interesējošo objektu.
$(.menu span").css("fons", "url("down.png")");
Ko viņa dara? Viņa meklē birku vecāku elements kurai ir piešķirta klase “menu” un, izmantojot metodi "css("background", "url("down.png"))", stila rekvizītam "background" tiek piešķirta vērtība "url("down .png")". "down.png" ir ikona, kas norāda, ka sarakstu var paplašināt.
Tad seko konstrukcija, kas atvērs mūsu sarakstu, tas izskatās šādi:
$("#menu li").hover(function()( $(this).children("ul").show(); $(this).find("span").css("fons", " url("right.png")"); ),function()( $(this).children("ul").hide(); $(this).find("span").css("fons" , "url("down.png")"); )
Mēs meklējam tagu, kura vecākajam elementam ir piešķirts id="menu". Tālāk seko "hover" metode un divas funkcijas iekavās. Pirmā funkcija tiks izpildīta, novietojot peles kursoru, bet otrā tiks izpildīta, ja peles kursors atstās mūs interesējošo elementu.
Pirmā funkcija saka:
$(this).children("ul").show(); $(this).find("span").css("fons", "url("right.png")");
Konstrukcija "$(this)" nozīmē, ka mūs interesē elements, uz kura mēs atrodamies Šis brīdis norādīja (šis no angļu valodas šis). Un mēs norādījām uz birku
Pēc tam mēs meklējam atzīmes pēcnācējus, proti: tags un tā fons tiek mainīti uz citu ikonu.
Pēc tam tiek uzrakstīta funkcija, kas dara visu, kā tas bija sākotnēji, pēc tam, kad peles kursors atstāj saraksta elementu:
Function()( $(this).children("ul").hide(); $(this).find("span").css("fons", "url("down.png")"); )
Lai rakstītais jQuery kods darbotos un mūsu nolaižamā izvēlne darbotos pareizi, jums ir jālejupielādē bibliotēka no vietnes jquery.com un jāiekļauj tā, ierakstot to aiz sākuma taga.
virkne.Tieši tā! Nobeigumā es vēlos atzīmēt, ka, ja jūsu vietne ir diezgan smaga, skripts, iespējams, darbosies pārāk vēlu (vietnes ielāde prasīs ilgu laiku) un lietotāji redzēs, kā tā vispirms tiek pilnībā atvērta un tikai pēc tam paslēpta. , kas, redz, ir ļoti neglīts. Tāpēc visas jQuery komandas ir jāpārvieto ārpus šīs konstrukcijas: "$(document).ready(function()())". Tas izskatīsies šādi:
$(dokuments).ready(function()( )) $(.menu ul").hide(); $(.menu span").css("fons", "url("down.png")"); $("#menu li").hover(function()( $(this).children("ul").show(); $(this).find("span").css("fons", " url("right.png")"); ),function()( $(this).children("ul").hide(); $(this).find("span").css("fons" , "url("down.png")"); ))
Savienojam mūsu skriptu ir jāpārvieto no atzīmes
pašās beigās, pirms beigu atzīmes, vai arī varat iekļaut skriptu uzreiz aiz aizzīmju saraksta.(lejupielādes: 314)
Izmantojot klasisko jQuery, par šo tēmu ir uzrakstīts daudz rakstu. Es mēģināju nedaudz sarežģīt uzdevumu, pievienojot iespēju saglabāt izvēlnes sadaļas atvērtas (vai aizvērtas, atkarībā no lietotāja izvēles), pārvietojoties vietnē.
Lai atrisinātu šo problēmu, es nolēmu izmantot spraudni jQuery Cookie. Šī spraudņa priekšrocība ir tāda, ka darbība tiek veikta klienta pusē, kas savukārt samazina servera slodzi. Mīnuss - ja lietotājs ir atspējojis JS, spraudnis nedarbosies. Bet šo iespēju Neuzskatu, jo tad visa nolaižamās izvēlnes būtība pazūd pavisam. Tātad, sāksim.
Vispirms mums ir jāsavieno pats jQuery ietvars un jQuery spraudnis Sīkfaili:
Kods: HTML
Nākamais ir uzcenojums. Tas izskatīsies pēc vienkārša saraksta, nekas pārdabisks. Vienīgais, kas jāņem vērā, ir tas, kas norādīts tagā
ir jābūt virsrakstam, noklikšķinot, tiks parādīta izvēlne:
Kods: HTML
Un tā tālāk bezgalīgi. Tagad interesantākais. Kodā pievienošu dažus komentārus, lai būtu aptuveni skaidrs, chopach
Kods: JS
$(dokuments).ready(function()(
if($.cookie("num_open_ul"))( // pārbaudiet, vai ir sīkfaila ieraksts
if($.cookie("num_open_ul") != 0)( // un šis ieraksts nav vienāds ar 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()( // noklikšķinot, šī funkcija darbosies
if(!$(this).next().is(":redzams"))(
$("div.navigation_body").siblings("div.navigation_body").slideUp(500); // ja ir atvērti citi, aizveriet visus, izņemot pašreizējo
}
$(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"); // atvērt pievienoja klasi, lai mainītu stilu
setTimeout(fncookie, 600); //paša ierakstīšana sīkfailos ar aizkavi, lai skriptam būtu laiks pabeigt darbu pirms rakstīšanas (500ms - ātrums, aizkave - 600ms)
});
funkcija fncookie()( // pati ierakstīšanas funkcija
varnumber_open_ul = 0;
var i = 0;
$("div.navigation_body").each(function()(
i++;
if($(this).is(":redzams"))(
numurs_open_ul = i;
}
$.cookie("num_open_ul", number_open_ul, (termiņš:3, ceļš:"/")); // uzglabā 3 dienas visai vietnei.
});
}
});
Tas ir, tagad, ja lietotājs ir atvēris izvēlni, pametis vietni un atgriezies tajā pēc pāris dienām, izvēlne joprojām viņam paliks atvērta.
Visbeidzot, mums ir atlicis neliels pieskāriens: patiesībā css stili. Jūs jau to darāt pēc savas gaumes, piemēram, es paņēmu pabeigts dizains no viena no projektiem
Kods: CSS
#navigācija(
piemale: 80px auto;
platums: 250 pikseļi
}
#navigation h2, #navigation h2.navigation_head (
fonta izmērs: 18 pikseļi;
fonta svars: treknāks;
fona krāsa: #ffb6c1;
background-image: -webkit-gradient(lineārs,50% 0,50% 100%,color-stop(0%,#ffe9e9),color-stop(100%,#ffb6c1));
background-image: -webkit-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -moz-linear-gradient(#ffe9e9,#ffb6c1);
background-image: -o-linear-gradient(#ffe9e9,#ffb6c1);
fona attēls: lineārs gradients(#ffe9e9,#ffb6c1);
polsterējums: 5px 3px 6px 3px
piemale: auto;
pozīcija: relatīvs;
}
#navigation h2.navigation_head:after (
pozīcija: absolūta;
pa labi: 5 pikseļi;
krāsa: #550000;
saturs: "cssb";
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
kursors: rādītājs;
}
.active_navigation(
background-image: -webkit-gradient(lineārs,50% 0.50% 100%,color-stop(0%,#ffb6c1),color-stop(100%,#ffe9e9)) !svarīgi;
background-image: -webkit-linear-gradient(#ffb6c1,#ffe9e9) !important;
background-image: -moz-linear-gradient(#ffb6c1,#ffe9e9) !important;
background-image: -o-linear-gradient(#ffb6c1,#ffe9e9) !svarīgi;
background-image: linear-gradient(#ffb6c1,#ffe9e9) !important;
}
.active_navigation:after (
pozīcija: absolūta;
pa labi: 5 pikseļi;
saturs: "cssd" !svarīgi;
}
.navigation_body(
displejs: nav;
}
#navigation ul (
piemale: 0;
polsterējums: 0;
saraksta stila veids: nav;
}
* html #navigation ul li(
augstums: 1%;
}
#navigation div.navigation_body ul li (
piemale-kreisais: 10 pikseļi;
}
#navigation a (
fontu saime: "Times New Roman";
displejs: bloks;
krāsa: #918871;
polsterējums: 3 pikseļi
fona krāsa: #ffe3e0;
apmale-apakšā: 1 px ciets #fff;
teksta noformējums: nav;
}
#navigation a:hover(
krāsa: #585858;
fona krāsa: #ffb6cc;
}
Ja kāds pievērsa uzmanību, šeit es mēģināju izmantot saturu: +/- īpašums, kad / ir aizvērts atvērt izvēlni, bet varat pievienot attēlu vai jebkuru citu dizainu. Šeit varat redzēt piemēru tam, ko mēs darījām
Kā vienmēr, gatavs uzklausīt jautājumus un mēģināt uz tiem atbildēt. Visu to labāko, visu to labāko.
Šajā apmācībā mēs parādīsim, kā izveidot sānu nolaižamo izvēlni vēl vienkāršākai vietnes navigācijai. Šī izvēlne ir populāra mūsdienu tīmekļa dizaina tendence. Daudzas vietnes izmanto šāda veida izvēlni. Ar to jūs varat atbrīvoties no haosa projekta lapās, padarīt to lasāmāku, koncentrējot lietotāju uzmanību uz galveno saturu.
Tas ir lielisks veids, kā panākt minimālismu bez traucējumiem. Šodien šādu ēdienkarti veidosim paši.
Lai izveidotu navigācijas izvēlni, vispirms apskatīsim iestatījumus:
Vispirms jāielādē Normalize.css un jāpielāgo noklusējuma pārlūkprogrammas stili, pārliecinieties, ka izvēlne visās pārlūkprogrammās izskatās vienādi. Mēs izmantosim FontAwesome, lai parādītu bultiņu pirms izvēlnes vienumiem ar apakšvienumiem. Lai izvēlnē pārslēgtu klases, mēs ielādējam jQuery un pārvietojam visu pielāgoto jQuery kodu uz script.js. Pēdējā saite ir tīmekļa projekta galvenā tabula.
Hamburgera ikona
Hamburgera ikona ir izplatīts vietnes navigācijas atribūts. Tas bieži tiek izveidots ar ikonu fontu, piemēram, FontAwesome, taču šajā apmācībā mēs pievienosim animāciju, tāpēc mēs to veidosim no nulles. Mūsu hamburgera ikona ir span tags, kas satur trīs div klases, kas tiek atveidotas kā horizontālas joslas.
Stili izskatās šādi:
Pārslēgšanas poga ( pozīcija: fiksēta; platums: 44 pikseļi; augstums: 40 pikseļi; polsterējums: 4 pikseļi; pāreja: 0,25 s; z-indekss: 15; ) .toggle-button:hover ( kursors: rādītājs; ) .toggle-button .menu -josla ( pozīcija: absolūtā; apmales rādiuss: 2 pikseļi; platums: 80%; pāreja: 0,5 s; ) .toggle-button .menu-bar-top ( apmale: 4px solid #555; apmale-apakšā: nav; augšā: 0. -apakšā ( apmale: 4px solid #555; border-top: none; top: 22px; ) .button-open .menu-bar-top ( transform: rotate(45deg) translate(8px, 8px); pāreja: .5s; ) .button-open .menu-bar-middle ( pārveidot: tulkot(230px); pāreja: .1s atvieglot; necaurredzamība: 0; ) .button-open .menu-bar-bottom ( pārveidot: pagriezt (-45°) tulkot (8 pikseļi, -7 pikseļi); pāreja: 0,5 s; )
Ikonai ir fiksēta pozīcija, un tā nemainās, ritinot lapu. Tam ir arī z-indekss 15, kas nozīmē, ka tas vienmēr būs virs citiem elementiem. Sastāv no trim joslām, no kurām katrai ir citi stili. Tāpēc mēs pārvietosim katru joslu uz .menu-bar klasi. Pārvietojiet pārējos stilus uz atsevišķas klases. Burvība notiek, kad mēs pievienojam citu klasi, kas ir publiska. Mēs to pievienojam ar jQueryšādā veidā:
$(document).ready(function() ( var $toggleButton = $(.toggle-button"); $toggleButton.on("klikšķis", funkcija() ( $(this).toggleClass("poga-open" ; ) ) ) );
Tiem, kas nav pazīstami ar jQuery, mēs inicializējam mainīgo ar $toggleButton, kurā ir mūsu ikona. Mēs to uzglabājam mainīgajā bez vajadzības JavaScript lietojums. Pēc tam mēs izveidojam notikumu uztvērēju, kas klausās ikonu klikšķus. Katru reizi, kad lietotājs noklikšķina uz hamburgera ikonas, notikumu uztvērējs aktivizē funkciju toggleClass(), kas pārslēdz .button-open klasi.
Kad .button-open klase ir pievienota, mēs varam to izmantot, lai mainītu elementu parādīšanas veidu. Mēs izmantojam CSS3 translate() un rotate() funkcijas, lai augšējā un apakšējā josla pagrieztos par 45 grādiem, bet vidējā josla pāriet pa labi un pazūd. Šeit ir animācijas, kuras varat pielāgot:
Nolaižamā navigācijas izvēlne
Tagad, kad jums ir sava hamburgera ikona, padarīsim to noderīgu un izveidosim nolaižamo izvēlni, noklikšķinot uz tās. Lūk, kā izskatās izvēlnes marķējums:
Mēs šobrīd neiedziļināsimies par katru šīs izvēlnes stilu, bet koncentrēsimies uz dažiem. svarīgi punkti. Pirmkārt, tā ir div un .menu-wrap klase. Apskatiet viņa stilus:
Izvēlnes aplaušana ( fona krāsa: #6968AB; pozīcija: fiksēta; augšdaļa: 0; augstums: 100%; platums: 280 pikseļi; piemale-kreisais: -280 pikseļi; fonta izmērs: 1em; fonta svars: 700; pārpilde: automātiska ; pāreja: 0,25 s; z indekss: 10; )
Pozīcija ir fiksēta, tāpēc, ritinot lapu, izvēlne vienmēr paliek tajā pašā pozīcijā. 100% augstums ļauj izvēlnei aizņemt visu lapas vertikālo vietu. Ņemiet vērā, ka piemales kreisais lauks ir iestatīts uz negatīvu skaitli, kas vienāds ar izvēlnes platumu. Tas nozīmē, ka izvēlne pazudīs no skata loga. Lai tas atkal būtu redzams, mēs izveidojam citu pārslēgšanas klasi, izmantojot jQuery. Mūsu JavaScript fails izskatīsies šādi:
$(dokuments).ready(function() ( var $toggleButton = $(.toggle-button"), $menuWrap = $(.menu-wrap"); $toggleButton.on("klikšķis", funkcija() ( $(this).toggleClass("poga-atvērt"); $menuWrap.toggleClass("izvēlne-show"); ) ); ) );
Pievienojiet vēl vienu $menuWrap mainīgo, kas satur izvēlnes iesaiņojumu. Izmantojiet to pašu notikumu apdarinātāju, ko izveidojām iepriekš. Tikai šoreiz mēs pārslēdzam divas klases: vienu pogai un otru izvēlnes iesaiņojumam. Menu-show klases kreisās piemales vērtība ir 0, tādējādi tiks pievienots ēnas efekts.
Izvēlnes rādīšana (mala pa kreisi: 0; lodziņa ēna: 4 pikseļi 2 pikseļi 15 pikseļi 1 pikseļi #B9ADAD; )
Apakšizvēlnes un saites
Varat pamanīt, ka vienam no saraksta vienumiem ir .menu-item-has-childs klase, kurā ir apakšizvēlne. Tāpat tieši zem saites ir span tags ar klasi .sidebar-menu-arrow.
span ir::after pseidoelements un satur FontAwesome bultiņu. Pēc noklusējuma apakšizvēlne ir paslēpta un būs redzama tikai tad, kad noklikšķināsit uz bultiņas. Lūk, kā mēs to varam izdarīt, izmantojot jQuery:
$(dokuments).ready(function() ( var $sidebarArrow = $(.sidebar-menu-arrow"); $sidebarArrow.click(function() ( $(this).next().slideToggle(300); ) ) ) );
Noklikšķinot uz bultiņas, mēs izsaucam funkciju, kas savukārt mērķē uz nākamo elementu tūlīt pēc span (mūsu gadījumā apakšizvēlnē) un padara to redzamu. Funkcija, kuru mēs izmantojam, ir slideToggle. Tas liek elementam parādīties un pazust. Funkcijai mūsu piemērā ir viens parametrs - animācijas ilgums.
Izvēlnes vienumiem piemērā ir kursora novietošanas efekts. Tas tiek izveidots, izmantojot::after pseidoelementu. Kods izskatās šādi:
Izvēlnes sānjosla li > a::after ( saturs: ""; displejs: bloks; augstums: 0,15 em; pozīcija: absolūts; augšā: 100%; platums: 102%; pa kreisi: 50%; pārveidot: tulkot (-50% ); fona attēls: lineārs gradients (pa labi, caurspīdīgs 50,3%, #FFFA3B 50,3%); pāreja: fona pozīcija 0,2 s .1 s atvieglojums; fona izmērs: 200% automātisks; ) .menu-sidebar li > a:hover::after (fona pozīcija: -100% 0; )
::after pseidoelements satur bloka līmeņa elementu katras saites apakšā ar pilnu platumu un 0,15 em augstumu. Tas viss izskatās kā pasvītrojums. Īpatnība ir tāda, ka mēs ne tikai pielietojam līnijai fona krāsu, bet arī izmantojam lineārā gradienta() funkciju. fona attēls. Lai gan šī funkcija ir paredzēta krāsu gradientu izveidošanai, mēs varam mainīt krāsu, norādot vēlamo procentuālo daļu.
Izvēlnes sānjosla li > a::after ( fona attēls: lineārs gradients (pa labi, caurspīdīgs 50,3%, #FFFA3B 50,3%); )
Puse no līnijas šeit ir caurspīdīga, bet otra puse ir dzeltena. Padarot fona izmēru 200%, mēs dubultojam savas kastes platumu. Tagad caurspīdīgā daļa aizņem visu saites platumu, un dzeltenā daļa pārvietojas pa kreisi un kļūst neredzama. Mēs mainām kursora fona pozīciju uz -100%. Tagad kļūst redzama dzeltenā daļa, un caurspīdīgā daļa ir paslēpta.
Caurspīdīgās daļas vietā varat izmantot jebkuru citu krāsu. Varat arī eksperimentēt ar gradientiem.
Katrs no mūsu aplūkotajiem elementiem darbojas kopumā. Jūs varat izveidot šādu izvēlni, izmantojot jebkuru vietnes dizainu no TemplateMonster kolekcijas. Kā redzat, tas ir vieglāk, nekā jūs varētu domāt. Veiksmi profesionālu un lietotājam draudzīgu vietņu veidošanā!
