Kā izveidot sānu nolaižamo izvēlni. Kā izveidot nolaižamo izvēlni, izmantojot CSS un HTML
Mihails sestdien, 20.09.2014 - 12:28
Kaut kā mans komentārs nav redzams - es to dublēju:
===========
Paldies, bet man (zem Int.Expl-8) izvēlne nenolaižas. Tie. Rinda "ul. nav li:hover ul (displejs: bloķēt;)"
Pastāsti man, kas par lietu?
Ir vēlmes materiāla prezentācijai:
Būtu jauki šajā rindā (ul.aaaaa li:hover ul (displejs: bloks;)) paskaidrot, kura tās daļa ir atbildīga par “izvēlnes nolaižamo izvēlni” un kura daļa ir atbildīga par vienumu slēpšanu dziļāk. ligzdošanas līmenis
Būtu jauki katru rindiņu piemēros sniegt ar komentāru par to, ko tā dara.
Jo īpaši nav skaidrs, kāpēc līnija "
Pirms šīs rindas ir 2 rindiņas, kas šķietami nav svarīgas (Sākums
un vertikālo izvēlni Skatīt). Personai, kas nepārzina jauno materiālu (tas ir, tieši to, par kuru jūs rakstījāt), ir nepieciešams saprast, ka šīs rindas nolaižamajai izvēlnei nav vajadzīgas. Vai arī tie joprojām ir vajadzīgi?
Jūsu piemēra galvenē ir 3 rindiņas. No tiem tikai viens attiecas uz tēmu (iestata CSS faila nosaukumu), bet pārējie 2 neattiecas. Tas arī apgrūtina materiāla apgūšanu. Turklāt manā datorā šāda galvene parasti noved pie nepareiza teksta attēlojuma, jo man ir jāiestata nevis “utf-8”, bet gan “Windows-...”.
Piemērā nav skaidrs, ka vārdi "style.css", "block-menu" un "nav" nav atslēgvārdi, bet gan lietotāja definēti nosaukumi. Es to uzzināju eksperimentāli
Īsāk sakot, es vēlētos, lai piemēros būtu tikai tas, kas ir aktuāls, un lai rindiņas, kuru konteksts ir neskaidras, tiktu rakstītas tieši par to, kāda ir to “atbilstība”.
- Piesakieties, lai atstātu komentārus
Oļegs Sestdien, 20.09.2014 - 23:50
Apjomīgākais komentārs!!!
Komentāri tiek apstrādāti tikai pēc regulēšanas, tāpēc jūs neredzējāt savu komentāru uzreiz.
Es centīšos atbildēt uz visu. Sāksim ar jautājumu, kāpēc tas ir šeit. Nu no darba versijas noplūda divas saites.
Par nepareizu teksta attēlojumu. Jūs varējāt lasīt un komentēt šo lapu, neskatoties uz to, ka tās kodējums ir tāds pats kā ziņojuma piemērā.
Šis ieraksts nav paredzēts absolūtiem iesācējiem un tika uzrakstīts pēc abonentu pieprasījuma. Ja jūs izskaidrosit pilnīgi visu, jums būs jārunā par klasēm un identifikatoriem, blokiem, pozicionēšanu, pseido-selektoriem, kaskādi utt. Tas būs diezgan garš raksts un, galvenais, bezjēdzīgs.
ul.nav li:hover > ul (displejs: bloks;) parādīs iepriekš paslēpto vienumu. Ja ņemam to burtu pa burtam, tad (šeit paralēli skatāmies kodu), virzot kursoru virs izvēlnes vienuma (ul.nav li), darbosies sekojošais: novietojiet kursoru un būs redzams pirmais ligzdotais saraksts >ul. uz to, ka displeja vērtība mainīsies no nevienas uz bloku.
2016. gada 2. jūlijs
Šodien vertikālas nolaižamās izvēlnes izveide, izmantojot css, nav problēma, un es šodien parādīšu, kā tas tiek darīts, absolūti bez skriptiem.
Tā nav problēma, tā nav problēma, bet šodien pēkšņi sapratu, ka esmu aizmirsis, kā to izdarīt, es vienkārši sen neesmu to darījis. Nu, labi, pēc vienas nodarbības noskatīšanās es šo problēmu pilnībā izlaboju, tāpēc padalīšos ar jums pēc iespējas sīkāk, kā to visu īstenot. Starp citu, ja vēlies uzzināt, kā top parasta vertikālā izvēlne (skaista), tad paskaties.
Pilns uzcenojums
Es nolēmu, ka mūsu vertikālajā izvēlnē būs četri vienumi. Novietojot kursoru virs katra vienuma, tiks parādīta trīs apakšvienumu nolaižamā apakšizvēlne. Vai tu saproti manu domu? Tas padarīja marķējumu nedaudz apgrūtinošu, tāpēc šeit tas ir:
Principā šeit viss ir ļoti vienkārši. Visa izvēlne atrodas navigācijas konteinerā, kur mēs izveidojam sarakstu un tā vienumus. Bet, tā kā mūsu izvēlne ir divu līmeņu, katrā saraksta vienībā (li) mēs papildus ievietojam sarakstu ar otro-ul klasi (piemēram, ligzdotu ul). Klases nosaukumam nav nozīmes. Un mēs to darām ar katru vienumu. Ja rūpīgi izpētīsit marķējumu, izmantojot viena punkta piemēru, jūs visu sapratīsit, šeit tas atkal ir:
Tas nozīmē, ka vienumā ievietojam sarakstu, kas savukārt satur ligzdotus vienumus. Tas arī viss ar html marķējumu, pāriesim uz css, kur viss ir daudz interesantāk.
Mūsu ēdienkartes dizains
Es izdarīšu dažus pamata iestatījumus. Jo īpaši jums ir jānoņem marķieris no izvēlnes vienumiem un jāiestata tā augstums. Es arī papildus atiestatīšu visu elementu polsterējumu. Jums tas nav jādara, tas nav obligāti, tikai atcerieties, ka pēc noklusējuma ligzdotajam sarakstam būs atkāpe.
*( piemale: 0; polsterējums: 0; ) #nav( augstums: 70 pikseļi; ) #nav ul( saraksta stils: nav; )
Šie ir pirmie noteikumi, kas tiek nosūtīti uz stila lapu. Apskatīsim, kā izskatās mūsu ēdienkarte:
Briesmīgi, vai ne? Bet tas ir labi, mēs to tūlīt izlabosim!
Sekojošie stila noteikumi ir ļoti svarīgi no estētiskā viedokļa – mūsu ēdienkarte kļūs daudz skaistāka. Šeit ir visi noteikumi:
#nav > ul > li(platums: 180px; pozīcija: relatīvs; ) #nav li a(displejs: bloks; fons: #ccc; apmale: 1px solid #333; krāsa: #fff; polsterējums: 15px; ) #nav li a:hover( fons: #999; )
Ko es šeit esmu iestatījis? Pirmkārt, es norādīju galveno saraksta vienumu platumu un relatīvo novietojumu. Tas ir nepieciešams, lai pēc tam veiktu apakšizvēlnes absolūto pozicionēšanu. Tālāk mēs pielāgojam saišu izskatu. Izgatavojam blokveida, krāsojam vēlamajā krāsā, pievienojam polsterējumu, rāmi utt. Neobligāti. Mēs arī mainīsim fona krāsu, virzot kursoru. Visu šo manipulāciju rezultāts: 
Es apgriezu ekrānuzņēmumu. Ja tu visu darīsi pēc manis, tad tev būs visi punkti un apakšpunkti pēc kārtas. Tas tā, tagad izskats nav pretīgs, varat koncentrēties uz izvēlnes nolaižamo izvēlni!
Vertikālas izvēlnes nolaižamās izvēlnes izveide
Pagaidām visas ligzdotās izvēlnes ir redzamas. Tas ir nepareizi, pēc noklusējuma tiem nevajadzētu atrasties lapā, bet tiem ir jāparādās tikai virs kursora. Tas nozīmē, ka, virzot kursoru virs konkrēta vienuma, izvēlnei vajadzētu parādīties tikai tam. Vai būtība ir skaidra?
Sākumā mēs paslēpsim visas savas apakšizvēlnes, taču pirms tam tās ir jānovieto tā, lai tās neatrastos zem galvenā vienuma, bet gan pa kreisi no tā. Lai to izdarītu, uzrakstīsim šo:
#nav li .second-ul( displejs: bloks; pozīcija: absolūts; pa kreisi: 100%; augšā: 0; )
Tas nozīmē, ka ligzdotajam sarakstam mēs norādām absolūto pozicionēšanu un nobīdi pa kreisi par 100% no platuma no vecākbloka platuma (saraksta vienums). Un, cik zināms, tā platums ir 180 pikseļi. Apakšizvēlnes augstumam jābūt vienā līmenī. Pēc šīm manipulācijām jums vajadzētu iegūt kaut ko līdzīgu: 
Tagad ligzdoto sarakstu stilos aizstājiet display: block ar displeju: none . Pēc tam apakšizvēlnes pazudīs no ekrāna, kas mums ir nepieciešams. Tuvojamies svarīgākajam posmam - atbiršanas ieviešanai css. Lai to izdarītu, mēs rīkojamies šādi:
#nav li:hover .second-ul( displejs: bloķēt; )
Tas ir ļoti vienkārši, ar šo līniju jums pietiek! Šeit mēs būtībā sakām pārlūkprogrammai: kad virzāt kursoru virs vienuma galvenajā sarakstā, padariet apakšsarakstu redzamu!
Pārbaudīsim. Norādiet uz katru vienumu un pārliecinieties, vai katram vienumam tiek parādīta unikāla apakšizvēlne. Tas izskatās šādi: 
Un tā būs katrai precei. Ja jūs visu izdarījāt pēc manis, tad notiks tieši tā. Tomēr es arī pievienoju platumu ligzdotajiem saraksta vienumiem, lai tie būtu tikpat lieli kā galvenajiem:
#nav li li( platums: 180 pikseļi; )
Tad jūs varat pēc saviem ieskatiem mainīt visas šīs izvēlnes izskatu, pievienot jaunus vienumus utt. Tas viss ir ļoti vienkārši izdarāms, tiklīdz jūs zināt tehnoloģiju. Un es jums parādīju tehnoloģiju. Ja jums ir kādi jautājumi, varat tos rakstīt komentāros, bet šeit es beidzu rakstu.
No autora: Sveiki visiem. Kādu iemeslu dēļ tīmekļa pārziņi nolaižamās izvēlnes saista ar skriptiem, taču ilgu laiku šādu navigāciju var veikt pilnīgi vienkārši, izmantojot tīru CSS. Turklāt šāda ēdienkarte nebūs sliktāka. Šodien es jums parādīšu, kā izveidot nolaižamo izvēlni css. Padalīšos, tā teikt, receptē.
Nodarbību plāns un mūsu ēdienkartes izkārtojums
Kopumā vispirms izlemsim, kā veidosim pašu ēdienkarti. HTML5 standarta veids ir izveidot to navigācijas konteinerā, izmantojot sarakstu ar aizzīmēm. Darīsim tieši tā. Mēs vēlāk noņemsim marķierus, izmantojot css; tie mums izvēlnē vispār nav vajadzīgi.
Patiesībā es tūlīt uzrakstīšu marķējumu ar ligzdotiem sarakstiem html. Tas ir, mūsu saraksts būs divlīmeņu - tajā būs citi saraksti. Proti, katrai precei ir 1 saraksts, kas veidos nolaižamo izvēlni.
Šeit ir svarīgs aspekts, proti, jums var nebūt nepieciešams izveidot nolaižamo izvēlni katru vienumu, bet tikai dažus. Nav problēmu, vienumos bez nolaižamām izvēlnēm mēs vienkārši neveidojam ligzdotus sarakstus.
Patiesībā šeit tas ir, viss marķējums:
< nav id = "nav" > < ul > < li > < a href = "#" >1. punkts< / a > < ul class = "second" > < li > < a href = "#" >Apakšklauzula< / a > < / li > < li > < a href = "#" >Apakšklauzula< / a > < / li > < li > < a href = "#" >Apakšklauzula< / a > < / li > < / ul > < / li > < li > < a href = "#" >2. punkts< / a > < ul class = "second" > < li > < a href = "#" >Apakšklauzula< / a > < / li > < li > < a href = "#" >Apakšklauzula< / a > < / li > < li > < a href = "#" >Apakšklauzula< / a > < / li > < / ul > < / li > < li > < a href = "#" >3. punkts< / a > < ul class = "second" > < li > < a href = "#" >Apakšklauzula< / a > < / li > < li > < a href = "#" >Apakšklauzula< / a > < / li > < li > < a href = "#" >Apakšklauzula< / a > < / li > < / ul > < / li > < li > < a href = "#" >4. punkts< / a > < ul class = "second" > < li > < a href = "#" >Apakšklauzula< / a > < / li > < li > < a href = "#" >Apakšklauzula< / a > < / li > < li > < a href = "#" >Apakšklauzula< / a > < / li > < / ul > < / li > < / ul > < / nav > |
Es saprotu, ka tas ir milzīgs. Šī ir ligzdoto sarakstu problēma, jo jums ir jāraksta daudz koda. Bet paturiet prātā, ka mēs izvirzām 4 galvenos punktus, un katram būs nolaižamā izvēlne.
Patiesībā es visai navigācijai piešķīru navigācijas identifikatoru un visiem ligzdotajiem sarakstiem stila klasi sekundē, lai saprastu, ka tie ir ligzdoti.
Lieliski, mums ir sagatavots marķējums, varat apskatīt rezultātu:
Jā, tas izskatās šausmīgi. Bet tagad mēs iespējosim css, un pēc dažām minūtēm mūsu navigācija tiks pārveidota. Strādāsim.
CSS stilu rakstīšana
Pirmā lieta, ko es darīšu, ir atiestatīt visu polsterējumu uz noklusējuma visiem elementiem. Tās mums tikai traucēs; labāk ielikt ievilkumus pašiem vēlāk, kur tas ir nepieciešams.
*( piemale: 0; polsterējums: 0; )
piemale: 0; polsterējums: 0; |
#nav( augstums: 70 pikseļi; ) #nav ul( saraksta stils: nav; )
#nav( augstums: 70 pikseļi; #navul( saraksta stils: nav; |
Tagad mums faktiski jāizlemj, kāda būs mūsu ēdienkarte. Horizontāli vai vertikāli? Es iesaku vispirms veikt horizontālo un redzēt visu tā piemērā. Lai to izdarītu, jums jāraksta šādi stili:
#nav > ul > li( pludiņš: pa kreisi; platums: 180 pikseļi; pozīcija: relatīvs; )
#nav > ul > li( pludiņš: pa kreisi; platums: 180 pikseļi; pozīcija: relatīvs; |
Ņemiet vērā, ka, izmantojot zīmi >, mēs atsaucamies uz saraksta vienumiem, kas ir tieši ligzdoti ul, kas ir tieši ligzdoti navigācijā. Tas ir ļoti svarīgi, jo tas novērš stila piemērošanu ligzdotiem saraksta vienumiem. Fakts ir tāds, ka, pēc manas idejas, galvenā saraksta vienumi atradīsies horizontāli, bet ligzdotajos - vertikāli.
Bet jūs, protams, varat darīt citādi, saskaņā ar savu ideju. Varat pārliecināties, ka visi punkti atrodas vienā rindā.
Jebkurā gadījumā, es ceru, ka jūs varat saprast iepriekš minēto kodu. Tas liek galvenos saraksta vienumus pabīdīt pa kreisi, lai tie visi parādītos vienā rindā, lai gan tie ir bloka elementi. Es viņiem arī norādīju skaidru platumu un relatīvo novietojumu.
Kāpēc pozicionēšana? Tas ir nepieciešams, lai pēc tam absolūti pozicionētu ligzdotos sarakstus. Ja esat studējis pozicionēšanu CSS, tad droši vien zināt, ka, ja blokam piešķirat relatīvo pozicionēšanu, tad visus tajā esošos elementus var novietot absolūti šajā konkrētajā blokā, nevis visā pārlūkprogrammas logā.
Tikmēr šeit ir tas, kas mums ir līdz šim:
No šī ekrānuzņēmuma jau varat iedomāties aptuveno rezultātu. Protams, mums joprojām ir skaisti noformējami priekšmeti, lai, skatoties navigāciju, acis nelūgtos pēc žēlastības.
#nav li a(displejs: bloks; fons: #90DA93; apmale: 1px solid #060A13; krāsa: #060A13; polsterējums: 8px; teksta līdzināšana: centrā; teksta noformējums: nav; ) #nav li a:hover( fons: #2F718E;)
#navli a( displejs: bloks; fons : #90DA93; apmale : 1px solid #060A13; krāsa : #060A13; polsterējums: 8px; teksts - līdzinājums: centrā; teksts - dekorēšana : nav ; #nav li a:hover( fons : #2F718E; |
Pirmkārt, pašas saites ir jābloķē. Tas ir nepieciešams, lai polsterējums darbotos un visas īpašības tiktu pareizi lietotas. Tālāk es precizēju fona krāsas, tekstu, rāmja parametrus, iekšējo polsterējumu un centrētu teksta līdzinājumu. Visbeidzot es atceļu saišu pasvītrojumu.
Visi šie parametri nav jānorāda tā, kā es to darīju. Krāsas var izvēlēties patvaļīgi, izveidot citu rāmi vai to neizmantot vispār, atkāpes var samazināt vai palielināt.
Lūdzu, ņemiet vērā, ka šajā gadījumā mēs neizmantojām zīmi >, tāpēc iepriekš minētie noteikumi attieksies uz visām saitēm, tostarp tām, kas atrodas ligzdotajās rindkopās. Tātad tagad mums ir šādi:
Lieliski, bet jūs saprotat, ka apakšvienības nedrīkst būt redzamas, tām ir jāatveras, kad virzāt kursoru virs vēlamās preces. Bez tā mūsu ēdienkarte izskatās kā galds. Nu, ir pienācis laiks paslēpt ligzdotos vienumus.
#nav li .second( displejs: nav; pozīcija: absolūts; augšā: 100%; )
#nav li .second( displejs: nav; pozīcija: absolūta; augšā: 100%; |
Pirmkārt, mēs slēpjam pilnībā ligzdotos sarakstus. Otrkārt, mēs piešķiram viņiem absolūto pozicionēšanu un augšējo koordinātu: 100%. Tas nozīmē, ka nolaižamā izvēlne būs skaidri redzama zem galvenā vienuma, kuram tā pieder, nepārprotami 100% no šī vienuma augstuma.
Tagad mēs redzam tikai galveno tīmekļa lapas izvēlni, kas mums ir nepieciešama.
Īstenosim atbirumu
Mums atliek pats svarīgākais – realizēt pašu kritienu. Tajā nav nekā sarežģīta, skatiet šo kodu:
#nav li:hover .second( displejs: bloks; )
#nav li:hover .second( displejs: bloks; |
Šis kods darbosies nevainojami. Novietojot kursoru virs galvenās izvēlnes vienuma, būs redzams apakšsaraksts. Turklāt tikai tas saraksts, kas ir ligzdots vienumā, virs kura virzās kursors.
Ir tikai viena neliela problēma — ligzdoto vienumu platums neatbilst galveno vienumu platumam. Bet to var ļoti viegli atrisināt, pievienojot atbilstošus stilus:
#nav li li( platums: 180 pikseļi; )
#navlili( platums: 180 pikseļi; |
Lūk, problēma atrisināta:
Viss strādā perfekti. Novietojot kursoru virs galvenā vienuma, tiek parādīta tam atbilstoša nolaižamā izvēlne. Ja pārvietojat kursoru uz sāniem, tas pazūd. Ja pārvietojat kursoru uz pašiem ligzdotajiem vienumiem, varat noklikšķināt uz tiem un pāriet uz vēlamo vietnes sadaļu. Tādējādi mēs esam izveidojuši jums ļoti vienkāršu un vieglu nolaižamo izvēlni bez skriptiem.
Izvēlnes pārvēršana vertikālā režīmā
Labi, mēs esam pilnībā izdomājuši horizontālo navigāciju, bet turklāt vertikālā navigācija ļoti bieži ir atrodama vietnēs, un tā var būt arī nolaižamā izvēlne. Faktiski izvēlni mainīt no horizontālas uz vertikālu ir ļoti vienkārši; mums ir jāmaina tikai dažas koda rindiņas.
Pirmkārt, jums būs jānoņem pludiņš:pa kreisi no galvenajiem saraksta vienumiem. Tieši šī īpašība nodrošina, ka mūsu vienumi tiek parādīti vienā rindā, bet kāpēc mums tas ir vajadzīgs, ja navigācijai ir jābūt vertikālai?
Tagad atliek tikai mainīt noteikumus #nav li .second selektoram, tas ir, ligzdotajiem sarakstiem, proti, tie ir jāizvieto nedaudz savādāk. Kā šis:
#nav li .second( displejs: nav; pozīcija: absolūts; pa kreisi: 100%; augšā: 0; )
#nav li .second( displejs: nav; pozīcija: absolūta; pa kreisi: 100%; augšā: 0; |
Tas ir, ir nepieciešams reģistrēt divas koordinātas, nevis vienu. Pirmkārt, horizontālās navigācijas gadījumā es teicu, ka, kā plānots, apakšizvēlnes vienumus vajadzētu parādīt zem galvenajiem elementiem. Vertikālas izvēlnes gadījumā tas nav piemērots - vienumus vajadzētu attēlot sānos.
Tāpēc mēs mainām augšējo: 100% uz kreiso: 100%. Turklāt mums ir vajadzīga arī augšējā koordināte. Mēs to iestatām uz 0, lai apakšizvēlne būtu tādā pašā līmenī kā vienums, kuram tā atbilst.
Tas tā, tagad viss darbojas kā nākas. Jūs varat to pārbaudīt. Kā redzat, es nemeloju, sakot, ka man būs jāpārraksta tikai dažas koda rindiņas.
Horizontāla izvēlne ar vairākiem līmeņiem
Izmantojot to pašu pieeju, vajadzības gadījumā varat izveidot vairāk izvēlnes līmeņu. Piemēram, izveidosim sarakstu galvenās izvēlnes ceturtajam vienumam, kas tiks ievietots vienā no apakšvienumiem.
Uzdevums
Izveidojiet nolaižamo izvēlni, izmantojot CSS un HTML rīkus.
Risinājums
Vispirms izveidosim sarakstu, novietosim to horizontāli un veidosim tā izskatu. Šī būs galvenā izvēlne, un pēc tam mēs izveidosim nolaižamo izvēlni tās vienumiem.
Mēs nonācām pie šāda saraksta:
Attēls 1. Sagatavošanas darbi.
Lūdzu, ņemiet vērā: saites stils mainās, virzot kursoru virs tās. Tas tiek īstenots, izmantojot :hover pseidoklasi. Šī pseidoklase norāda elementa stilu, kad kursors atrodas virs tā, nenospiežot peles pogu. Ja ir pogas nospiešana, tā ir cita pseidoklase.
Tagad pāriesim pie mūsu problēmas risināšanas. Izveidosim vienumam "Pakalpojumi" nolaižamo izvēlni, pievienosim nolaižamās sadaļas: "Pirkt", "Pārdot", "Mainīt". Šie vienumi ir atsevišķs saraksts, kas ir ligzdots tagā
Izveidosim šo sarakstu un pievienosim stilus, kas raksturo tā izskatu.
Tagad mums ir šāds saraksts:
2. attēls. Sagatavošanas darbi. Protams, tas nav tas, kas mums vajadzīgs. Pēc noklusējuma šim sarakstam ir jābūt paslēptam un redzamam tikai virs kursora. Elementu var paslēpt, izmantojot kārtulas kārtulu (displejs : nav ). Kad virzāt kursoru, tas ir jāaktivizē, atkal padarot noteikumus redzamus (displejs: iekļauts bloks).
Tagad mūsu izvēlne pazūd un izzūd, taču mums ir jāparādās esošajiem elementiem, nemainot jau iestatītās esošo bloku robežas.
Lai elements tiktu parādīts, neietekmējot citu elementu rādīšanu, tas ir jānovieto ar absolūto vērtību.
Ko mēs šeit darījām:
- pozicionēšanas noteikums (pozīcija : relatīvs ;). Tas tiek darīts tā, lai ligzdotā saraksta absolūto pozicionēšanas koordinātu ziņošana sāktos no šī bloka augšējā kreisā stūra, nevis no ekrāna stūra.
- Pievienots vecākelementam
- likums (augstums: 20 pikseļi ;). Mēs iestatījām tā augstumu, lai būtu ērtāk novietot nolaižamo sarakstu.
- Nolaižamajā sarakstā iestatiet absolūto pozicionēšanu (pozīcija: absolūtā ;) un iestatiet koordinātas: augšā un pa kreisi .
Nolaižamā izvēlne tagad darbojas pareizi.
3. attēls. Galīgā versija. Protams, šeit jūs varat padarīt nolaižamo izvēlni skaistāku, taču mūsu uzdevuma vajadzībām ar to pietiek.
Izglītības problēma ir atrisināta. Uz redzēšanos.
Ja jūsu vietne ir vairāk nekā tikai viena tīmekļa lapa, jums vajadzētu apsvērt iespēju pievienot navigācijas joslu (izvēlni). Izvēlne ir vietnes sadaļa, kas paredzēta, lai palīdzētu apmeklētājiem pārvietoties vietnē. Jebkura izvēlne ir saišu saraksts, kas ved uz vietnes iekšējām lapām. Vienkāršākais veids, kā savai vietnei pievienot navigācijas joslu, ir izveidot izvēlni, izmantojot CSS un HTML.
Vertikālā izvēlne
Pirmais vertikālās izvēlnes izveides solis ir izveidot sarakstu ar aizzīmēm. Mums būs arī jāspēj identificēt sarakstu, tāpēc mēs tam pievienosim id atribūtu ar identifikatoru "navbar". Katrs elements
Mūsu nākamais uzdevums ir atiestatīt noklusējuma sarakstu stilus. Mums ir jānoņem ārējais un iekšējais polsterējums no paša saraksta un aizzīmes no saraksta vienumiem. Pēc tam iestatiet vēlamo platumu:
#navbar ( piemale: 0; polsterējums: 0; saraksta stila veids: nav; platums: 100 pikseļi; )
Tagad ir pienācis laiks izveidot pašas saites. Mēs tiem pievienosim fona krāsu, mainīsim teksta parametrus: krāsu, fonta lielumu un svaru, noņemsim pasvītrojumu, pievienosim nelielas atkāpes un no jauna definēsim displeju. elements no iekļautās uz bloku. Turklāt saraksta vienumiem ir pievienoti kreisie un apakšējie rāmji.
Mūsu izmaiņu vissvarīgākā daļa ir iekļauto elementu pārdefinēšana, lai bloķētu elementus. Tagad mūsu saites aizņem visu saraksta vienumu pieejamo vietu, tas ir, lai sekotu saitei, mums vairs nav jāvirza kursors tieši virs teksta.
#navbar a ( fona krāsa: #949494; krāsa: #fff; polsterējums: 5 pikseļi; teksta noformējums: nav; fonta svars: treknraksts; apmale-kreisais: 5 pikseļi, ciets #33ADFF; displejs: bloks; ) #navbar li ( apmale-kreisā: 10 pikseļi viengabalains #666; apmale apakšā: 1 px solid #666; )
Mēs esam apvienojuši visu iepriekš aprakstīto kodu vienā piemērā, tagad, noklikšķinot uz mēģinājuma pogas, varat doties uz piemēra lapu un redzēt rezultātu:
Izmēģiniet »
Novietojot peles kursoru virs izvēlnes vienuma, tā izskats var mainīties, piesaistot lietotāja uzmanību. Jūs varat izveidot šādu efektu, izmantojot pseido-class:hover.
Atgriezīsimies pie iepriekš apspriestā vertikālās izvēlnes piemēra un pievienosim stila lapai šādu noteikumu:
#navbar a:hover (fona krāsa: #666; apmale pa kreisi: 5px solid #3333FF; ) Izmēģiniet »
Horizontālā izvēlne
Iepriekšējā piemērā apskatījām vertikālo navigācijas joslu, kas visbiežāk ir atrodama vietnēs pa kreisi vai pa labi no galvenā satura apgabala. Tomēr arī izvēlnes ar navigācijas saitēm bieži atrodas horizontāli tīmekļa lapas augšdaļā.
Horizontālu izvēlni var izveidot, veidojot parastu sarakstu. Parādīt elementu īpašumu
Lai izvēlnes vienumus novietotu horizontāli, vispirms izveidojiet sarakstu ar aizzīmēm ar saitēm:
Uzrakstīsim dažus mūsu saraksta noteikumus, kas atiestatīs sarakstiem izmantoto noklusējuma stilu, un no jauna definēsim saraksta vienumus no bloka uz iekļautu:
#navbar ( piemale: 0; polsterējums: 0; saraksta stila veids: nav; ) #navbar li ( displejs: iekļauts; ) Izmēģiniet »
Tagad viss, kas mums jādara, ir definēt mūsu horizontālās izvēlnes stilu:
#navbar ( piemale: 0; polsterējums: 0; saraksta stila veids: nav; apmale: 2px solid #0066FF; apmales rādiuss: 20px 5px; platums: 550px; teksta līdzinājums: centrs; fona krāsa: #33ADFF; ) #navbar a ( krāsa: #fff; polsterējums: 5px 10px; teksta noformējums: nav; fonta svars: treknrakstā; displejs: iekļauts bloks; platums: 100 pikseļi; ) #navbar a:hover (apmales rādiuss: 20px 5px ; fona krāsa: #0066FF; ) Izmēģiniet »
Nolaižamā izvēlne
Izvēlnē, ko mēs izveidosim, būs galvenās navigācijas saites, kas atrodas horizontālajā navigācijas joslā, un apakšvienumi, kas parādīsies tikai tad, kad peles kursors tiks novietots virs izvēlnes vienuma, uz kuru attiecas šie apakšvienumi.
Vispirms mums ir jāizveido mūsu izvēlnes HTML struktūra. Galvenās navigācijas saites izvietosim aizzīmju sarakstā:
Mēs ievietosim apakšvienumus atsevišķā sarakstā, ligzdojot to elementā
Izmēģiniet »
Tagad sāksim rakstīt CSS kodu. Pirmkārt, jums ir jāpaslēpj saraksts ar apakšvienumiem, izmantojot displeju: nav; deklarācija, lai tie netiktu rādīti tīmekļa lapā visu laiku. Lai parādītu apakšvienumus, tas ir nepieciešams, virzot kursoru virs elementa
#navbar ul ( displejs: nav; ) #navbar li:hover ul ( displejs: bloķēt; )
Mēs noņemam noklusējuma atkāpes un marķierus no abiem sarakstiem. Sarakstu elementus ar navigācijas saitēm veidojam peldošus, veidojot horizontālu izvēlni, bet saraksta elementiem, kas satur apakšposteņus, uzstādām peldošu: nav; lai tie parādītos viens zem otra.
#navbar, #navbar ul ( piemale: 0; polsterējums: 0; saraksta stila veids: nav; ) #navbar li ( peldēt: pa kreisi; ) #navbar ul li ( peldēt: nav; )
Tālāk mums ir jāpārliecinās, ka mūsu nolaižamā apakšizvēlne nenospiež saturu zem navigācijas joslas uz leju. Lai to izdarītu, mēs iestatīsim saraksta vienumu pozīciju: relatīvs; , un saraksts, kurā ir apakšvienības pozīcija: absolūts; un pievienojiet augstāko rekvizītu ar vērtību 100%, lai absolūti pozicionētā apakšizvēlne tiktu parādīta tieši zem saites.
#navbar ul ( displejs: nav; pozīcija: absolūts; augšā: 100%; ) #navbar li ( peldēt: pa kreisi; pozīcija: relatīvs; ) #navbar ( augstums: 30 pikseļi; ) Izmēģiniet »
Vecāku saraksta augstums tika pievienots ar nolūku, jo pārlūkprogrammas neuzskata peldošo saturu par elementa saturu, nepievienojot augstumu, pārlūkprogramma ignorēs mūsu sarakstu un saturs, kas seko sarakstam, tiks apvilkts ap mūsu izvēlni.
Tagad mums vienkārši jāpielāgo abi mūsu saraksti, un nolaižamā izvēlne būs gatava:
#navbar ul ( displejs: nav; fona krāsa: #f90; pozīcija: absolūta; augšā: 100%; ) #navbar li:hover ul (displejs: bloks; ) #navbar, #navbar ul (marža: 0; polsterējums: 0; saraksta stila veids: nav; ) #navbar ( augstums: 30 pikseļi; fona krāsa: #666; polsterējums pa kreisi: 25 pikseļi; min-platums: 470 pikseļi; ) #navbar li ( pludiņš: pa kreisi; pozīcija: relatīvs; augstums: 100%; ) #navbar li a ( displejs: bloks; polsterējums: 6 pikseļi; platums: 100 pikseļi; krāsa: #fff; teksta noformējums: nav; teksta līdzināšana: centrā; ) #navbar ul li ( pludiņš: nav; ) #navbar li:hover ( fona krāsa: #f90; ) #navbar ul li:hover ( fona krāsa: #666; )
