Meniu derulant simplu css. Cum se creează un meniu dropdown în CSS

Să creăm un meniu de navigare orizontal simplu pentru site. Pentru a face acest lucru, vom folosi tehnici simple care vor avea ca rezultat afișarea corectă a meniului nostru în toate browserele.

Deci, să începem. Să creăm o listă cu numele meniului nostru. Numele articolelor să fie: „Acasă”, „Știri”, „Produse”, „Servicii”, „Parteneri”, „Contacte”. Creați un fișier nou numit menu.html, de exemplu, utilizând programul Dreamweawer sau folosind un blocnotes obișnuit. În ea, între etichetele corpului ne plasăm meniul. Aceasta este o listă obișnuită cu marcatori de ul cu elemente li. Desigur, facem din fiecare element de meniu un link, unde în loc de URL inserăm codul hash #. Folosind Photoshop, creați o imagine cu dimensiunea de 3x30 px, cu o umplere în gradient, așa cum se arată în figura de mai jos. Vom salva fișierul în format GIF. Să-i spunem bg.gif. Această imagine va acționa ca imagine de fundal a meniului nostru.

Iată conținutul fișierului menu.html:

Meniu orizontal simplu încrucișat

  • Acasă
  • Știri
  • Produse
  • Servicii
  • Parteneri
  • Contacte

Acum să creăm separat un fișier de stil numit main.css. Lista sa este prezentată în întregime mai jos.

