Diezgan izplatīts vietnes izvēlnes izkārtojums, kad konteiners ar to aizņem visu lapā pieejamo platumu. Šajā gadījumā pirmais vienums atrodas blakus kreisajai malai, bet pēdējais atrodas blakus labajā pusē, un attālums starp visiem elementiem ir vienāds. Šodien mēs jums pastāstīsim, kā tas tiek darīts.

Mēs piedāvājam piemēru gumijas izvēlnes ieviešanai, izmantojot CSS jūsu resursam. Šajā izvēlnē vienumi atradīsies vienā rindā. Javascript netiks izmantots. Izvēlnes saturs tiks iekļauts parastā sarakstā. Šādas ēdienkartes galvenā iezīme ir tās daudzpusība, kas izpaužas faktā, ka gan vienumu skaits, gan garums var būt jebkurš.

Katrs programmētājs var piedāvāt savu veidu, kā atrisināt doto problēmu. Tas viss ir atkarīgs no viņa iztēles, profesionalitātes līmeņa un spējām. Visizplatītākais šīs problēmas risinājums ir izmantot tabulu. Turklāt daudzi ieteiktu izmantot javascript. Es steidzos pievilt tos, kuri ieteiktu izmantot displeja rekvizītu ar vērtību tabulu vai tabulas šūnu. Šī metode nav pietiekami saderīga ar vairākām pārlūkprogrammām.

Mūsu piedāvājums tiks veidots uz stabila HTML5 un CSS3 zināšanu pamata.

Procesa būtība ir balstīta uz teksta līdzināšanas rekvizītu ar attaisnojuma vērtību. Tiem, kas ir aizmirsuši, atgādinu: šis īpašums orientē teksta līdzinājumu visā konteinera platumā.

Izmantojot mūsu risinājumu, ir jāievēro divi obligāti noteikumi. Pirmais ir tas, ka izvēlnes vienuma konteinera platumam jābūt mazākam par tekstu. Tas ir, ne vienā rindā. Otrs svarīgais noteikums ir tāds, ka vārdi tiek izstiepti vienādi, neatkarīgi no tā, vai tie pieder vienam un tam pašam punktam.

Tālāk ir norādīts kods, kas kalpo kā piemērs gumijas izvēlnes izveidošanai:

HTML

< ul> < li>< a href= "#" >mājas< li>< a href= "#" >Emuārs< li>< a href= "#" >Jaunumi< li>< a href= "#" >Populārs< li>< a href= "#" >Jaunas preces

ul ( text- align: justify; overflow: paslēpts; /* novērš metodes blakusefektus */ augstums: 20 pikseļi; /* arī novērš nevajadzīgo */ kursoru: noklusējuma ; /* iestata kursora sākotnējo formu */ piemale : 50px 100px 0 100px background: #eee polsterējums: 5px ) li ( displejs: iekļauts; /* padara izvēlnes vienumus tekstu */ ) li a ( displejs: inline- block; /* novērš vārdu pārtraukumus izvēlnē; krāsa: #444; ) a : hover ( krāsa: #ff0000; ) ul: after ( /* veido otro rindu, lai izstrādātu metodi */ saturs: "1" ; mala- kreisais: 100 %; augstums: 1px; pārplūde: slēpts: inline-bloks;

Lai strādātu vecajā labajā Internet Explorer, CSS papildus jāpievieno šāds kods

ul ( z- indekss: izteiksme(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" >")); ) ul .last ( margin-left: 100%; ) * html ul ( /* nepieciešams tikai ie6 */ augstums: 30 pikseļi; )

Norādījuši nepieciešamās rekvizītu vērtības un kodu, mēs iegūstam šo gumijas izvēlni:

Labdien

Bieži vien ir jāizveido horizontāla izvēlne, kas stiepjas visā vecākbloka platumā neatkarīgi no tā, cik vienumu tajā ir.

Šodien es vēlos jums parādīt, kā izveidot tieši šādu ēdienkarti.

Tātad mūsu ēdienkarte būs šāda:

Tas ir izstiepts visā platumā un izceļas, kad tiek novietots virsū. Izvēlne ir noapaļota sānos.

HTML MARKUP

mājas

Interesantas ziņas

Vēl viens ēdienkartes elements!

Lai izvēlne būtu pilna platuma, es izmantoju tabulas ar 100% platumu. Katrai tabulai ir izvēlnes vienuma div konteiners. Atkarībā no tā, vai pirmais, pēdējais vai starpposma izvēlnes vienums ir div, tiek piešķirta atbilstošā klase.

Katram div konteineram ir 2 sānu apmales ar absolūtu pozicionēšanu, kas nepieciešamas pareizai attēlošanai. Ja izmantojat standarta apmales, tad, pārslēdzot izvēlnes vienumus, teksts palielināsies par 1-2 pikseļiem, kas ir labi.

Aktīvā klase ir atbildīga par izvēlēto izvēlnes vienumu un izceļ to.

Katrā pozīcijā mums ir attēls un teksts. Lai nodrošinātu, ka tas viss ir stingri izlīdzināts pa vidu vertikāli, mēs izmantojam tabulu. Pateicoties vertikālās izlīdzināšanas īpašībai, mūsu izvēlnes vienumi vienmēr tiks parādīti vienmērīgi un nepārvietosies.

CSS NOTEIKUMI

Vispirms iestatīsim stilus izvēlnes vispārīgajam attēlojumam:

