Când derulați pagina în jos, meniul rămâne întotdeauna în partea de sus și se estompează. Când mutați mouse-ul în meniu, acesta devine activ.
În acest meniu vom plasa mai multe link-uri de meniu, un formular de căutare, precum și linkurile "Sus" și "Jos", cu ajutorul cărora puteți naviga rapid la începutul sau sfârșitul site-ului / documentului.
200? '200px': '' + (acest.scrollHeight + 5) + 'px'); "> #nav <
înălțime: 35px;
frontală de fund: 1px solid #ddd;
poziție: fixă;
top: 0px;
stânga: 0px;
dreapta: 0px;
fundal: #fff url (http # 58; // megascripts.ru/demo/fiks_menu/images/nav.png#41; repeat-x centrul stânga;
z-index: 999999;>
#nav ul <
înălțime: 25px;
listă: nu există;
margine: 6px auto 0px auto;
lățime: 690px;>
#nav ul li <
afișare: inline;
float: stânga;
margine: 0px 2px;>
#nav a <
font-size: 11px;
font-weight: bold;
float: stânga;
padding: 2px 4px;
culoare: # 999;
text-decoration: nici unul;
frontieră: 1px solid #ccc;
cursor: pointer;
fundal: adresa URL transparentă (http # 58; // megascripts.ru/demo/fiks_menu/images/overlay.png#41; repeat-x centru stânga;
înălțime: 16px;
line-height: 16px;>
#nav a: hover <
fundal: # D9D9DA nici unul;
culoare: #fff;>
#nav a.top span, #nav a.bottom span <
float: stânga;
lățime: 16px;
înălțime: 16px;>
/ * formularul de căutare * /
#nav ul li.search
#nav input # 91; type = "text"] <
float: stânga;
frontieră: 1px solid #ccc;
margine: 0px 1px 0px 50px;
umplutură: 2px 2px 2px 2px;>
input.searchbutton <
frontieră: 1px solid #ccc;
padding: 1px;
cursor: pointer;
lățime: 30px;
înălțime: 22px;
fundal: # E8E9EA url (http # 58; // megascripts.ru/demo/fiks_menu/images/search.png#41; centru de centru fără repetare;
Navigația va fi întotdeauna în partea de sus, pe măsură ce o "lipim" folosind poziția: fix și top: 0px. Imaginea de fundal va fi un fundal semi-transparent în stilul butonului cu un efect 3D ușor. Deoarece este complet transparent, puteți încerca să schimbați culoarea de fundal implicită în loc de alb (#ffffff).
De asemenea, expunem un z-index înalt, deoarece dorim ca acest bloc să fie pe lângă toate elementele.
Lista are o lățime fixă de 690 de pixeli și este poziționată strict în centru. Pentru a alinia elementul relativ poziționat, este suficient să specificați marginea dreaptă și cea stângă (auto).
Elementele listei merg unul după altul datorită afișării: inline.
Legăturile vor avea, de asemenea, un fundal translucid. Din nou, puteți experimenta culoarea de fundal.
Când plasați cursorul peste un element al unui link, eliminăm fundalul și schimbăm culoarea de fundal.
Asta e tot cu stiluri!
200 '200px': '' + (this.scrollHeight + 5) + 'px'); "> $ (document # 41;<
// Prelucrarea butonului "Sus"
$ ("# scrollBottom" # 41; .click (funcția (# 41;<
// Trebuie să derulați în partea de sus a paginii
var curPos = $ (document # 41; .scrollTop (# 41 ;;
var scrollTime = curPos / 1,73;
$ ("corp, html" # 41; .animate (, scrollTime # 41 ;;
> # 41 ;;
// Manipularea butonului "Jos"
$ ("# scrollTop" # 41; .click (funcția (# 41;<
// Trebuie să derulați în partea de jos a paginii
var curPos = $ (document # 41; .scrollTop (# 41 ;;
var înălțime = $ ("corp" # 41; .height (# 41 ;;
var scrollTime = (înălțime-curPos # 41; /1.73;
$ ("corp, html" # 41; .animate (, scrollTime # 41 ;;
> # 41 ;;
> # 41 ;;
Asta e gata! utilizare
Articole similare
Trimiteți-le prietenilor: