ЭЭМ, Программалык камсыздоо
Ачылуучу CSS Менюларды башкаруу үчүн кандай
Бүгүн биз "Мен бир тамчы суу-ылдый CSS Менюларды? Түзүүгө болот" деген суроого жооп алабыз. Бул нерсе ар кандай кошумча каражаттарды бириктирген эле кабыл алынат деп дароо айтыш керек. Башкача айтканда, меню гана CSS жана HTML менен түзүлөт.
үйрөтүү
толугу менен макалада анын ичинде эмне бар экенин түшүнүү үчүн, теориялык материал менен таанышып бир аз керек. Эгерде жасалма-класстар менен тааныш болсо, бул пунктту өткөрүп алат. ": Үстүнө" Ошентип, бир тик жайылма CSS Менюларды түзүү үчүн, биз сыяктуу элементи керек. жасалма ": үстүнө" эч өткөрүлүп берилиши мүмкүн HTML тег. Бул бир нерсе чычканды Hover учурду аныктоого мүмкүндүк берет. Мисалы, биз мүлк койдум: "Эгерде: үстүнө {түсү: кызыл;}". Бул материалдар сиз калкып деп билдирет Чычкан эч кандай теги мазмунуна кызыл баштайт. Бул жасалма элемент да таасирсиз кылынганын экенин белгилей кетүү маанилүү. Баса, ": келүү" сыяктуу элементтерди айтып берди. Бирок, бул биз жасалма CSS жайылма меню түзөт.
нускама
Биринчиден, жайылма меню деген эмне экенин карап көрөлү. Бул аныктама боюнча ар кандай долбоорлор куруу ар түрдүү ыкмаларын көп болот. Мындай учурда, биз бир нече тынымсыз көрүнүп заттар жана бир нече кошумча (жашыруун) турган түзүмүн талдайбыз. теориясы менен аягына чыгып, иш жүзүндө баштайлы.
- Биз меню жайгашуунун түзөт. Бул үчүн, HTML-коду каралоо. бир камтылган тизме түзүү: <ул> <ли> <ли> <ул> <ли> <ли> <ли> < / ул>. ушул сыяктуу бир нерсе сиздин түшмө менюсундагы сыяктуу керек. CSS кийин кийлигишүү. Бул учурда негизги тизме үч негизги багыттарга жана эки тиркелген турат.
- суб-меню жашыруу. Биз салынган колдонуп, бул үчүн, төмөнкүдөй өзгөчөлүктөрүн аныктоо: ул ул {экранды: эч;} Бул экрандан экинчи тизме элементтерин жок кылат.
- Менюсу CSS түзүү негизги тизмеден себелейт. стилдерди төмөнкү эрежени жаз: ул Ли: ул калкып {дисплей: бөгөттөөлөр;}. Бул жазуу чычкан ул тизмесине жайгашкан элемент ли, экран сарп пайда аяктагандан кийин (тиркелет) дегенди билдирет. Бир караганда, мындай схема татаал жана түшүнүксүз болуп көрүнүшү мүмкүн. Бирок, чындыгында, баары өтө жөнөкөй болуп саналат.
- Тэгдерди <Ли> Сиздин мазмунду киргизүү менен бул долбоорду өзүң колдон. Сиз тизме элементтердин санды түзөтүү бетинен өзгөртө аласыз.
кооздук өзгөрүүлөр
Замат негизги меню жайгашуусу даяр эле, каттоодон өтүүгө болот. Балким, даярдуулук менен, биринчи кезекте, көп нерсени көрсөтүү маркерлер кутулуу үчүн. Бул бир мүлк CSS, тактап айтканда, тизме стилиндеги-түрүн колдонуу менен жүзөгө ашырылат. Төмөнкү жазууну кошуу үчүн керек: ли {тизме стилиндеги-түрү: эч ким;}. Ошондо алкакты киргизүүгө жана мүмкүн өбөлгөлөрү. чек ара жана өнүгүүнүн өбөлгөлөрү бул сизге жардам берет. Балким, кээ бир ылдый түшүү меню эле негизги элементтер менен түртүп, кошумча тизме катары пайда болот жаккан жок болот. Бул маселени чечүү үчүн, аны кармап алат. Бул үчүн, стилдерди төмөнкү жазуу жаз: ул ул {абалын: абсолюттук; сол: 15px; туура: 15px; топ: 15px; Төмөндө: 15px;}. Албетте, баалуулуктарды өз колдонот. Сиз жайылма менюну көрүп келген жерге жараша, CSS ар кандай таасирин кошуу жана тизмелерди кооздого болот, дагы көптөгөн өзгөчөлүктөр сунуш кылат.
жыйынтыктоо
Дагы бир жолу ал меню пландоо куруу белгилей кетүү керек. Бул окуя камтылган мааниде колдонулат CSS эрежелерин дайындоого, мисалы, ул ул. Эгер башка ушуга окшош түзүлүшкө тосуп документте болсо, чоң көйгөйлөр бар болушу мүмкүн. Мындай жагдайларда, мисалы, тэг же ID-ИД үчүн, белгилүү бир максат үчүн колдонушубуз керек. Жогорудагы макала жайгашуусу жайылма меню жалпы дизайны менен тааныштыруу максатында иштелип чыккан. иштин калган сенин ийнине жүктөлөт.
Similar articles
Trending Now