Luați în considerare următoarele două opțiuni:
- înseamnă css: Poziția: fix, fără un site capac,
- atinge pe realizarea mai interesant, împreună cu antetul, când ne fixam meniu cu defilare activă, lăsându-l mereu la vedere, dar, în cazul în care vizitatorul se întoarce la antetul site-ului, apoi meniul nostru „ajunge la locul ei.“ Un exemplu de o astfel de abordare poti arunca o privire la și Yandex.
Fix un meniu orizontal cu CSS: Poziția: fix.
Pe de o parte, totul este simplu și ușor de rezolvat prin intermediul css în două conturi:
aspect HTML Exemplu fix meniu orizontal:
de aspect CSS fix meniu orizontal:
Acum definim adâncitura pentru conținutul paginii, egală cu înălțimea meniului:
Și aici ne-am „aproape“ totul sa dovedit. Meniu vizitatorul este „întotdeauna asupra minții.“ Dar dacă design-ul nostru este un site capac, urmat de meniu în sine, și în antetul au logo, bannere site-ul și sloganul.
Ei bine, capac de site-ul web la conținutul liniuță egală cu înălțimea de capac și meniuri cu margini între ele putem repara și.
Deci, ia în considerare cazul în care meniul este „vorbind“ pentru antet, dar în cazul în care un vizitator este în mod activ derulează în jos meniul „fix“, în partea de sus și stă în loc. Capac Site-ul nu este vizibil. În cazul în care vizitatorul se întoarce la antetul paginii, meniul „devine“ în locul lui „pentru antetul site-ului.“
Pentru a porni întregul exemplu privodem vorstku HTML al unui aspect al paginii:
Șablonul site-ului nostru este format din mai multe domenii tipice:
- Pălării site-ul - #header. înălţimea 150px
- meniu orizontal - # meniu top-aproape-fix - înălțime 30px
- pagina principală a - #Content,
- site-ul subsol - #footer.
Noi da css vorstku:
Pentru a începe cu definim adâncitura a capacului până când conținutul egală cu înălțimea meniului nostru + o adâncitură mică, cu o marjă pentru frumusețea estetică. #header
Și acum, avem grijă de faptul că pe măsură ce derulați prin meniul „fix“ din partea de sus a paginii cu precizie.
O implementare de probă vă puteți uita la acest link. și folosind roata de defilare.
Deci, aici, totul este simplu. În setările vom trece script-ul pentru următorii parametri:
- var m1 = 150; - înălțimea în pixeli, pălării,
- var m2 = 2; - liniuță, atunci când, în timpul de parcurgere capac nu este deja vizibil,
- var menuID = "menu-top-aproape-fix"; - ID orizontală pentru a fixa meniul
- var menuOpacityOnChange = "0.7"; - transparența meniului atunci când defilare:
- 1 - opac
- 0.5 - translucid
- 0.0 - complet transparent
In aceasta varianta, avem un pic de „ton“ meniul nostru, și când vom adăuga el defilare transluciditatea.
imploră imediat versiunea mai clasic, atunci când nu se schimba transparența meniului, dar nu doar substrat de meniu ca fundal pentru culoarea meniului și limita inferioară translucide (în care declivitate treptat „se mută“ de la opac la culori transparente):
Schimbarea unele de aspect CSS pentru meniul nostru orizontal fix:
Deci, aici, totul este simplu. În setările vom trece script-ul pentru următorii parametri:
- var m1 = 150; - înălțimea în pixeli, pălării,
- var m2 = 0; - liniuță, atunci când, în timpul de parcurgere pălărie nu mai este vizibil.
Un exemplu de implementare, puteți vedea făcând clic pe acest link. și folosind roata de defilare.
Meniu funcționează bine, dar dacă reîncărcați pagina, va apărea un meniu cu prima liniuță
Cu această problemă, trebuie să accesați meniul după o pagină de descărcare o singură dată.
Pentru a face acest lucru, modificați codul pentru a apela funcția cu:
Cu următorul cod:
După ce încarcă pagina, noi numim imediat marginMenuTop noastră funcție. care va testa locația de meniu pe pagină și aplicați stilul dorit
Noi vindem meniul parțial fix folosind jQuery Afixx plugin de Twitter Bootstrap
Mai multe informații despre tehnologiile web pot fi găsite în lista noastră a tuturor articolelor de pe site-ul: