Cum se face un meniu drop-down?

Multe dintre meniurile derulante pe diferite site-uri. Acest meniu face ca site-ul dvs. să fie mai funcțional și mai intuitiv pentru utilizatorul din rețea care la vizitat. Despre cum se face un meniu drop-down, articolul nostru va spune.

Joomla

Trebuie să accesați site-ul Panoului de control, apoi în "Meniu", apoi în "Extensii", apoi în "Module manager";
Acum trebuie să găsiți modulul responsabil pentru Site Menu. Acesta poate fi, de asemenea, în "Module Manager" (un plugin care este responsabil pentru afișarea meniului pe acest site);
Apoi, trebuie să faceți clic pe modul și să efectuați următoarele setări:
- "Activat" - "Da";
- "Afișați întotdeauna sub-elementele încorporate" - "Da";
- "Activați părintele" - "Da";
- "Deschideți meniul" - "Da";
Salvați setarea;
Apoi trebuie să mergeți la "Toate meniurile", apoi pe "Meniu" și să selectați meniul din lista în care va fi creat elementul cu sub-elementele derulante;
Faceți clic pe butonul "Creați";
Acum aveți nevoie pentru a face elemente de meniu și sub-elemente doar atunci, ceea ce este necesar pentru a selecta materialele, adică, șablonul de categorie (de exemplu, un link);
Apoi, trebuie să introduceți numele acestui meniu șisetați setările, principalele dintre care - „mamă“ - meniu din care va scadea diferite sub, de aceea trebuie să selectați meniul principal este elementul părinte.
Apoi trebuie să specificați categoria la care va fi legătura sub-elementului dvs. și să salvați setarea

Iată cum puteți face un meniu derulant pentru Joomla. Dacă doriți să faceți mai multe astfel de elemente, atunci trebuie să faceți pașii de mai sus de mai multe ori.

HTML și CSS

Mai întâi trebuie să creați un meniu și să definițistructura sa. Apoi, trebuie să aranjați elementele într-un mod ușor de utilizat și să vă gândiți la numele corect și ușor de înțeles al secțiunilor viitoare. Acum rămâne să determinăm acele elemente care vor fi drop-down și sub-punctele necesare care vor fi în aceste puncte;
Apoi, trebuie să desenați structura selectată folosind html-tags. Arata cam asa:
- <Ul>
  <li> <a href="#"> Referința dvs. # 1 </a> </ li>
- <li> <a href="#"> Linkul dvs. # 2 </a>
  - <Ul>
    <li> <a href="#"> numărul articolului 2-1 </a> </ li>
  - <li> <a href="#"> Numărul articolului 2-2 </a> </ li>
  - <li> <a href="#"> numărul articolului 2-3 </a> </ li>
    </ ul> </ li>
- <li> <a href="#"> Referința dvs. # 3 </a>
  - <Ul>
    <li> <a href="#"> articolul # 3-1 </a> </ li>
  - <li> <a href="#"> Numărul articolului 3-2 </a> </ li>
  - <li> <a href="#"> Elementul dvs. # 3-3 </a> </ li>
  - <li> <a href="#"> Numărul articolului 3-4 </a> </ li>
    </ ul> </ li>
- </ ul>
Apoi trebuie să puneți toate meniurile în bloc,desemnat și setat identificatorul (). Acest lucru vă va permite să vă atribuiți exclusiv funcțiile acestui bloc, fără să atingeți alte blocuri. În identificator, trebuie să specificați un nume ale cărui proprietăți le descrieți în pașii următori;
Acum trebuie să creați liste, în care este lista în sine, • să fie fiecare linie și să adăugați pentru referințe viitoare ceea ce va fi creat prin meniul drop-down, o listă cu sub-elementele corespunzătoare;
Apoi, trebuie să transformați numele acestor elemente în legături, să le includeți și să le alocați parametrului "href-address" al paginii dorite specificată de link. Iată cum html pentru a face un meniu drop-down;
Acum trebuie să setați proprietățile listei dorite folosind css. Pentru a face acest lucru, trebuie să le adăugați în fișierul css după cum urmează:
- #vmenu ul {padding: 0px; margine: 0px; lățime: 250px; listă: nu există;},
în cazul în care "padding" este o indentare în interior (trebuie să fie«0»), «marja» - este indentat din exterior (trebuie să fie „0»), «lista stil» - aceasta este lista de stil (puteți pune valoarea «nici unul», pentru a elimina punctul), lățimea - lățimea acestei liste;
Apoi trebuie să adăugați proprietățile elementului: #vmenu ul li {poziția: relativă;} este parametrul poziționării necesare (poziția elementelor este "poziție"), "relativă" este valoarea necesară pentru a determina locația meniului drop-down în raport cu meniul de pornire. Acest meniu va fi vertical;
Apoi, trebuie să specificați proprietățile listei care se află în elementul unei alte liste:
- #vmenu li ul {poziție: absolută; afișare: niciunul; top: 0; stânga: 250px; }
unde "poziția: absolută „- este absolut de ocupare,«la stânga»și« sus submeniu în raport cu meniul „- o locație utilizând crestătura din partea stângă și partea de sus,« display: none - opțiunea de afișare (inițial, lista nu va fi publicată);
Acum trebuie să introduceți parametrii pentru link-urile dvs.:
- #vmenu ul li a {umplutură: 5px; afișare: bloc; culoare: # 606060; text-decoration: nici unul; fundal: # d8d8d8;},
unde "afișează:bloc "este un parametru afișat care face un element sub forma unui bloc," umplutura "este o liniuță," culoare "este culoarea linkului (text)," fundal "este culoarea liniei (fundal)," decorarea textului " stilul linkului dvs. (în acest caz, sublinierea este eliminată);
Apoi trebuie să setați acțiunea în cazul deplasării cursorului:
- #vmenu li: hover ul {afișare: bloc;};
unde - "li" este linia listei, "ul" este lista care va fi vizibilă. Iată cum se face meniul drop-down css;
De asemenea, puteți adăuga parametri, cum ar fi parametrul imaginii sau culorile pentru fundal, fontul legăturilor, caracteristicile orizontale și multe alte proprietăți pentru vizualizarea meniului.