Crearea de meniu vertical css vertical - clase css

Crearea unui drop-down meniuri CSS verticală

Această lecție va fi discutată în detaliu crearea elementelor verticale meniul drop-down. Pentru elementele de bază să luăm meniul lecției predpredyduschego.

Pentru a crea un meniu se va aplica clasa .drop_vert_menu;

În codul de mai multe ori pentru a satisface recordul ca acest .drop_vert_menu> li
Arrow> indică un selector copil (li)

Pentru a adăuga un element de submeniu - trebuie să înainte de închidere „Paste ca“ un alt meniu (de exemplu, tag-uri

    în care sunt punctele
  • ).


    Principalii parametri în CSS-stiluri pentru meniul drop-down:

    top: 2px; - determină cât de mulți pixeli vor abate de jos scadea sub-meniuri;
    stânga: 195px; - cantitatea de indentare de pe marginea stângă;
    Poziția: relativă; - puncte vor fi situate una după alta, în loc să se micșoreze într-o grămadă;
    Poziția: absolută; - aceasta înseamnă că elementele din meniul principal va fi într-o poziție fixă ​​în raport sub;
    display: none; - elementul este invizibil (ca în cazul în care nu este).
    display: block; - înseamnă că această sub-meniu va fi „bloc-cauciuc, cum ar fi“ - în cazul în care numele sub-mare, se va întinde în înălțime.

    De asemenea, în CSS - opțiunea de cod va fi prezent:

    border-top: 1pixel Solid alb; - cu el puteți ajusta dimensiunea și culoarea padding între elementele de meniu; Asta este, vă va ajusta grosimea și culoarea de sus a cadrului. O umplutură poate fi în continuare reglată prin intermediul unui atribut - marja de ...; Valoarea altor parametri, ar trebui să fie familiarizați din lecțiile anterioare pentru CSS, precum și lecții HTML.

    Creați două fișiere: drop_vert_menu.css și test_menu.html. Se așteaptă ca aceste fișiere sunt în același director.

    Cu siguranță poți să faci ceva mai interesant decât acest meniu. Tot ce trebuie - este de a găsi exemple de meniu, care sunt aproximativ similare cu cele pe care le au în minte și le studia, pentru că ar modifica atunci.

    Cel mai bun mod de a învăța într-un astfel de caz, ar fi - „metoda de lance“. Adică, vedeți un parametru care specifică culoarea sau dimensiunea -> schimba la o altă setare și să vedem ce se va întâmpla, etc. Și, după câteva modificări, va fi capabil (fără exemple străine) pentru a face ceea ce ai nevoie.