Ul ( margin:0; /*zero padding*/ padding:0; /*zero padding*/ float:left; /*aliniază lista la stânga*/ width:auto;/*setează lățimea auto pe baza tipul și conținutul listei */ background-image: url(bg.gif /*set the background image*/ background-repeat:repeat-x /*repetă imaginea noastră pe orizontală*/ list-style:none); /*elimină marcatorii de listă*/ background-color:#4778c3 /*setează culoarea de fundal pentru imagine*/ font-size:13px /*set the font size*/ font-family:Arial, Helvetica, sans-serif; ; /*setează fontul*/ ) ul li ( float:left; /*aliniază elementele listei la stânga*/ ) ul a ( display:block; /*reprezintă linkurile de meniu ca elemente de bloc*/ width:100px; /* setați dimensiunea blocului*/ înălțimea: 30px /* și înălțimea blocului*/ text-align:center/*line-height: /*line spacing*/ text-decoration; eliminați sublinierea din linkuri*/ color:#fff /*link text color - white*/ border-right:#fff solid 1px /*border pe partea dreaptă a blocului (1px white line)*/ ; hover (culoare:#ccc; /*link-ul își schimbă culoarea când trece cu mouse-ul peste*/ )

Cred că nu ar trebui să existe întrebări despre conținutul fișierului main.css. Am scris sfaturile în comentarii suficient de detaliat și clar, așa că nu mă voi repeta. Nu uitați să-l conectați la pagina noastră menu.html folosind

Rezuma. Drept urmare, am obținut un meniu orizontal complet între browsere, care arată la fel nu numai în toate browserele moderne, ci și în rarități precum IE 5.5 și IE 6.0. Toate elementele de meniu sunt prezentate ca elemente de bloc și au aceleași dimensiuni de 100 px lățime și 30 px înălțime. Ca separator pentru elementele de meniu, un design de element bloc este utilizat folosind un chenar alb din dreapta de 1px grosime. Acesta este practic cel mai simplu mod de a implementa un meniu orizontal. Desigur, dacă doriți, îl puteți modifica, îl puteți face mai frumos și mai funcțional folosind imaginație, proprietăți CSS și elemente grafice suplimentare. bine si meniul nostru orizontal arata cam asa:

Avantajele acestei soluții:
Usor de facut
Cod simplu
Fără tabele sau javascript
Compatibilitate între browsere: meniul arată la fel în toate browserele
Se folosește un singur desen
Cod minim pe pagina menu.html
Cod minim pentru implementarea stilurilor în main.css

Fișierele folosite în acest exemplu pot fi descărcate în arhivă

Dacă site-ul dvs. este mai mult decât o singură pagină web, atunci ar trebui să luați în considerare adăugarea unei bare de navigare (meniu). Meniul este o secțiune a unui site web concepută pentru a ajuta vizitatorii să navigheze pe site. Orice meniu este o listă de link-uri care duc la paginile interne ale site-ului. Cel mai simplu mod de a adăuga o bară de navigare pe site-ul dvs. este să creați un meniu folosind CSS și HTML.

Meniu vertical

Primul pas în crearea unui meniu vertical este crearea unei liste cu marcatori. De asemenea, va trebui să putem identifica lista, așa că îi vom adăuga un atribut id cu identificatorul „navbar”. Fiecare element

  • lista noastră va conține un link:

    Următoarea noastră sarcină este să resetam stilurile implicite ale listei. Trebuie să eliminăm căptușeala exterioară și interioară din listă în sine și marcatoarele din articolele din listă. Apoi setați lățimea dorită:

    #navbar (marja: 0; padding: 0; list-style-type: niciunul; lățime: 100px; )

    Acum este timpul să stilați link-urile în sine. Le vom adăuga o culoare de fundal, vom modifica parametrii textului: culoare, dimensiunea și greutatea fontului, vom elimina sublinierea, vom adăuga mici indentații și vom redefini afișajul element de la inline la bloc. În plus, cadrele din stânga și de jos au fost adăugate elementelor din listă.

    Cea mai importantă parte a modificărilor noastre este redefinirea elementelor inline pentru a bloca elemente. Acum linkurile noastre ocupă tot spațiul disponibil al articolelor din listă, adică pentru a urmări linkul nu mai trebuie să plasăm cursorul exact peste text.

    #navbar a ( culoare de fundal: #949494; culoare: #fff; umplutură: 5px; text-decor: niciunul; font-weight: bold; margine-stânga: 5px solid #33ADFF; display: block; ) #navbar li ( chenar-stânga: 10px solid #666 chenar-jos: 1px solid #666;

    Am combinat tot codul descris mai sus într-un singur exemplu, acum făcând clic pe butonul de încercare, puteți accesa pagina de exemplu și vedeți rezultatul:

    Numele documentului

    Încerca "

    Când treceți mouse-ul peste un element de meniu, aspectul acestuia se poate schimba, atrăgând atenția utilizatorului. Puteți crea un astfel de efect folosind pseudo-class:hover.

    Să revenim la exemplul de meniu vertical discutat mai devreme și să adăugăm următoarea regulă la foaia de stil:

    #navbar a:hover (culoare de fundal: #666; chenar-stânga: 5px solid #3333FF; ) Încercați »

    Meniu orizontal

    În exemplul anterior, ne-am uitat la bara de navigare verticală, care se găsește cel mai adesea pe site-urile web din stânga sau dreapta zonei principale de conținut. Cu toate acestea, meniurile cu legături de navigare sunt adesea situate orizontal în partea de sus a paginii web.

    Un meniu orizontal poate fi creat prin stilarea unei liste obișnuite. Afișează proprietatea elementelor

  • trebuie să atribuiți valoarea în linie, astfel încât elementele din listă să fie localizate unul după altul.

    Pentru a plasa elementele de meniu pe orizontală, creați mai întâi o listă cu marcatori cu linkuri:

    Să scriem câteva reguli pentru lista noastră care resetează stilul implicit folosit pentru liste și să redefinim elementele listei de la bloc la inline:

    #navbar (marja: 0; padding: 0; list-style-type: none; ) #navbar li ( display: inline; ) Încercați »

    Acum tot ce trebuie să facem este să definim stilul pentru meniul nostru orizontal:

    #navbar (marja: 0; umplutură: 0; list-style-type: niciunul; chenar: 2px solid #0066FF; chenar-radius: 20px 5px; lățime: 550px; text-align: center; culoare de fundal: #33ADFF; ) #navbar a ( culoare: #fff; umplutură: 5px 10px; text-decor: niciunul; font-weight: bold; display: inline-block; width: 100px; ) #navbar a:hover ( chenar-raza: 20px 5px ; culoare de fundal: #0066FF ) Încercați »

    Meniu derulant

    Meniul pe care îl vom crea va avea legături principale de navigare situate în bara de navigare orizontală și sub-articole care vor apărea numai atunci când cursorul mouse-ului trece peste elementul de meniu la care se referă aceste sub-articole.

    Mai întâi trebuie să creăm structura HTML a meniului nostru. Vom plasa principalele legături de navigare într-o listă cu marcatori:

    Vom plasa sub-articolele într-o listă separată, cuibându-l în element

  • , care conține linkul părinte privind sub-articolele. Acum avem o structură clară pentru viitoarea noastră bară de navigare:

    Încerca "

    Acum să începem să scriem codul CSS. Mai întâi, trebuie să ascundeți lista cu sub-articole folosind afișarea: declarația nici unul, astfel încât acestea să nu fie afișate tot timpul pe pagina web. Pentru a afișa sub-articole, avem nevoie de asta atunci când trecem cu mouse-ul peste un element

  • lista a fost convertită din nou într-un element bloc:

    #navbar ul ( afișare: niciunul; ) #navbar li:hover ul ( afișare: blocare; )

    Înlăturăm indentările și marcajele implicite din ambele liste. Facem elemente de listă cu link-uri de navigare plutitoare, formând un meniu orizontal, dar pentru elementele de listă care conțin sub-articole setăm float: none; astfel încât să apară unul sub celălalt.

    #navbar, #navbar ul ( margine: 0; padding: 0; list-style-type: none; ) #navbar li ( float: stânga; ) #navbar ul li ( float: none; )

    Apoi, trebuie să ne asigurăm că submeniul nostru drop-down nu împinge în jos conținutul de sub bara de navigare. Pentru a face acest lucru, vom seta poziţia elementelor din listă: relativă; , și o listă care conține sub-articole poziție: absolut; și adăugați o proprietate de top cu o valoare de 100%, astfel încât submeniul poziționat absolut să apară exact sub link.

    #navbar ul ( afișare: niciunul; poziție: absolut; sus: 100%; ) #navbar li ( float: stânga; poziție: relativ; ) #navbar ( înălțime: 30px; ) Încercați »

    Înălțimea listei părinte a fost adăugată intenționat, deoarece browserele nu consideră conținutul plutitor ca conținut element, fără a adăuga înălțime lista noastră va fi ignorată de browser, iar conținutul care urmează listei se va încheia în meniul nostru.

    Acum trebuie doar să stilăm ambele liste și meniul drop-down va fi gata:

    #navbar ul ( afișare: niciuna; culoare de fundal: #f90; poziție: absolut; sus: 100%; ) #navbar li:hover ul ( afișare: bloc; ) #navbar, #navbar ul (marja: 0; umplutură: 0; list-style-type: nici unul; înălțime: 100%; ) #navbar li a ( afișaj: bloc; umplutură: 6px; lățime: 100px; culoare: #fff; text-decoration: none; text-align: center; ) #navbar ul li ( float: none; ) #navbar li:hover (culoare de fundal: #f90; ) #navbar ul li:hover (culoare de fundal: #666; )

    1. Meniu jQuery luminos vertical

    2. Efect cool. Meniu de dans.

    4. Lista derulantă folosind jQuery

    Stil excelent al elementului de interfață sub forma unei liste derulante.

    Când treceți mouse-ul peste buton, în partea de sus apare un panou.

    6. Plugin jQuery „MobilyBlocks” pentru afișarea unui meniu radial

    7. Meniu folosind sprites

    Meniu javascript animat cu efect de strălucire.

    Meniu proaspăt, frumos folosind jQuery.

    9. Meniul jQuery „GarageDoor”.

    10. Meniul de derulare vertical jQuery

    Implementarea unui meniu cu un număr mare de articole. Derulează când mutați cursorul mouse-ului în sus sau în jos.

    11. Designul listei derulante jQuery

    12. Plugin de navigare în pagină

    Derulare lină la secțiunea dorită de pe pagină. Plugin de navigare jQuery One Page.

    13. Plugin „Meniul conținut animat”

    Nou plugin jQuery. Implementare excelentă a navigării pe site animate. Când parcurgeți elementele de meniu, apare un bloc cu o descriere și posibile link-uri și, în funcție de elementul selectat, se schimbă fundalul paginii, care se întinde pentru a umple întregul ecran, indiferent de dimensiunea ferestrei browserului. Asigurați-vă că consultați pagina demo.

    14. Plugin de meniu jQuery „Sweet Menu”.

    Meniu animat cu elemente pop-up.

    15. S-a remediat meniul jQuery

    Când derulați în jos în pagină, meniul rămâne fix în partea de sus a ecranului.

    16. Meniuri de derulare pentru kitul de glisare

    Pentru a implementa un meniu vertical cu un număr mare de articole. Derularea articolelor se face folosind rotița mouse-ului sau folosind link-urile „Anterior” și „Următorul”.

    17. Meniu elegant CSS3

    18. Noul meniu CSS3 în stil Apple

    Meniu nou în stil Apple. Pare mai întunecat decât înainte, dar nu mai puțin drăguț.

    19. Meniul jQuery original

    Meniu derulant cu efect de fundal. Subelementele din meniu se extind în sus. Când treceți cu mouse-ul peste un element de meniu, imaginea de fundal se schimbă.

    20. Meniu animat cu jQuery

    Meniu animat. Elementele de meniu sunt prezentate sub formă de pictograme și descrieri. Mai multe efecte grozave când treceți mouse-ul peste un element de meniu. Există 8 efecte, pentru a le vedea pe toate - urmați linkurile Exemple1-Exemple8 de pe pagina demo.

    21. „Meniu derulare” Meniu XML cu defilare

    Meniu de defilare pe verticală și orizontală. O soluție bună dacă există un număr mare de articole în meniu.

    22. Meniul contextual pe un site web folosind jQuery

    Un meniu apare când faceți clic dreapta pe o anumită zonă.

    23. Meniu circular pe două niveluri pentru site

    Când selectați un element de meniu, elementele de submeniu sunt afișate în partea dreaptă.

    24. Meniul jQuery CSS3 cu efect de estompare „Blur Menu” CSS3

    Meniul original jQuery CSS3 vine în 7 stiluri diferite. Când treceți mouse-ul peste unul dintre elementele de meniu, restul par să se estompeze.

    25. Câteva meniuri jQuery CSS3 animate spectaculoase

    10 meniuri animate creative. Meniuri CSS3 orizontale și verticale cu diferite efecte și tranziții.

    Arhiva include și fișierul PSD de meniu original.

    27. Meniul MagicLine

    Fundalul sau sublinierea unui element de meniu urmează mouse-ul cu o ușoară întârziere, în timp ce fundalul își schimbă ușor culoarea pe măsură ce se deplasează de la un articol la altul. Efect foarte frumos, pare neobișnuit. Atenție: efectul nu funcționează în operă

    28. Bule de imagine

    Un efect excelent când treceți mouse-ul peste una dintre imagini. Efectul amintește oarecum de jQDock descris mai sus.

    31. Meniuri jQuery interesante cu diverse efecte

    Meniu orizontal, vertical. Efecte interesante.

    32. Excelent meniu jQuery în stil Apple

    34. Meniu jQuery cu un efect interesant

    36. Meniu proaspăt cu un efect interesant folosind jQuery

    Un efect foarte interesant. Perfect pentru proiectarea site-urilor web de portofoliu.

    Efectul interesant al miniaturilor care apar la hover.

    40. Listă derulantă cu derulare automată

    Efect de tranziție plăcut între articole.

    42. Excelent meniu jQuery

    43. Frumos mare meniu jQuery

    44. Meniuri de derulare jQuery

    Elementele de meniu sunt prezentate sub formă de miniaturi.

    46. ​​​​Meniul de navigare radial jQuery

    47. Meniul CSS și jQuery

    O bară de navigare cu o casetă de căutare care devine translucidă pe măsură ce derulați în jos pe pagină.

    48. Meniul jQuery orizontal

    49. Meniul jQuery vertical

    Meniu vertical grozav. Când treceți cursorul, apare un element de meniu.

    50. Meniul jQuery orizontal

    Un efect interesant când treceți cursorul peste un element de meniu.

    52. Meniul dropdown jQuery

    Când treceți mouse-ul peste meniu, vor apărea elementele acestuia. Elementele care apar sunt afișate sub formă de arc, a cărui rază o puteți seta la configurarea pluginului. În unele browsere nu veți vedea un arc de afișare, meniul va fi afișat direct, dar acest lucru nu va strica impresia generală a implementării acestui meniu jQuery.

    53. Bara de navigare CSS și jQuery

    Un efect interesant când treceți mouse-ul peste un element de meniu.

    54. Panoul pop-up jQuery

    Meniu animat proaspăt în tonuri de gri.

    58. Navigare pe coloană pe site folosind jQuery

    O soluție interesantă pentru navigație, care este prezentată sub formă de dungi verticale. Când treceți mouse-ul peste aceste bare, apar o imagine pentru element și o listă de submeniuri. Când faceți clic pe un element de submeniu, apare o pagină cu o descriere. Această implementare este perfectă pentru site-uri promoționale sau prezentări. Asigurați-vă că verificați demo-ul pluginului.

    59. Navigare pe site jQuery

    Navigarea pe site este prezentată sub formă de 4 imagini, când treceți cu mouse-ul peste ele veți observa un efect animat interesant.

    60. Bara de navigare derulează cu conținut

    Panoul de navigare. Făcând clic pe săgeată, pagina derulează. Navigarea derulează împreună cu conținutul paginii.

    61. Panoul jQuery cu diverse servicii sociale

    62. Meniu jQuery animat îngrijit

    63. Meniul jQuery „Penele de acuarelă”.

    O zi bună tuturor celor care citesc acum această publicație. Astăzi vreau să vă povestesc despre unul dintre instrumentele de creare a site-urilor web de care nicio resursă web nu se poate lipsi. Acesta este meniul site-ului sau cum se spune și harta site-ului. Astăzi există un număr nelimitat de tipuri și subtipuri de meniuri.

    Dezvoltatorii de magazine online, bloguri, servicii educaționale și alte resurse experimentează și creează din ce în ce mai multe hărți noi și neobișnuite. După ce ați citit articolul, veți afla în ce grupuri principale sunt împărțite toate tipurile de panouri de navigare, veți putea încerca fiecare dintre ele și, de asemenea, veți afla cum să scrieți codul de meniu pentru un site web html. Acum să trecem la treabă!

    Instrumente pentru crearea unei bare de navigare

    Există mai multe moduri de a crea un meniu în limbaj de marcare. Conceptul lor de bază este utilizarea unei liste nenumerotate. Astfel, în html 4, care ne este familiar, dezvoltatorii scriu etichete pe pagină

    • Serghei Savenkov

      un fel de recenzie „scurtă”... de parcă s-ar grăbi undeva