За да започнете, се направи две снимки:
Те са две части от един раздел на менюто. Правото да се направи такава дължина, че когато е избран размер на шрифта от картинката поставят най-дългата дума от всички раздели на списъка. Ами, например, "supermegakulforumblinvasche!". Всяка от снимките се разделя на две части, едната при другата. В горната си част - първоначалното състояние, дъното - активен, когато мишката.
Принципът е много прост и елегантен: в стила лист ние определяме различни състояния на различните координатите на изображението. Това означава, че изображението се зареди изцяло, но на страницата, ние първоначално виждат само горната част. Когато обобщим ключа на мишката, как да се "появи" в долната част.
Така че, приготвени снимки. В стила лист, пишем следния код:
#menu ширина: 860px;
височина: 39px;
марж: 0 автомобил;
фон: # 69С;
шрифт: 90% «Comic Sans MS», Verdana, Arial, безсерифен;
Онлайн-височина: 1.8em;
ясно: и двете;
>
#menu ул подложка: 5px 10px 0 30px;
списък стил: няма;
>
дисплей #menu Li: вградени;
>
#menu поплавък: ляво;
фон: URL (снимки / tableft.gif) не-повторение остави върха;
подложка: 0 0 0 4px;
>
#menu една педя поплавъка: ляво;
фон: URL (снимки / tabright.gif) никой не се повтаря горния десен;
подложка: 4px 20px 5px 10px;
Цвят: #fff;
>
#menu на: навъртам цвят педя: # FF9834;
>
#menu на: висене фон-позиция: 0% -42px;
>
#menu на: висене период фон-позиция: 100% -42px;
>
#menu li.active плава: ляв;
цвят: # FF9834;
фон: URL (снимки / tableft.gif) не-повторение остави върха;
фон-позиция: 0% -42px;
подложка: 0 0 0 4px;
>
#menu li.active педя поплавъка: ляво;
фон: URL (снимки / tabright.gif) никой не се повтаря горния десен;
подложка: 4px 20px 5px 10px;
фон-позиция: 100% -42px;
>
Нека разгледаме рекорд в детайли. Ширината на 860 пиксела меню блок, 39px на височина, авто-центриран дисплей, син фон и почистване от двете страни или да надясно или наляво, нищо допълнително не е излязъл.
След това се определи списък поле ул и забраните показването на маркери. Ето защо, ние имаме списък, наречен непокрит.
След това, ние сочи към мястото на списък Ли "в линия", в противен случай браузъри по подразбиране винаги ги поставя в колона.
Но на следните две правила са доста интересни. И в двата стила за показване на връзки, но във втория имаше странна дума педя. Защо е това?
Факт е, че ние трябва да се свързват нашите бутони за таговете на изображението във фонов режим. В този случай, ние имаме един маркер - . Предшестващо свързва само към изходния маркер. K privyazhesh вече не нищо. Ето защо ние въведохме допълнителен етикет педя. Тя се нарича неутрален. тъй като тя може да се използва навсякъде и само по себе си не носи каквато и значително натоварване от двамата.
Така че ние вързани първата снимка (като фон), за да маркирате. а вторият да педя. И за първи мястото, посочено в горния ляв ъгъл, и забрани тя да се повтори, а вторият - в горния десен ъгъл, а също и без повторение.
Полетата тук не зададен така или иначе. На първо място, ние сме посочи лявата картина да се оттеглят от левия край до 4 пиксела, който е само на ширината на изображението. Ако това не бъде направено, след това дясната снимка, която очевидно е по-широк просто "яде" отляво, защото заглавията на разделите, ние все още не са много дълги.
Що се отнася до областта за дясното изображение, попитахме ги като правото на секцията е едно и също пространство, както и в ляво и дясно (в противен случай на браузъра "podozhmet" дума кървене). Като цяло, експеримент и да видим. )
Референтен попита белият цвят (бяло на зелено - просто обожавам). И за активния - оранжев на бял фон.
Следващите две правила просто поръчват нашите снимки се крият в горната и долната част на дисплея, когато мишката върху тях с мишката. Това се прави с помощта на позициониране. За лявото изображение сме посочено в положение 0% (т.е. най-лявата позиция) и минус 42 пиксела. Това означава, че ние просто "отне" от нея отгоре. И тъй като на снимката се зарежда първоначално към страницата, напълно, а след това ще ни покаже в долната част. За дясното изображение са посочили, съответно, 100% позиция (крайно дясно) и минус 42 пиксела.
Въпросът е защо ние не веднага да видите цялото изображение на страницата? И тъй като в самото начало на нашата menyushek блок попитахме височина 39 пиксела (може да бъде 42, но тъй като различните браузъри смятат, маржове, ние презастрахован малко). Нещо като прозорец. Не забравяйте съветски филми за Шерлок Холмс? Там, в самото начало са умни надписи под формата на поле bukovok? Те предизвикана черно шаблон с прорези и получава смислени думи. Това е за един и същ принцип и направи нашето меню. Толкова е просто. )
Две други правила сме писмени активния дял. Също така е ясно - активния дял трябва да бъде препратка, но трябва ясно да се посочи, че тя е активна в момента. Това е да изглеждат така, сякаш връзката е паднал на мишката. Тук ние също командва снимките лукав надничат долна част, но те вече не са прикрепени към етикетите на връзката и маркерите на списък от низове - Ли.
Не забравяйте да приключи в ляво винаги означава - (поплавъка: ляво). В противен случай, проблеми са неизбежни.
Това изглежда е всичко. Но IE все още е браузърът с характера и нашата красива меню, като грозно изкривен. (Този урок не се вижда, но на цялото събрано страницата получава някаква луга между менюто и основната част. Тя просто се случва, защото IE (за разлика от другите браузъри) в собствената си изчислява размера на нивите и полетата. В такова възмущение хитър уеб дизайнери са дошли с не по-малко хитър болт наречената хак това означава, подправки за IE в стила лист е послепис (често указващ версията IE) "... на този езичници показват моите блестящи menyuhu по този начин: (и след това допълнително правило) ..."..
Тази рана може да се впише в стила основния лист и може да затегнете отделен лист което му придава правилна връзка. Направихме така, и закрепете към страницата, на друга CSS. наричайки го просто ie.css. В него се пише следното:
#menu подложка педя: 4 пкс 20px 4px 10px;
>
#menu li.active педя пълнеж: 4 пкс 20px 4px 10px;
>
Както можете да видите, за разлика от основния лист, където сме посочили дъно поле за един по-малко пиксели (4 вместо 5). Това е цялата беда.
И накрая, най-кода на страницата (тук само menyuha, всички останали поставени на страницата маркери липсват):
Свързани статии