Incep acest nou blog printr-un exemplu inspirat dintr-un concept al colegilor mei de la X3, si o varianta realizata de Radu Bilei.

Am inceput sa lucrez la aranjarea unei liste neordonate pe doua coloane, cu ajutorul framework-ului jQuery.

img01

O simpla lista ce contine un link.

img04

Parametrii care realizeaza cele doua coloane sunt dati de proprietatea “float” si “clear”. Listele 1-5 au definit “float: left” si “clear: left” iar cea ce-a doua coloana, listele 6-10 au suprascrise aceste proprietati cu “float: right” si “clear: right”. Destul de simplu.

img02

Sa explic putin:

  • Prima parte a codului adauga/sterge clasa “on”. Am pus o actiune la mouseover.
  • In a doua parte am apelat listele 6,7,8,9 si 10, cu “gt(4)”.
  • Provocarea a fost sa stochez intr-o variabila un numar egal cu inaltimea unui element din lista, care pe langa inaltime are si un border, si un padding-top, iar acest numar sa il folosesc ca margine pentru listele din a doua coloana.

img03

Descarca ZIP, Vezi Demo

SUS