whycomputer.com >> Cunoașterea pe Internet >  >> Software-ul

Cum se creează un meniu HTML și submeniul meniului drop-down

Meniurile derulante - cunoscute și sub numele de meniuri "suckerfish" - folosesc o combinație de HTML și CSS (cascading style sheets) pentru structură și stil. Partea HTML a unui meniu drop-down constă din liste de gloanțe și liste de gloante imbricate. După ce stilul bara de meniu și principalele linkuri de navigare din CSS, stilul listei de gloante imbricate este submeniuri. Selectorul ": hover" din CSS vă permite să modificați proprietatea de afișare a submeniului ascuns pentru a "bloca" pentru ao face să reapară.

Pasul 1
Codificați meniul în HTML utilizând "
"și"

  • ":
  • Link 1
  • Link 2
  • Link 3

    Adăugați o div divizare înainte de sfârșitul listei. Veți adăuga un stil la clasa "clearfix" pentru a face ca fundalul meniului să se întindă.

    Pasul 2
    Adăugați submeniul ca o nouă listă neordonată imbricată în etichetele "

  • " ale legăturii părinte:
  • Link 1
  • Link 2
  • Link 1
  • Link 2
  • Link 3

  • Link 3


    Pasul 3
    Deschideți foaia de stil și stilul meniului utilizând CSS. Eliminați atât gloanțele, cât și linia stângă: #menu {style-list: none; umplutura: 0; } Rețineți că "#menu" se potrivește cu numele de identificare al codului HTML exemplu.

    Pasul 4
    Adăugați o culoare de fundal în bara de meniu: #menu {style-list: none; umplutura: 0; fundal-culoare: albastru; }

    Pasul 5
    Împingeți elementele de meniu spre stânga astfel încât să se alinieze orizontal pe bara de meniu: #menu li {float: left; }

    Pasul 6
    Stilul legăturilor care alcătuiesc elementele de meniu. Adăugați elemente de umplutură la linkuri pentru a le asambla vertical în bara de meniu, făcându-le mai ușor să faceți clic și să treceți peste. Trebuie să modificați proprietatea "afișare" la "blocare" pentru a adăuga umplutura la linkuri: #menu li a {display: block; padding: 8px 15px; text-align: centru; culoare albă; font-weight: bold; text-decorare: nici unul; } Rețineți că în "padding" au fost setate două valori. Prima valoare este căptușirea verticală, în timp ce efectul secundar al efectului secundar.

    Pasul 7
    Stilul submeniului și al elementelor acestuia. Mai întâi trebuie să poziționați submeniul. Îndepărtați și gloanțele și chingile din submeniuri: #menu ul {position: absolute; listă: nu există; umplutura: 0; }

    Pasul 8
    Îndepărtați flotoarele din stânga din elementele din submeniuri: #menu ul li {clar: left; }

    Pasul 9
    Adăugați "dsiplay: none" la regula "#menu ul" pentru a dezactiva submeniul, deoarece nu doriți ca acesta să apară decât dacă utilizatorul se deplasează peste elementul părinte. Faceți din nou meniul să apară din nou folosind acest cod: #menu li: hover ul {dipslay: block; }
    Adăugați regula "clar fix" la div: .clearfix {clear: ambele; }

    Sfaturi
    Adăugați evidențierea elementelor de meniu atunci când utilizatorul se deplasează peste ele. O regulă de stil pentru a schimba culoarea de fundal a unei legături suspendate arată ca "#menu a: hover {}".
    După ce ați terminat construirea meniului utilizând HTML și CSS, puteți adăuga un plugin jQuery pentru a face animații frumoase pentru meniurile drop-down.


    URL:https://ro.whycomputer.com/software-ul/100507813.html

  • Software-ul
    • Cum se creează și se editează tabele în Microsoft Word

      Microsoft Word facilitează organizarea informațiilor în coloane și rânduri folosind un tabel. Tabelele facilitează citirea datelor. De asemenea, puteți crea simetrie într-un document creând o tabelă pentru afișarea textului într-o anumită zonă a paginii. După ce ați creat un tabel, modificați-l schi

    • Cum se creează un meniu în Microsoft Publisher

      Microsoft Publisher este o aplicație Office care pur și simplu nu pare să fie la fel de populară ca și cuvântul său frate. Dar editorul vă poate ajuta să creați publicații pe care ați fi mândri să le prezentați. Dacă vă simțiți intimidați de către Publisher, încercați acest proiect. Puteți crea un m

    • Cum se creează un CV pe WordPerfect

      Crearea unui CV poate fi consumatoare de timp și frustrant. Formatarea unui CV și luarea deciziilor asupra informațiilor care trebuie incluse poate necesita o foarte bună planificare și o analiză atentă. Din fericire, programul WordPerfect de la Corel face ca întregul proces să fie mai ușor cu șablo

    Cunoașterea pe Internet © https://ro.whycomputer.com