* Limbi: HTML / CSS
* Dificultate: Mediu
* Timp de efectuat: 20 de minute
Aceste sfaturi, ele pot fi răspunsul la o mulțime de întrebări din partea utilizatorilor sau dacă doriți să atrageți atenția vizitatorilor. Astăzi, pe Internet, puteți găsi multe site-uri web care utilizează sugestii, dar ... cum sunt ele implementate cel mai bine într-un site web? Vrem să vă spunem despre o metodă interesantă care exclude absolut utilizarea j # 097; vascript. Astăzi vom dezvolta sfaturi foarte interesante despre codul CSS3 pur și apoi le vom adapta pentru versiunea mobilă și aici trebuie să transpirăm, pentru că aici trebuie să aplicăm un mic script la j # 097; vascript de la Dean Edwards, - IE9.js.
Notă: Sfaturile sunt pe deplin acceptate de browserul IE, pornind de la versiunea 8 și de mai sus. IE7 le suportă, de asemenea, cu excepția versiunii mobile (versiunea cu capacitatea de a face clic).
Și acum să mergem mai departe spre direcția descrisă în pași. De asemenea, nu uitați să descărcați fișierele oferite la începutul articolului.
Etapa 1: Framing
Să începem cu dezvoltarea capului documentului nostru, apoi să implementăm foile de stil în el. Puteți să ștergeți tut.css atunci când vă dezvoltați propriul proiect, deoarece acest fișier este folosit numai pentru demonstrația din acest articol.
Am folosit tipul de fișier HTML5, care este specificat ca! DOCTYPE html și apoi numit două foi de stil. Primul tabel este responsabil pentru versiunea transparentă, însă în documentul sursă puteți alege mai multe teme. Cea de-a doua tabelă este tut.css, pe care am menționat-o mai sus, și este folosită pentru a crea un exemplu în articolul nostru de azi, astfel încât să puteți folosi în mod liber.
Acum, că am terminat să dezvoltăm antetul documentului, să trecem la dezvoltarea cadrului direct pentru tooltip. În acest articol vom folosi o listă neordonată, dar puteți folosi orice opțiune, deoarece în CSS folosim doar nume de clase, în loc să selectăm lista însăși, ceea ce ne permite să inserăm cu ușurință clasele în orice loc dorit.
După vârful clasei, se folosește tooltipul de clasă (de exemplu, class = "tooltipL"), care este folosit pentru toate instrucțiunile care vor fi afișate în partea stângă a elementului pe care a fost așezat cursorul. În acest caz, aceasta se referă la primul link.
Urmând exemplul de mai sus, procesul de elaborare a sfaturilor rămase va fi descris mai târziu în articol. În principiu, totul este la fel pentru fiecare indiciu. Singura diferență în clase. În loc de tooltipL, vom avea un .tooltipR pentru toate sugestiile aflate în partea dreaptă a elementului pe care se află cursorul; .tooltipB, situat în partea de jos, și .tooltipT, situat în partea de sus. În orice moment doriți, puteți adăuga un nou indiciu la propriul proiect. Tot ce trebuie să faceți este să utilizați una dintre aceste clase, în funcție de locul în care doriți să afișați indicatorul.
Sugestii pentru dispozitive mobile
Așa că am terminat dezvoltarea HTML. Acum, să aruncăm o privire la CSS pentru a face munca noastră "copil"!
Etapa 2: Dezvoltarea funcționalității și crearea de design prin CSS
Pentru exemplul nostru, folosim stilul tip-transparency.css, dar, din nou, puteți alege un stil diferit care vă place mai mult.
Pentru a începe, trebuie să adăugați câteva stiluri la cursurile noastre.
Aici vom adăuga un parametru de poziționare relativă (poziție: relativă), precum și un afișaj bloc. Astfel, tooltip-ul va pluti pe o linie cu elementele noastre, care vor fi pline deasupra cursorului.
Apoi, trebuie să ascundem toate sugestiile până în momentul în care elementele corespunzătoare nu sunt apăsate, sau până când cursorul mouse-ului nu se mișcă. Pentru aceasta, trebuie să selectăm o clasă pentru fiecare direcție și să folosim parametrul de afișare: nici unul.
Acum avem un indiciu de lucru, dar trebuie să-l emităm. Pentru majoritatea sfaturilor, totul va fi aproape același, cu excepția a câteva momente, despre care vom vorbi mai târziu.
După cum puteți vedea, avem nevoie ca toate clicurile să pară identice, astfel încât toate acestea să aibă același fundal și un nivel de densitate afișat setat la 85%. Am adăugat, de asemenea, box-shadow, care adaugă adâncimea și a folosit o margine solidă, astfel încât conținutul intern să fie separat de conținutul principal al paginii.
De asemenea, ar trebui evidențiate următoarele aspecte importante: min-width: 200px este folosit pentru ca săgeata să fie pe o linie cu elementul din care derivă indiciul, poziția absolută (absolută) este setată astfel încât indiciul să nu afecteze pe cei din jur elementele și z-indexul: 10 se utilizează pentru a se asigura că indiciul este mereu pe lângă orice alt conținut.
Deci, în ceea ce privește diferențele dintre indicii, unele sunt situate în raport cu elementul de origine. Aceste valori par să funcționeze cel mai bine și nu ar trebui să fie schimbate, dar, cu toate acestea, dacă trebuie să le schimbați pentru ca totul să funcționeze corect în proiectele dvs., atunci este mai bine să utilizați repoziționarea dinamică cu j # 097 , vascript, dar acest lucru nu se aplică acestui articol deloc.
Examinând codul CSS de mai jos, puteți observa că am mutat sugestiile astfel încât acestea să fie pe aceeași linie cu elementele din care merg și poziționarea relativă în clasele principale păstrează indicii asupra elementului pe care cursorul a fost plutind, e. sugestiile nu sunt localizate imediat după aceasta.
Aproape făcut! Acum trebuie să facem o săgeată pentru instrucțiunile, care le vor indica. Din nou, există câteva diferențe aici, despre care vom vorbi mai târziu.
Aici diferența se află în direcția în care trebuie să indicăm săgeata și, de asemenea, pentru ceea ce folosim un fond solid pentru o parte și unul transparent pentru celelalte. De asemenea, trebuie să le deplasăm de sus în jos și ușor spre dreapta, astfel încât săgeata să pară ca și cum ar fi situată pe element.
După ce faceți acest lucru, lecția noastră va fi terminată și rezultatul final ar trebui să fie ceva asemănător imaginii de mai jos. Dacă nu îl vedeți așa cum arată imaginea, reveniți puțin și verificați codul pentru erori. Poate că ai pierdut ceva.
Pentru ca proiectul dvs. să semene cu imaginea, utilizați fișierul tut.css.
Trimiteți-le prietenilor: