- Ачылуучу таза CSS / HTML боюнча менюсу Бул окуу куралы, биз таза CSS боюнча классикалык горизонталдуу...
- Сиз калкып качан горизонталдуу меню Animate
- Биз бир тамчы суу-ылдый CSS / HTML менюсу сүрөттөп
Ачылуучу таза CSS / HTML боюнча менюсу
Бул окуу куралы, биз таза CSS боюнча классикалык горизонталдуу менюсун кыла аласыз. Бул тизмеге иконалар бар. Ал бара-бара түстүү баскычтарын жана текстти өзгөрүүлөр пунктунда көрсөтүп жатканда, көлөкө кошуу. Ачылуучу тизмелер көп, жана эн негизгиси, ал таза CSS3-жылы ишке ашыруу үчүн абдан кыйын болушу мүмкүн.
Бул сабактын уландысы - 2-бөлүк " MOBILE VERSION горизонталдуу меню ".
Пендин кара POyzbW Денис ( @Dwstroy ) жөнүндө CodePen .
сабак колдонот:
- дисплей: атышат;
- Биз өтүүнү пайдаланууга;
- Биз абалын пайдалануу менен элементтерди көрсөтүүгө болот.
горизонталдуу менюнун HTML түзүлүшү
горизонталдуу меню боюнча P ervym бизнес жазуу катмары. Менин учурда сиздин өнүктүрүү чөйрөсүн ачат ал PhpStorm, бир index.html сааты түзүп, кадр HTML дайындалсын: 5 тааныткан RU алмаштырылсын.
Бардык мета, коддоонун башка жок Бөрк "Том меню" аныктайт.
орган жазуу теги баш ортосунда, ал эми биздин меню болот .dws-меню тобу менен бөгөт коюу. Кийинки, түзүмүн төмөнкүчө чагылдырууга болот, тизмелер беш даана санын түзөт. Ар бир тизме бар атрибуттуу адреси = "#" менен байланышта болот. Андан кийин ал класстын менен барам мен сөлөкөтү .fa .fa-
<Баш> <Nav класс = "Аякс-меню"> ул> ли * 5> бир [адреси = "#"]> i.fa.fa- </ Nav> </ баш>
Click колдонулат.
менюсу атын (бет, өнүмдөр, кызматтар, Маалымат, Contact) тизмесин.
Андан кийин, тандоо, ирээтин жана байланыш. Берилиштер менюсу астында сөлөкөттөрүн сайт өзүнө тандап барып:
<Мен класс = "Кубок лустарындагы үй
"> </ I> <мен класс = "Кубок лустарындагы shopping- Араба"> </ I> <мен класс = "Кубок лустарындагы үзгөндөн"> </ I> <мен класс = "Кубок лустарындагы чи-тизме" > </ I> <мен класс = "Кубок лустарындагы конверт-ачык"> </ I>
сүрөтчөлөргө менен сайттан Archive түшүрүп, сиздин, анын мазмунун казып, сиздин өнүктүрүү чөйрөсүндө Папканы ариптерин жана CSS папканы көчүрүү.
усулунун усулунун Папканы сөлөкөтү бар, жана алардын стилдеги CSS папкасында. Tight стилдери арип awesome.min, Uncompressed арип awesome.css байланыш жок болот.
index.html сүрөтчөлөрүн туташтырып, жана ар бир нерсени жазып сенин стили белгилери (үй, соода-Араба, үмүтүн үзгөндөн , Th-тизмеси, конверт-ачык).
Негизги кадр биз судан негизги стилин төмөнкүчө сүрөттөгөн түзөт, ал эми азыр биз негизги style.css стили горизонталдуу меню айтып турган сааты түзүп, жана index.html кошуу жок. стилдери байланыштуу экендигин текшерүү үчүн, Папканы IMG түзөт, ал тек-эркин сүрөтүн коюп берет. алкагында жардамы менен туташкан сүрөттөрдү жазып.
орган {маалымат-сүрөт: нускага ( "IMG / ep_naturalwhite.png ../"); }
Эгер биз баарын көрсөтүп, андан ары стилдеги сүрөттөө киришти көрүп тургандай.
биринчи кадам ар демейки серепчи орното аласыз бардык сезилбей, кайра орнотуу болуп саналат:
.dws-меню * {margin: 0; толтургучтар: 0; }
Биз баш-200 жогорку аныктайт. эле учурда, өз-өзүнчө жүктөлгөн жана сайт туташа турган жүктөлсүн кошумча ариптерин аныктайт.
баш {маржа: 200px; арип-үй-бүлө: Cuprum, Arial, Helvetica, Sans-Serif; }
тизмесиндеги маркерлер жашыруу:
.dws-меню ул, .dws-меню ол {тизме стилиндеги: эч ким; }
зыгыр, аны борбору кылып: Lists туурасынан экранды колдонуу өзгөрүүлөр:
.dws-меню> ул {дисплей: атышат; актоо-мазмуну: борборун түзүү; }
баш калтыруу эле жогору, маржа-учуна аныктайт.
баш {маржа-топ: 200px; арип-үй-бүлө: Cuprum, Arial, Helvetica, Sans-Serif; }
Биздин менюсун уюштуруу түстүү баскычтарын коюп, жазуулары, ж.б.
Биз шилтемелер Nav> ул Ли тандап, жана аларга блок-деңгээл элементтерин чыгарат. Биз меню билим, Сизде жазып, өлчөмү, түсү, түшүндүрүп алып, тамгалар менен камакка алынган көрсөтүү белгиленген.
.dws-меню> ул Ли {дисплей: бөлүгү; маалымат: #ececed; толтуруу: 15px 30px 15px 40px; арип өлчөмү: 14px; түс: # 454547; текст кооздугу: эч бири; текстти өзгөртүп: тамга; }
Ошондо иконалар, тизмелерди, абалды жүктөлсүн Position: Relative; иконалар ары ширетүүнү:
.dws-меню> ул Ли {орду: салыштырмалуу; }
Андан кийин, биз аларды абалын, жогорку маржа 15 чокусуна эмне, иконалар тандоо., Сол чокусунда 12 менен 18 жогорку өлчөмүн көбөйтүү.
.dws-меню> ул Ли> бир i.fa {орду: абсолюттук; топ: 15px; сол: 12px; арип өлчөмү: 18px; }
bordyurchika, биринчи пункту Ли тандайт тизмелери бөлгүч дайындоо, токтото көр. Биз LI ал ошол эле лышына жүктөлсүн Акыркы нерсени танда.
.dws-меню> ул Ли: биринчи бала {чек-сол: 1px # b2b3b5; } .Dws-меню> ул Ли: акыркы бала {чек-оң: 1px катуу #babbbd; }
тизме бөлгүч Ли жаса:
.dws-меню> ул Ли {орду: салыштырмалуу; чек ара-оң: 1px # c7c8ca; }
Меню анда силер түрткү кийин стилин сүрөттөө үчүн башташы мүмкүн көрүнүшүн, ээ.
Сиз калкып качан горизонталдуу меню Animate
Биз сөлөкөтү ак жүктөлсүн шилтемени түстүү шилтемелерди жана дайындоо блокторду жана түсүн тандоого. анын кара көлөкөсү кошуп, көркөмдөп көрөлү. 0,3 секунданын ичинде өтүү менен жылмакай көрүнүшү үчүн:
.dws-меню Ли: үстүнө {маалымат: # 454547; түс: #ffffff; кутуча-көлөкө: 1px 5px 10px -5px кара; өтүү: баары 0.3s тынчтыктын; }
Анан бара-бара жоголуп, бул таасир, эмне, биз жалгыз бул стили шилтеме менен толукталсын:
.dws-меню> ул Ли {дисплей: бөлүгү; маалымат: #ececed; толтуруу: 15px 30px 15px 40px; арип өлчөмү: 14px; түс: # 454547; текст кооздугу: эч бири; текстти өзгөртүп: тамга; өтүү: баары 0.3s тынчтыктын; }
Негизги бет бүттү жана аларга суб-Менюларды башкаруу жана суб-Менюларды сүрөттөп башташы мүмкүн.
Биз бир тамчы суу-ылдый CSS / HTML менюсу сүрөттөп
tkryvaem index.html жана кошумча меню өндүрүү, мисалы үчүн, кошуу жөнүндө. тизмелер LI ул киргизүүгө ортосунда, бул сыпат herf = "#" деген сөздөр болот, беш тизмесин, жаза берет.
ул> ли * 5> бир [адреси = "#"]
, Hit колдонулат заттар (кийим-кече, электроника, азык-түлүк, куралдары, Башталыш. Химия) аталышын каттоого.
<Ул> <ли> <a href="#"> Одежда </a> </ ли> <ли> <a href="#"> Электроника </a> </ ли> <ли> <Гуппи "#"> тамак </a> </ ли> <ли> <a href="#"> Tools </a> </ ли> <ли> <a href="#"> Башт Химиялык </a> </ ли> </ ул>
Анан ачык style.css менен субменю образын сүрөттөйт.
Биз экинчи тизмесин тандап жана ордун дайындоо: абсолюттук; Биз 150 чокуларын мекендеген минималдык жазылыкты аныктайт.
/ * Sub менюсу * / .dws-меню Ли ул {орду: абсолюттук; мин-туурасы: 150px; }
бир жогорку тизмелери чек аныктайт.
.dws-меню Ли> ул Ли {чек: 1px катуу # c7c8ca; }
суб-калтыруу 10 чокусуна байланышы үчүн, тексти жана тек-өбөлгөлөрү караганда жетелейт кара бир нече үчүн кайра алып: # e4e4e5 ;. .
.dws-меню Ли> ул Ли {толтуруу: 10px; текстти өзгөртүп: жок; маалымат: # e4e4e5; }
Анан, дагы бир суб-меню түзүү. Келгиле анда, баарын "Электроника" менен белгилөө делосуна мисалы, буруп, биз баштагыдай эле окшош меню пайда көрөлү. Биз заттар (камералар, ЭЭМдин, байланыш) документтерин сүрөттөп жана сактоо.
<Li> <a href="#"> Электроника </a> <ул> <ли> <a href="#"> камералар </a> </ ли> <ли> <a href="#"> Компүтерлер </a> </ ли> <ли> <a href="#"> Батирлер </a> </ ли> </ ул> </ Ли>
Алар ойлонуштурат, бирок, негизги менюда, азыр абалы боюнча жашыруун: абсолюттук; камтылган ул жана сересинде 150, аны түртүп. бөлүп:
.dws-меню Ли> ул ли ул {орду: абсолюттук; туура: -150px; Top: 0; }
Андан кийин, бул кошуу арибинин менюнун өйдө негизги пунктка жатып, силер чакан-меню, кылып: эч бири; Ошентип, бардык ички ойлорду жашыруу.
/ * Sub менюсу * / .dws-меню Ли ул {орду: абсолюттук; мин-туурасы: 150px; дисплей: эч бири; }
Алардын көрүнүшү сиз көчүп жатканда тизмесин тандап, дисплейде пайда болгон менен, аларды көрсөтүүгө болот: блок; .
.dws-меню Ли: Үстүнө> ул {дисплей: бөлүгү; }
Эми жөн гана аны алмаштыруу, жөн эле ул блогун көчүрүп, көп баскычтуу меню кошо аласыз.
<Ул> <ли> <a href="#"> <мен класс = "Кубок FA-үй"> </ I> Үй </a> </ ли> <ли> <a href="#"> < мен класс = "Кубок FA-соода-Араба"> </ I> Production </a> <ул> <ли> <a href="#"> Кийим </a> <ул> <ли> <Гуппи "#"> Бут </a> </ ли> <ли> <a href="#"> Джекетс </a> </ ли> <ли> <a href="#"> Шымдар </a> < / Ли> </ ул> </ ли> <ли> <a href="#"> Электроника </a> <ул> <ли> <a href="#"> камералар </a> </ Ли> <Ли> <a href="#"> Компүтерлер </a> </ ли> <ли> <a href="#"> Батирлер </a> <ул> <ли> <a href="#"> Samsung </a> </ ли> <ли> <a href="#"> ЧЭЖК </a> </ ли> <ли> <a href="#"> Apple </a> </ Ли> < / ул> </ ли> </ ул> </ ли> <ли> <a href="#"> тамак </a> </ ли> <ли> <a href="#"> Tools </ а> </ ли> <ли> <a href="#"> Башт Химиялык </a> </ ли> </ ул> </ ли> <ли> <a href="#"> <мен класс = "Кубок FA-үзгөндөн"> </ I> Кызматтар </a> <ул > <Ли> <a href="#"> кызматы 1 </a> </ ли> <ли> <a href="#"> кызматы 2 </a> </ ли> <ли> <Гуппи "#"> кызматы 3 </a> </ ли> </ ул> </ ли> <ли> <a href="#"> <мен класс = "Кубок FA-чи-тизме"> </ I> Маалымат </a> </ ли> <ли> <a href="#"> <мен класс = "Кубок FA-конверт-ачык"> </ I> Байланыш </a> </ ли> </ ул>
Андан кийин, акыркы этап бөлүгүн баскычын берет экен. Мен колдонгон, мен кээ бир Продам, сен өз, бул кодду мен учурда жөн эле көчүрүп, бул билим белгиленген бир жерге түзө алат жараттык.
.dws-меню> ул Ли {дисплей: бөлүгү; / * Permalink - бул түзөтүү менен бөлүшүүгө пайдаланууга градиент: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 * / өбөлгөлөрү: # C9C9C9 ; / * Эски браузерлер * / өбөлгөлөрү: -moz-линиялык-градиент (жогорку, # C9C9C9 0%, # f6f6f6 2%, # c4c5c7 98%, 100% # 757 577); / * FF3.6-15 * / өбөлгөлөрү: -webkit-линиялык-градиент (жогорку, # C9C9C9 0%, # f6f6f6 2%, # c4c5c7 98%, 100% # 757 577); / * Chrome10-25, Safari5.1-6 * / өбөлгөлөрү: сызыктуу-градиент (ылдый, # C9C9C9 0%, # f6f6f6 2%, # c4c5c7 98%, 100% # 757 577); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / элеги: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# C9C9C9', endColorstr = "# 757577 ', GradientType = 0); / * IE6-9 * / толтуруу: 15px 30px 15px 40px; арип өлчөмү: 14px; түс: # 454547; текст кооздугу: эч бири; текстти өзгөртүп: тамга; өтүү: баары 0.3s тынчтыктын; } .Dws-меню Ли: үстүнө {/ * Permalink - бул градиент түзөтүү жана бөлүшүү үчүн колдонуу: http://colorzilla.com/gradient-editor/#e0e1e5+0,454547+2,454547+98,e0e1e5+100 * / негизги маалыматтар: # e0e1e5; / * Эски браузерлер * / өбөлгөлөрү: -moz-линиялык-градиент (жогорку, # e0e1e5 0%, 2% # 454 547 # 454 547 98%, 100% e0e1e5); / * FF3.6-15 * / өбөлгөлөрү: -webkit-линиялык-градиент (жогорку, # e0e1e5 0%, 2% # 454 547 # 454 547 98%, 100% e0e1e5); / * Chrome10-25, Safari5.1-6 * / өбөлгөлөрү: сызыктуу-градиент (ылдый, # e0e1e5 0%, 2% # 454 547 # 454 547 98%, 100% e0e1e5); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / элеги: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5 "GradientType = 0); / * IE6-9 * / түс: #ffffff; кутуча-көлөкө: 1px 5px 10px -5px кара; өтүү: баары 0.3s тынчтыктын; }
каалаган болсо, бул меню түстү пайда гана жетиштүү, сайтта силерге барып, кодексинин орнотору стили боюнча берилиши мүмкүн. таза CSS жасалган жыйынтык, жөнөкөй жана ошол эле убакта жакшы горизонталдуу меню бир болду.