Когато превъртите надолу на страницата - менюто е винаги най-отгоре и малко Дим. става активен, когато задържите показалеца на мишката върху менюто.
В това меню, ние ще публикуваме меню с няколко връзки, поле за търсене, както и линкове към "Up" и "Down", с която можете бързо да скочи в началото или в края на сайт / документ.
? 200 '200px': '' + (this.scrollHeight + 5) + 'пиксела ");"> #nav <
височина: 35px;
граница дъно: 1px твърдо вещество #ddd;
позиции: фиксиран;
отгоре: 0px;
лява: 0px;
надясно: 0px;
фон: #fff URL (HTTP # 58; // megascripts.ru/demo/fiks_menu/images/nav.png#41; повторете-х център ляво;
Z-индекс: 999999;>
#nav ул <
височина: 25 пкс;
списък стил: няма;
марж: 6 пиксела авто 0px автомобил;
ширина: 690px;>
#nav ул Ли <
дисплей: инлайн;
плаваш: ляв;
марж: 0px 2px;>
#nav на <
шрифта: 11 пкс;
шрифт тегло: удебелен шрифт;
плаваш: ляв;
подложка: 2px 4px;
цвят: # 999;
текстови декорация: няма;
граница: 1px твърдо #ccc;
курсора: указател;
фон: прозрачен URL (HTTP # 58; // megascripts.ru/demo/fiks_menu/images/overlay.png#41; многократно х център наляво;
височина: 16px;
Онлайн-височина: 16px;>
#nav на: мишката <
фон: # D9D9DA няма;
цвят: #fff;>
#nav a.top педя, #nav a.bottom педя <
плаваш: ляв;
ширина: 16px;
височина: 16px;>
/ * Форма за търсене * /
#nav ул li.search
#nav вход # 91; тип = "текст"] <
плаваш: ляв;
граница: 1px твърдо #ccc;
марж: 0px 1px 0px 50px;
подложка: 2px 2px 2px 2px;>
input.searchbutton <
граница: 1px твърдо #ccc;
подложка: 1px;
курсора: указател;
ширина: 30px;
височина: 22px;
фон: # E8E9EA URL (HTTP # 58; // megascripts.ru/demo/fiks_menu/images/search.png#41, без повтаряне център център;>
Навигация винаги ще бъде на върха, така че ние "лепило", с помощта на позицията: фиксирани и отгоре: 0px. фоновото изображение е полу-прозрачен фон в стила на един бутон с малка 3D-ефект. Тъй като е напълно прозрачен, можете да опитате да промените цвета на фона по подразбиране вместо бял (#ffffff).
Ние също сме пускането на високо Z-индекс, защото ние искаме да направим това устройство е на върха на всички елементи.
В списъка с фиксирана ширина 690 пиксела и е разположен точно в центъра. За да се приведе в съответствие относително позициониран елемент, за да се определи правото и лявото поле достатъчно (марж) - автоматично.
елементите на списъка следват един след друг през дисплея: инлайн.
Ще има и връзки полупрозрачен фон. Отново, тук можете да експериментирате с цвета на фона.
Когато курсора на мишката над елемент връзка, ние премахваме фона и да промените цвета на фона.
Ето всички стилове!
? 200 "200px ':' '+ (this.scrollHeight + 5) +' пиксела"); "> $ (документ # 41; .ready (функция (# 41;<
// Обработка натискане на "Up"
$ ( "# ScrollBottom" # 41; .click (функция (# 41;<
// Трябва да преминете към горната част на страницата
Var curPos = $ (документ # 41; .scrollTop (# 41 ;;
Var scrollTime = curPos / 1,73;
$ ( "Body, HTML" # 41; .animate (, scrollTime # 41 ;;
> # 41 ;;
// Обработка натискане на "Надолу" бутона
$ ( "# ScrollTop" # 41; .click (функция (# 41;<
// Трябва да превъртите до долната част на страницата
Var curPos = $ (документ # 41; .scrollTop (# 41 ;;
височина Var = $ ( "тяло" # 41; .height (# 41 ;;
Var scrollTime = (височина-curPos # 41; /1.73;
$ ( "Body, HTML" # 41; .animate (, scrollTime # 41 ;;
> # 41 ;;
> # 41 ;;
Това е всичко, направено! употреба
Свързани статии