Menu_container ( polsterējums augšpusē: 40 pikseļi; platums: 100%; augstums: 47 pikseļi; atstarpe starp apmalēm: 0 pikseļi; ) .menu_container td ( vertikālā līdzināšana: vidū; /* vertikālā izlīdzināšana */ ) .pēdējais_punkts_izvēlne, .pirmais_punkts (izvēlnes_punkts, .menu_viduspunkts platums: 100%; apmale: 1 px. pozīcija: pa kreisi: nav; 150px; polsterējums-pa kreisi: 4px; .td.inner_table_title ( padding-top: 4px; font-weight: bold; ) .td.inner_table_img ( platums: 40px!important; ) .inner_table_menu (%xp:0:0) ; ( platums: 30 pikseļi! svarīgi; augstums: 30 pikseļi! svarīgi; polsterējums pa kreisi: 15 pikseļi; )

Skaistuma labad noapaļīsim stūrus ēdienkartes malās:

First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px border-down-left-radius: 5px border-right: 1px solid #dadbda .last_point_menu ( -webkit-border-top-right-radius: 5px; -webkit-border -; apakšējā labajā rādiusā: 5 pikseļi;

Tagad mūsu ēdienkarte ir kļuvusi skaistāka:

Pagaidām pirmajam punktam nav kreisās apmales. Mēs to labosim nedaudz vēlāk.

Tagad pievienosim izvēlnei kursora novietošanas efektus.

Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active ( background-color: #CAE28:-moz background-line-imaar gradients(augšā, #CAE285, #9FCB56: -webkit-gradient(lineārs, 0 0, 0 100%, no(#CAE285), līdz(#9FCB56)); #9FCB56); -o-linear-gradient (augšējais, #CAE285, #9FCB56: lineārais gradients, #CAE285, #9FCB56 apmale); -krāsa: #aec671 #9fbb62 #87ac4a ) .last_point_menu ( apmale: 1px solid #dadbda; border-left: none; ) .last_point_menu:hover ( apmale: 1px solid #9FCB56; border-left: nav; apmales krāsa: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active (apmale-kreisais: nav; )

Tagad mūsu ēdienkarte izskatās daudz jaukāka, taču pagaidām mums nav apmales iezīmētajiem izvēlnes vienumiem. Labosim šo!

/* sānu apmaļu stili */ .borderLeftSecond, .borderRightSecond ( displejs: nav; pozīcija: absolūts; platums: 1 pikseļi; augstums: 47 pikseļi; fona krāsa: #9fbb62; augšā: 0px; z-indekss: 1000; ) /* apmaļu absolūtās nobīdes */ .borderLeftSecond (pa kreisi: 0px; , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSe; bloķēt gadījumus / .borderRightSe). pirmais un pēdējais vienums */ .first_point_menu.active .borderLeftSecond ( displejs: nav; ) .last_point_menu.active .borderRightSecond ( displejs: nav; ) .last_point_menu:hover .borderLeftSecond ( displejs: bloķēt; )

Tas ir viss!

Mēs saņēmām lielisku ēdienkarti, kas izstiepta visā vecāku bloka platumā! Vienumi nepārklājas viens ar otru, kad virzāt peles kursoru, un izkārtojums nelec.

Sveiki. Es ļoti ilgu laiku neesmu rakstījis ziņas par html/css darba tēmu. Nesen tikko sāku likt kopā jaunu izkārtojumu un šajā procesā uzgāju interesantu triku, kas ļauj padarīt ēdienkarti elastīgu (var tai pievienot jaunas preces un izmērs nepalielināsies, bet vienmēr būs 100% no vecāku bloks). Tātad, šodien mēs ieviesīsim gumijas izvēlni, izmantojot CSS.

Ja jums ir pārāk slinks, lai izlasītu rakstu, varat noskatīties šo video. Arī autors visu ļoti labi izskaidro:

Pirmais solis vienmēr ir html iezīmēšana, kur mēs būtu bez tā? Bet mūsu gadījumā viss būs vienkārši:

Viss ir skaidrs, šeit ir mans iezīmēšanas kods:

• 1. punkts


• 2. punkts


• 3. punkts


• 4. punkts


• 5. punkts

Tas viss izskatās standarta, piemēram:

Tagad saliksim visu vēlamajā formā, CSS ķersies pie darba.

Tālāk es pievienošu stilus iesaiņojuma blokam. Proti, iestatīšu maksimālo platumu uz 600 pikseļiem (lai būtu vieglāk uzņemt ekrānuzņēmumu, lai izvēlne atbilstu), kā arī centrēšu bloku.

Wrap(
fons: #fff;
maksimālais platums: 600 pikseļi;
piemale: 0 auto;
}

Tagad pieņemsim pašu ēdienkarti. Es noņemšu no tā marķierus (tagu ul), izveidošu fona lineāru gradientu un, pats galvenais, izmantošu rekvizītu display: table-row, lai izvēlnes konteiners darbotos kā tabulas rinda. Tas ir svarīgi, lai veiktu turpmākas manipulācijas.

R-menu(
fons: lineārs gradients (pa labi, #b0d4e3 0%, #88bacf 100%);
displejs: tabula-rinda;
saraksta stils: nav;
}

Kā redzat, iepriekš minētais kods tikko atrisināja visu, par ko rakstīju. Starp citu, gradientus ir ērti ģenerēt, izmantojot Ultimate CSS Gradient ģeneratora rīku. Es par viņu kādreiz atkal uzrakstīšu.

R-menu(
vertikāli izlīdzināt: apakšā;
displejs: tabula-šūna;
platums: auto;
teksta līdzināšana: centrs;
augstums: 50 pikseļi;
apmale-labā: 1px solid #222;
}

• Vertikālā līdzināšana: apakšā - šis īpašums ir nepieciešams, lai, ja izvēlnes vienumā teksts aizņem 2 rindiņas, tas tiktu parādīts vienmērīgi. Kad mēs veidojam izvēlni, jūs varat noņemt šo rekvizītu, tuvināt, lai vienumi tiktu saspiesti un teksts tiktu pārvietots uz divām rindām, un jūs redzēsiet displeja problēmu. Atdod īpašumu un viss būs kārtībā.
• displejs: tabula-šūna - tā kā mēs iestatījām pašu displeja izvēlni kā tabulas rindu, būtu loģiski iestatīt, lai tās vienumi tiktu parādīti kā tabulas šūnas. Tas ir nepieciešams.
• platums: auto — platums tiks aprēķināts automātiski, atkarībā no rindkopas teksta garuma
• text-align: center - tas ir tikai, lai centrētu tekstu iekšpusē
• augstums: 50 pikseļi — iestatiet augstumu uz 50 pikseļiem
• labi, border-right ir tikai apmale labajā pusē, vienumu atdalītājs

Pagaidām ēdienkarte izskatās neizskatīga, bet tas ir labi, ir pienācis laiks to atcerēties.

Pēdējā lieta, kas jādara, ir izveidot saišu stilu vienumu iekšpusē. Šeit man ir šāds kods:

R-izvēlne li a(
teksta noformējums: nav;
platums: 1000 pikseļi;
augstums: 50 pikseļi;
vertikāli izlīdzināt: vidū;
displejs: tabula-šūna;
krāsa: #fff;
fonts: parasts 14px Verdana;
}

Un ēdienkarte tagad izskatās šādi:

Vēlreiz ļaujiet man paskaidrot dažas rindiņas:

• teksta noformējuma rekvizīts ignorē saišu noklusējuma pasvītrojumu
• platums: 1000 pikseļi, iespējams, ir vissvarīgākā līnija. Saites jāiestata aptuveni tādā platumā, varbūt mazākā, bet noteikti lielāka par iespējami plašāko izvēlnes vienumu. Saites nebūs 1000 pikseļu platas, jo platumu ierobežos izvēlnes vienums li, kura platums ir iestatīts uz auto, taču tas ļaus nodrošināt, ka jebkuram izvēlnes vienumu skaitam tas vienmēr būs 100 procenti no platuma.
• Vertikālā līdzināšana: pa vidu un displejs: tabulas šūna — pirmais līdzinās tekstu vertikāli līdz centram, bet otrais arī parādīs saites kā šūnas. Ir nepieciešami abi īpašumi.
• fonts - labi, tas ir tikai fonta iestatījumu kopums. Šajā rakstā lasiet par fontu css īpašībām.

Piemēram, lai, virzot kursoru, mainītos izvēlnes vienuma krāsa. To var īstenot pavisam vienkārši, izmantojot kursora pseidoklasi:

R-izvēlne li:hover(
fona krāsa: #6bba70;
}

Lieliski, ēdienkartes ir gatavas, taču neesam pārbaudījuši pašu svarīgāko – cik tas ir gumijas, kā jau solīju. Nu, es pievienošu ēdienkartei vēl 2 vienumus:

Izvēlne joprojām ir 600 pikseļu plata. Atlikušās preces tika vienkārši nedaudz sarautas, lai tajās ietilptu 2 jaunas.

Es pievienošu vēl vienu garu punktu:

Kā redzat, izvēlne ir sarukusi nedaudz vairāk un garais vienums tiek parādīts diezgan normāli. Un, ja tas nebūtu vertikālā līdzināšana: apakšējais rekvizīts, par kuru es jums pastāstīju, izvēlne izskatītos sliktāk.

Es samazināšu ēdienkarti līdz trim vienumiem.

Preces kļuvušas daudz brīvākas, bet pati ēdienkarte platumā nav mainījusies. Tāpēc mēs izveidojām 100% gumijas ēdienkarti!

Principā, ja iesaiņojuma blokam iestatāt maksimālo platumu, nevis fiksētu, tas pat nav jāpielāgo. Manā gadījumā man ir maksimālā platuma īpašība: 600 pikseļi un, kad platums kļūst mazāks par 600 pikseļiem, bloks vienkārši saruks kopā ar ekrānu, neveidojot horizontālu ritināšanu.

Nu, ja vēlaties kaut kā mainīt vai labot izvēlni mobilajās ierīcēs vai platajos ekrānos, tad multivides vaicājumi jums palīdzēs! Veiksmi mājas lapas veidošanā!

Mēs turpinām sēriju ar nodarbību par nolaižamajām izvēlnēm. Nākamā ir horizontālā nolaižamā izvēlne, ko var izdarīt pats, izmantojot css.

Ja nonācāt šeit nejauši vai meklējāt citu nolaižamās izvēlnes variantu, iesaku doties uz vecāku sadaļu.

Šajā sadaļā ir aprakstīta horizontālā nolaižamā izvēlne CSS un HTML.

Lapas navigācija:

Tātad, mūsu uzdevums:

izveidot horizontālu izvēlni ar css nolaižamo sarakstu (ul li sarakstos), neizmantojot jQuery un Javascript, kā arī neizmantojot tabulas

Pirmkārt, pirms sākam rakstīt kodu, mums ir jāizveido izvēlnes html veidne.

Sakarā ar to, ka mēs veidojam universālu izvēlni, es vēlos to padarīt pēc iespējas līdzīgu WordPress izvēlnes izvadei. Manuprāt, šis ir viens no vienkāršākajiem un daudzpusīgākajiem Html izvēlnes kodiem. Tas izskatās šādi:

• mājas
• Par mums
• Mūsu pakalpojumi
  • Mūsu pakalpojums Nr.1
  • Mūsu pakalpojums Nr.2
  • Mūsu serviss Nr.3
  • Mūsu serviss Nr.4
  • Serviss 5
• Jaunumi
• Kontakti

Kā redzat no koda, mūsu nolaižamā izvēlne tiks ieviesta ul un li sarakstos. Šādi izskatās izvēlne bez CSS stiliem:

Atzīsim, tas izskatās neglīts, kā parasts saraksts. Tālāk mums ir jāizrotā šī izvēlne, izmantojot CSS stilus.

CSS stili nolaižamajām izvēlnēm un citiem ir tikpat nepieciešami kā gaiss. Galu galā nolaižamā cilne ir izveidota, pamatojoties uz pseidoklase: kursors.

Horizontālajai nolaižamajai izvēlnei mums ir nepieciešami šādi stili:

#izvēlne1(pozīcija:relatīvs; displejs:bloks; platums:100%; augstums:automātisks; z-indekss:10; ) #menu1 ul(pozīcija:relatīvs; displejs:bloks; mala:0px; polsterējums:0px; platums:100 %; list-style: none:#F3A601; menu1 ul li( pozīcija: relatīvs; displejs: bloks; peldēšana: pa kreisi; platums: automātisks; augstums: automātisks; ) # menu1 ul li a( displejs: bloks; polsterējums: 9 pikseļi 25 pikseļi 0 pikseļi 25 pikseļi; fonta izmērs: 14 pikseļi; fonts- ģimene: Arial, bez serifa: 1.3 em. fonta svars: lielie burti )

Tas vēl nav beigas, tikai daļa no galvenās horizontālās izvēlnes CSS. Tālāk mēs rakstīsim stilus izvēlnes nolaižamajai izvēlnei:

#menu1 ul li ul(pozīcija:absolūts; augšā:36px; pa kreisi:0px; displejs:nav; platums:200px; fons:#EBBD5B; ) #menu1 ul li:hover ul(displejs:bloks;)/*šo rindu īsteno pamešanas mehānisms*/ #izvēlne1 ul li ul li( pludiņš:nav; platums:100%; ) #menu1 ul li ul li a(displejs:bloks; teksta pārveidošana:nav; augstums:automātiski; polsterējums:7px 25px; platums: 100% box-sizing: border-box: 1px solid #ffffff ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li li a:hover; (fons:#FDDC96;krāsa:#6572BC)

Tagad tas ir viss. Pats pamešanas mehānisms tiek īstenots vienā rindā.

Skatiet ādu ar šo izvēlni:

Rīsi. 2 (horizontālā nolaižamā izvēlne)

Zemāk ir demonstrācija par to, kā darbojas nolaižamā izvēlne, kā arī saite avotu lejupielādei. (Demonstrācija tiks atvērta ar nolaižamo izvēlni šīs lapas augšpusē, nav nepieciešams noklikšķināt uz Atvērt jaunā logā 🙂 vai peles ritentiņa)

Lielākā daļa no jums var man pārmest, ka šādas ēdienkartes, kā es parādīju iepriekš, ir pagātnes sveiciens un daļēji jums ir taisnība, lai gan esmu redzējis nesenos izkārtojumus ar šādām ēdienkartēm.

Ceru, ka lejupielādējāt iepriekš minēto piemēru. Mūsu HTML paliek nemainīgs, taču mēs pilnībā mainīsim CSS. Varat vienkārši paņemt CSS kodu no šejienes un ielīmēt to lejupielādētajā piemērā vai skatīties demonstrācijas režīmā, kā tas darbojas.

#container(platums:1000px; augstums:automātiski; margin:0px auto; polsterējums-augš:10px; ) #menu1(pozīcija:relatīvais; displejs:bloks; platums:100%; augstums:automātisks; z-indekss:10; ) #izvēlne1 ul(pozīcija:relatīvs; displejs:bloks; mala:0px; polsterējums:0px; platums:100%; augstums:automātiskais; saraksta stils:nav; fons:#F3A601; ) #menu1 > ul(teksta līdzināšana: attaisnot fonta lielums: 1px ) # izvēlne1 > ul:: pēc :relative:inline-block:auto :14px: font-weight:lielais burts; menu1 ul li > a:hover, #menu1 ul li:hover > a(fons:#EBBD5B; krāsa:#2B45E0; ) #menu1 ul li ul(pozīcija:absolūts; augšā:36px; pa kreisi:0px; displejs: nav; platums:auto; fons:#EBBD5B; atstarpe: nowrap; ) #menu1 ul li:last-child ul(/*pēdējais vienums tiks pievienots labajā malā*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*this rindā tiek īstenoti mehānisma atkritumi*/ #menu1 ul li ul li(displejs:bloks; platums:auto; ) #menu1 ul li ul li a(displejs:bloks; text-transform:none; height:auto; polsterējums:7px 35px; platums: 100% ; (fons: #FDDC96;krāsa:#6572BC)

Šis piemērs arī atšķiras no pirmā ar to, ka nolaižamā izvēlne, pati nolaižamā izvēlne, stiepjas atkarībā no visu izvēlnes vienumu platuma.

Ļoti gariem izvēlnes vienumiem šī opcija var nebūt ļoti ērta, jo tie pārsniegs ierobežojumus. Lai atspējotu šo rekvizītu, vienkārši atrodiet rekvizītu "white-space:nowrap;". pie atlasītāja #menu1 ul li ul un izdzēsiet to.

Tālāk varat noskatīties demonstrāciju vai lejupielādēt horizontālās nolaižamās izvēlnes avotus:

Bez atdalītājiem šī izvēlne izskatās tik ļoti. Atdalītājus HTML var pievienot manuāli, taču, ja jums ir CMS, piemēram, WordPress, tad to manuāla pievienošana nav īpaši ērta.

Ir vairāki desmiti iespēju pievienot svītru (atdalītāju) starp izvēlnes vienumiem, izmantojot tīru CSS. Es nedublēšu opcijas, kas izmanto::before vai::after , vai daudz vienkāršāk border-left, border-right.

Ir situācijas, kad izkārtojums ir izveidots tik lieliski, ka bez jquery neiztikt.

Mūsu HTML kods paliek nemainīgs, mēs tikai iekļaujam jQuery bibliotēku un failu, kas to izmanto pašā sākumā:

Uzreiz pēc .

Kā jūs saprotat, jums ir jāizveido fails script-menu-3.js un pievienojiet tur šo mazo kodu:

$(dokuments).ready(function())( $("#izvēlne1 > ul > li:not(:last-child)").after(" "); ));

Šādas izvēlnes CSS stilus vajadzētu atstāt tādus, kādi tie ir, + pievienojiet šo gabalu beigās:

#izvēlne1 ul li.razd( augstums: 28 pikseļi; platums: 1 pikseļi; fons: #ffffff; mala augšdaļa: 4 pikseļi; )

Horizontālā nolaižamā izvēlne ar norobežotājiem programmā jQuery izskatīsies šādi:

Varat skatīt demonstrācijas režīmā vai lejupielādēt zemāk esošo horizontālās izvēlnes veidni:

Šī risinājuma priekšrocības ir:

• izvēlne tiks uzzīmēta dinamiski;
• atkāpes no atdalītāja līdz rindkopai visur ir vienādas;
• skaistāks un elastīgāks dizains.

Tā kā mēs runājam par daudzlīmeņu nolaižamajām izvēlnēm, novietojot kursoru, iespējams, ir vērts tās sadalīt apakšgrupās:

Savos piemēros es parādīšu daudzlīmeņu CSS izvēlni ar 3 līmeņiem, tad domāju, ka nebūs grūti uzminēt, kas jādara.

Pirmkārt, mums ir nedaudz jālabo savs HTML. Tur tiks pievienotas dažas rindiņas 3. līmenim:

• mājas
• Par mums
• Mūsu pakalpojumi
  • Mūsu pakalpojums Nr.1
    • Papildinājums pakalpojumam 1
    • Papildinājums pakalpojumam 2
  • Mūsu pakalpojums Nr.2
    • Papildinājums pakalpojumam 3
    • Papildinājums pakalpojumam 4
  • Mūsu serviss Nr.3
  • Mūsu serviss Nr.4
  • Serviss 5
• Jaunumi
• Kontakti
  • Ceļu karte
    • Kartes papildinājums
    • Papildinājums 2. kartei
  • Atsauksmju veidlapa

#container(platums:1000px; augstums:automātiski; margin:0px auto; polsterējums-augš:10px; ) #menu1(pozīcija:relatīvais; displejs:bloks; platums:100%; augstums:automātisks; z-indekss:10; ) #izvēlne1 ul(pozīcija:relatīvs; displejs:bloks; mala:0px; polsterējums:0px; platums:100%; augstums:automātiskais; saraksta stils:nav; fons:#F3A601; ) #menu1 > ul(teksta līdzināšana: attaisnot fonta lielums: 1px ) # izvēlne1 > ul:: pēc :relatīvs:inline-block -family:Arial, sans-serif:#ffffef: text-decoration:none; box-sizing:border-box; ( fons: #EBBD5B; krāsa:#2B45E0; ) #menu1 ul li ul(pozīcija:absolūts; augšā:36px; pa kreisi:0px; displejs:nav;platums:auto;fons:#EBBD5B; atstarpe:nowrap; ) #menu1 > ul > li:pēdējais bērns > ul(/*pēdējais vienums tiks pievienots labajā malā*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*šajā rindā tiek īstenots atlaišanas mehānisms* / #menu1 ul li ul li(displejs:bloks; platums:auto; ) #menu1 ul li ul li a(displejs:bloks; teksta pārveidošana:nav; augstums:automātiski; polsterējums:7px 45px; platums:100%; lodziņš -sizing:border-box ; li ul li:hover > a(fons:#FDDC96; krāsa:#6572BC; ) #menu1 ul li ul li ul(augšā:0px; pa kreisi:100%; displejs:nav; fons:#fddc96; ) #menu1 > ul > li:pēdējais-bērns > ul ul(kreisais:automātiskais; pa labi:100%;) #menu1 ul li ul li ul a(krāsa:#F38A01;)

Mēs kopējam jQuery failus, kā tie bija no iepriekšējā piemēra. Nolēmu atstāt sadalītājus, lai ēdienkarte izskatītos vismaz nedaudz labāk. Protams, jūs varat iztikt bez tiem.

Tas notika šādi:
Es izveidoju 2 ādas vienā, lai parādītu, kā piliens izskatās labajā pusē un vidū.

Tālāk varat noskatīties demonstrāciju un lejupielādēt piemēru:

Virsrakstā ir nedaudz eļļas, bet tas derēs, galvenais ir kods.

Šī piemēra būtība ir izveidot pilna platuma horizontālu nolaižamo izvēlni ar pilna platuma nolaižamo izvēlni + daudzlīmeņu.

Es nemainīšu HTML kodu, to var ņemt no iepriekšējā piemēra. Mēs arī atstājam atdalītājus jQuery.

Pilnībā mainīsies tikai CSS:

#container(platums:1000px; augstums:automātiski; margin:0px auto; polsterējums-augš:10px; ) #menu1(pozīcija:relatīvais; displejs:bloks; platums:100%; augstums:automātisks; z-indekss:10; ) #izvēlne1 ul(pozīcija:relatīvs; displejs:bloks; mala:0px; polsterējums:0px; platums:100%; augstums:automātiskais; saraksta stils:nav; fons:#F3A601; ) #menu1 > ul(teksta līdzināšana: attaisnot fonta lielums: 1px ) # izvēlne1 > ul:: pēc :relatīvs:inline-block:automaš -augšā: 4 pikseļi; ) #menu1 ul li a(displejs:bloks; polsterējums:9px 45px 0px 45px; font-family:Arial, sans-serif; line-height: 1,3em; font-weight:bold; augstums: 36px; a:hover, #menu1 ul li:hover > a( background:#EBBD5B; krāsa:#2B45E0; ) #menu1 ul li ul(pozīcija:absolūts; augšā:36px; pa kreisi:0px; displejs:nav; platums:100%; fons:#EBBD5B; ) #menu1 > ul > li > ul::after( skaidrs:abi; float:none; augstums: 0px; saturs: bloks: pludiņš: pa kreisi ) #izvēlne lodziņš ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( background:#FDDC96; color :#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#fddc96; z-index:15; ) #menu1 ul li ul li ul li(displejs: block pludiņš: nav platums: 100%;) #menu1 ul li ul li ul a( color:#F38A01; border-top: 1px solid #ffffff; )

Izvēlne izskatīsies šādi: Vienīgais punkts ir tāds, ka vietnei ir jābūt pietiekami daudz vietas, jo pēdējā vienumā labajā pusē nav vietas nolaižamajai izvēlnei. Šo problēmu var atrisināt, izmantojot:nth-child, bet es neuztraucos.

Skatiet horizontālās daudzlīmeņu nolaižamās izvēlnes demonstrāciju:

Kā jūs, iespējams, pamanījāt: arī apakšējā matrica ir pilna platumā. Tā top pilieni vairākos blokos.

Tas man ir viss, es ceru, ka vismaz viens no maniem piemēriem jums ir piemērots. Paldies par jūsu uzmanību.

Ja izlasījāt visu ziņu, bet neatradāt, kā izveidot savu horizontālo nolaižamo izvēlni css, uzdodiet jautājumu komentāros vai izmantojiet vietnes meklēšanu.

Tāpat iesaku apmeklēt vecāku lapu https://site/vypadayushhee-menu/, tur ir apkopoti visi nolaižamo izvēlņu piemēri un veidi.

Horizontālā izvēlne ir vietnes sadaļu saraksts, tāpēc ir loģiskāk to ievietot elementā

, un pēc tam lietojiet CSS stilus tā elementiem. Šis izvēlnes izkārtojums ir visizplatītākais, jo tā pozicionēšana tīmekļa lapā ir acīmredzama.
Kā izveidot horizontālu izvēlni: izkārtojuma un dizaina piemēri HTML iezīmēšana un pamata stili horizontālajai izvēlnei

Pēc noklusējuma visi saraksta elementi ir sakārtoti vertikāli, aizņemot visu konteinera elementa platumu, kas savukārt aizņem visu tā konteinera bloka platumu.

HTML marķējums horizontālai navigācijai

• Izvēlnes vienums
• Izvēlnes vienums
• Izvēlnes vienums
...

Horizontālo izvēlni, kas atrodas taga iekšpusē, var papildus ievietot ... un/vai ... elementā. Pateicoties tam, html marķējumam tiek piešķirta semantiska nozīme, kā arī tiek nodrošināta papildu iespēja formatēt izvēlnes bloku.

Ir vairāki veidi, kā tos novietot horizontāli. Pirmkārt, jums ir jāatiestata noklusējuma pārlūkprogrammas stili navigācijas elementiem:

Ul (saraksta stils: nav; /*noņemt saraksta marķierus*/ piemale: 0; /*noņemt augšējo un apakšējo piemali, kas vienāda ar 1em*/ polsterējums-left: 0; /*noņemt kreiso polsterējumu, kas vienāds ar 40 pikseļiem*/ ) a (teksta noformējums: nav; /*noņemt saites teksta pasvītrojumu*/)

1. metode. li (displejs: iekļauts;)

Saraksta elementu rakstīšana ar mazajiem burtiem. Rezultātā tie ir novietoti horizontāli, labajā pusē starp tiem pievienojot atstarpi 0,4 em (aprēķinot attiecībā pret fonta lielumu). Lai to noņemtu, pievienojiet negatīvu labo malu vienumam li li (margin-right: -4px;) . Tālāk mēs veidojam saites, kā vēlamies.

2. metode. li (peldēt: pa kreisi;)

Saraksta elementu padarīšana peldošu. Rezultātā tie ir novietoti horizontāli. Konteinera bloka ul augstums kļūst par nulli. Lai atrisinātu šo problēmu, mēs pievienojam (pārpilde: paslēpts;) ul, paplašinot to un tādējādi ļaujot tajā ietvert peldošos elementus. Saitēm pievienojiet (displejs: bloks;) un veidojiet tās, kā vēlaties.

Metode 3. li (displejs: inline-block;)

Saraksta elementu izveide inline-block. Tie atrodas horizontāli, labajā pusē veidojas sprauga, tāpat kā pirmajā gadījumā. Saitēm pievienojiet (displejs: bloks;) un veidojiet tās, kā vēlaties.

4. metode. ul (displejs: flex;)

Padarot ul sarakstu par elastīgu konteineru, izmantojot . Rezultātā saraksta elementi tiek sakārtoti horizontāli. Mēs pievienojam saitēm (displejs: bloks;) un veidojam tās pēc vēlēšanās.

1. Adaptīva izvēlne ar pasvītrojuma efektu, virzot kursoru virs saites
• Darbs
• Par
• Emuārs
• Sazināties
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main ( saraksta stils: nav; piemale: 40 pikseļi 0 5 pikseļi; polsterējums: 25 pikseļi 0 5 pikseļi; teksta izlīdzināšana: centrā; fons: balts; ) .menu-main li (displejs: inline-block;).menu- main li:after ( saturs: "|"; krāsa: #606060; displejs: inline-block; vertical-align:top; ) .menu-main li:last-child:after (saturs: nav;) .menu-main a ( teksta noformējums: nav; fontu saime: "Ubuntu Condensed", bez serifa; atstarpes starp burtiem: 2 pikseļi; pozīcija: relatīvā; polsterējums apakšā: 20 pikseļi; mala: 0 34 pikseļi 0 30 pikseļi; fonta izmērs: 17 pikseļi; text-transform: displejs: inline-block: color .2s ) .menu-main a:visited (krāsa: #9d999d;). ) .menu-main a:before, .menu-main a:after ( saturs: ""; pozīcija: absolūts; augstums: 4 pikseļi; augšā: automātiski; pa labi: 50%; apakšā: -5 pikseļi; pa kreisi: 50%; fons : #feb386; pāreja: .8s; .menu-main a:hover:fore, .menu-main .current:fore (pa kreisi: pēc, .menu-main .current:after). 0;) @media (maksimālais platums: 550 pikseļi) ( .menu-main (padding-top: 0;).menu-main li (displejs: bloks; ) .menu-main li:after (saturs: nav;) . menu-main a ( polsterējums: 25px 0 20px; piemale: 0 30 pikseļi; ) ) 2. Adaptīvā ēdienkarte kāzu vietnei
• Darbs
• Par
• Emuārs
• Sazināties
@import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu (pozīcija: relatīvs; fons: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:before, .top-menu:after ( saturs: ""; displejs: bloks; augstums : 1px apmale-top: 3px solid #575350 575350; box-shadow: 0 2px 7px: margin-top: .menu-main (saraksta stils: nav; polsterējums: 0; fonta izmērs: 18px; teksta līdzinājums: centrā; pozīcija: relatīvā; ) .menu-main:before, .menu-main:after ( saturs: "\25C8"; līnijas augstums: 1; pozīcija: absolūts; augšā: 50%; pārveidot: translateY(-50% ); (teksta noformējums: nav; displejs: inline-block; piemale: 2px 5px; polsterējums: 6px 15px; fontu saime: "PT Sans", sans-serif; fonta izmērs: 16px; krāsa: #777777; apmale-apakša : 1px cieta caurspīdīga pāreja: .3s lineāra; ) .menu-main .current, .menu-main a:hover ( apmales rādiuss: 3 pikseļi; fons: #f3ece1; krāsa: #313131; teksta ēna: 0 1px 0 #fff; apmales krāsa: #c6c6c6; ) @media (maksimālais platums: 500 pikseļi) ( .menu-main li (displejs: bloķēt;) ) 3. Adaptīva ķemmēta izvēlne
• Darbs
• Par
• Emuārs
• Sazināties
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( saraksta stils: nav; polsterējums: 0 30 pikseļi; piemale: 0; fonta izmērs: 18 pikseļi; teksta līdzinājums: centrā; pozīcija: relatīvais; fons: balts; ) .menu-main:after ( saturs: "" pozīcija: absolūtais augstums: 20px; fons: 0%, balts 70%, rgba (255,255,0) 100%) background-repeat: repeat-x; .menu-main li (displejs: inline-block;) .menu-main a (teksta noformējums: nav; displejs: inline-block; polsterējums: 10px 30px; font-family: " PT Sans Caption", bez serifa; pāreja: .3s lineāra; -galvenā a:before, .menu-main a:after ( saturs: ""; pozīcija: absolūtā; augšā: calc(50% - 3px); platums: 6px augstums: 6px: fons: #F58262 pāreja: .5s ease-out a:before (pa kreisi: 5px;); :after (pa labi: 5px;) .menu-main a.current:after, .menu-main a:hover:fore, .menu-main a:hover:after (necaurredzamība: 1;) .menu-main a.current, .menu-main a:hover (krāsa: #F58262;) @media(max-width:680px) ( .menu-main li (displejs: bloks;) ) 4. Adaptīvs izvēlne uz lentes
• Darbs
• Par
• Emuārs
• Sazināties
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .augšējā izvēlne ( piemale: 0 60 pikseļi; pozīcija: relatīvā; fons: #5A394E; lodziņa ēna: ielaidums 1 pikseļi 0 0 rgba(255,255,255,.1), ielaidums -1 pikseļi 0 0 rgba(255 255 255,1,50 px). -indekss: 2; platums: 100% nav polsterējums: 0; teksta izlīdzināšana: pirms, .izvēlne: pēc 8px apmale-top: 18px solid-down: 18px solid # 5A394E .izvēlne-main:before; : 12 pikseļi solid rgba(255, 255, 255, 0) .izvēlne- galvenā:pēc (labā: -30px; borta-labā: 12px solid rgba(255, 255, 255, 0); ) .menu-main li ( displejs: inline-block; margin-right: -4px; ) .menu-main a ( text-decoration: nav; displejs: inline-block; polsterējums: 15px 30px; font-family: "PT Sans Caption", sans-serif; krāsa: balta; pāreja: .3s lineāra; ) .menu-main a.current, .menu-main a:hover (fons: rgba(0,0,0,.2);) @media (maksimālais platums: 680 pikseļi) ( .top-menu (margin: 0;) .menu-main li ( displejs: bloks; margin-right: 0; ) .menu-main:before, .menu-main:after (saturs: nav;) .menu-main a (displejs: bloks;) ) 5. Responsīva izvēlne ar logotipu vidū
• Darbs
• Par
• Stāsts
• Sazināties
• Veikals
• Galerija
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( pozīcija: relatīvā; fons: rgba(34,34,34,.2); ) .menu-main ( saraksta stils: nav; margin: 0; polsterējums: 0; ) .menu-main:after ( saturs: ""; displejs: tabula; skaidrs: abi : 50% transform: translate(-50%,-50%) .menu-main a ( text-decoration: none; displejs: bloks; line-height: 80px; polsterējums: 0 20px; font-size: 18px ; burtu atstarpes: 2px; galvenais ( polsterējums-augšā: 90 pikseļi; teksta līdzinājums: centrā; ) .navbar-logo ( pozīcija: absolūtā; pa kreisi: 50% ; augšā: 10 pikseļi; pārveidot: translateX(-50%) ) .menu-main li ( peldēt: none; displejs: inline-block; displejs: bloks;) ) 6. Atsaucīga izvēlne ar logotipu kreisajā pusē
• Darbs
• Par
• Stāsts
• Veikals
• Galerija
• Sazināties
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (fons: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); polsterējums: 20px; ) .top-menu:after ( saturs: "" displejs: tabula; skaidrs: abi; .navbar-logo (displejs: inline-block); li (displejs: inline-block;). menu-main a ( teksta noformējums: nav; displejs: bloks; pozīcija: relatīvais; līnijas augstums: 61 pikseļi; polsterējums pa kreisi: 20 pikseļi; fonta izmērs: 18 pikseļi; burtu atstarpes : 2px; font-family: "Arimo", sans-serif: #F73E24 . pa kreisi: 50% transform(45deg) translateX(6.5px) pāreja: .3s lineāra 20 pikseļi -6 pikseļi);) ) @media (maksimālais platums: 600 pikseļi) ( .menu-main li (displejs: bloķēt;) )

Populārs:

Attēla html sprite daļas izvadīšana

Papildinformācijas un papildu informācijas iestatīšana 1c nomenklatūrai papildu informācija un informācijas atšķirības Ko darīt, ja nav reģistrācijas datu Pieprasījums datu atlasei (formulas) programmā MS EXCEL Excel atlase pēc nosacījumu makro Pagaidu pagaidu vienreizējs e-pasts Pagaidu e-pasts, pasta vietnes, sociālo mediju reģistrācija Kas ir MTS trasta maksājums?

Jauns

Kā atjaunot menstruālo ciklu pēc dzemdībām:

• Aeroflot Bonusa programma: kā uzkrāt jūdzes un kam tās tērēt?
• Kā uzzināt, kurš disks ir jūsu datorā: SSD vai HDD Kā uzzināt, kurš ssd ir jūsu datorā
• Fractal Design Define R5 testēšana Fractal Design Define R5 — kluss, plašs
• Kā paātrināt Android viedtālruni un planšetdatoru?
• Plūdu kontrole VKontakte: mēs jums pastāstīsim, kāpēc rodas problēma un kā to var novērst. Tātad plūdu kontrole
• Lādētājs, kura pamatā ir ATX barošanas avots Laboratorijas barošanas avots, kura pamatā ir 3528 PWM kontrolieris
• Ko darīt, ja vads neuzlādē jūsu iPhone
• Virtuālā mašīna operētājsistēmai Mac Virtuālie logi operētājsistēmā Mac OS
• Par Tele2 pakalpojumu Kā ievadīt maksājuma apstiprinājumu uz numuru 312
• Darbs ar iekšējo atmiņu EEPROM Eeprom dzēšana

Huawei un Honor programmaparatūras instalēšana un atjaunināšana Kamēr daudzi lietotāji par operētājsistēmu Android 7.0 Nougat tikai sapņo, Google ir nākamās Android 8.0 O versijas testēšanas beigu posmā....	Subtitru izveide Subtitru darbnīcā Subtitru darbnīca ir bezmaksas un atvērtā koda lietojumprogramma. Šīs programmas priekšrocības ietver: draudzīgu...	Specialitāte "Infokomunikāciju tehnoloģijas un sakaru sistēmas" (bakalaura grāds) Infokomunikāciju tehnoloģijas un sakaru sistēmas 11 Absolventa kvalifikācija: bakalaurs. Studiju formas un termiņi: pilna laika – 4 gadi; korespondence (usk.) - 3 gadi 3 mēneši Iestājeksāmeni: matemātika...	Odnoklassniki: kā atvērt manu lapu Mana Odnoklassniki lapa ir katra lietotāja personīgais profils, kurā ir par viņu norādītā informācija un fotogrāfijas. Pieejams...

Datora iestatījumi, atjauninājumi, apkope, iestatījumi

RSS