Meniul cu filele suprapuse html css fără javascript

De această dată, filele se vor suprapune reciproc, dar cu o restricție - lățimea filelor este fixă. În următorul articol voi descrie cum să procedați la fel, dar nu cu o lățime fixă. Sursa acestei capodopere poate fi găsită aici.







Designerii sunt oameni care creează ceva tot timpul. Eu sunt creativul lor. De multe ori, uitându-te la designul lor, atunci stai și te îngrijești de ore întregi - cum să faci mai bine. Deci, designerul nostru a dat naștere la ceva de genul asta.


Refuzați să evidențiați elemente de meniu când treceți cu cursorul mouse-ului - clientul nu este mulțumit. Pur și simplu tăiați în bucăți (după cum se arată în figură), dar apoi problema cu părțile suprapuse ale meniului.






Nu există nicio cale de ieșire din filele normale.

Esența filei corecte este că atunci când aduceți cursorul la ultimul pixel al filei, cursorul trebuie să se afle pe aceeași filă și nu pe următoarea filă. La ce ar trebui să se ascundă parțial partea din stânga (care iubește partea dreaptă) din spatele filei care este la stânga și când treceți peste această filă, ar trebui să iasă complet în prim plan. În altele, toate acestea sunt bine demonstrate în exemplul limitei acestui post.

Cod HTML pentru file

Totul este simplu și cred că este de înțeles. Singurul lucru la care ar trebui să acordați atenție este secvența filelor. E cu capul în jos. Ie începe cu ultima și se termină cu prima. Acest lucru se datorează faptului că alinierea acestei metode este în partea dreaptă (float: right;).

1. Ambalarea în dreapta pentru elementele listate - ne oferă posibilitatea de a suprapune elemente din stânga-dreapta.







Articole similare

Trimiteți-le prietenilor: