Блогът за красивото
Добрата новина е, че тя е почти винаги един и същ. Изключение. може би един случай: когато падащото меню на сайта. Например, има бутон "уроци", което предполага, че пада списък на "уроци Photoshop", "Уроци флаш», «3D Max уроци" и т.н. За меню polzovatelyatakoe онлайн е много удобно, но за търсачки като дизайн ще усложни и забави индексирането.
Но днешния урок ще бъде по примера на менюто, което, заедно с останалата част от дизайна, което направих за друг сайт. Макар че аз не мога да кажа, че този сайт друг коз в тестето на моята работа. Но аз се надявам, че собственикът ще продължи да се пълни и той няма да бъде друг мъртъв проект, но мога да с времето да се гордеем, че сложи ръка на него.
Достатъчно думи, може да получи до точката;)
Този код се поставя в лист каскаден стил (CSS). Ако все още не знаете какво е това, прочетете книгата "Блок Layout" от съдържанието на които ще се съберат много полезна информация.
ширина #nav: 990px;
/ * Ширина на цялата навигационното меню * /
височина: 50px;
/ * И, разбира се, неговата височина * /
фон: URL (IMG / nav.jpg) не-повторение # 374f37;
/ * Тук се настройват параметрите на фона; само да зададете пътя до снимката, която е на заден план ще служи, след като се отбележи, че на снимката не се повтаря в края посочва цвета на менюто, в случай, че забраните график * /
шрифта: 18 пкс;
плаваш: ляв;
/ * Прави го така, че нашият блок с менюто, разположено в дясно; в действителност, в менюто се разширява до по цялата дължина на сайта и ни харесва, че не е нужно да, но тази настройка е необходима, за да не се "kosyachit" оформление на менюто, за да "се сприятеляват" с други единици * /
#nav ул марж: 4 пкс 25 пкс 0 0;
/ * Промяната на тези параметри, аз бутона "преместване" на заден план * /
списък стил: няма;
дисплей #nav Li: вградени;
/ * За да бутони нашите подредени, а не на колона * /
#nav поплавък: ляво;
/ * Показва, че бутоните трябва да се подредят от ляво на дясно * /
езика: блок;
ширина: 98px;
/ * Дължина на тази "рамка" * /
височина: 50px;
фон: URL ( «IMG / key.png») не-повторение;
/ * Всичко, какъвто е случаят с фона на менюто; който да не е разбрал, нека да се върнем малко по-високо, и повторете * /
текст подравняване. център;
/ * Позиция на текста в рамките на "рамка" * /
текстови декорация: няма;
/ * Направете текста, за да бъде чиста, без каквато и подчертава, че в менюто за навигация, ние нямаме нужда от напълно * /
подложка: 10px 2px 10px 0px;
/ * Това tsiferkami възможно да се коригира позицията на надписа вътре в "рамката", ако не ви харесва нещо: преместване, изтриване и т.н. * /
Цвят: #fff;
/ * Цвят на етикета, когато бутонът не е активен * /
#nav на: висене фон-позиция: 0% -50px;
цвят: # 66ff66;
/ * Цвят на текста, когато курсорът е върху бутона * /
Това е всичко, както можете да видите, нищо сложно. Остава само да ви разкажа за опция «фон-позиция» и защо имате нужда от него. Всъщност, можете да го направите без него, а просто да се регистрирате «фон» и пътя към изображението (или цвят), която ще трябва да се промени на заден план, когато мишката върху него. Но в този случай, ако потребителят има скорост беден Интернет, спирачна ще се случи, когато преместите курсора, първо фон ще изчезне напълно, а след това, когато само се зареди нова снимка, той се превръща в правилния.
Така, че това не се случи, трябва да се направи както на фона на една снимка: най-високият пост ще има бутон в неактивно състояние, по-долу, който се появява, когато мишката върху него. В зависимост от това колко е висок бутона, ние се отбележи, колко пиксела, което трябва да вземете на заден план.
За да се покаже менюто на сайта, трябва да добавите това парче код на страницата:
Ако направите шаблон за WordPress, кодът трябва да изглежда така: