A minap felkerült egy írás, ahol dinamikusan lehet gombot készíteni CSS segítségével. DeX hozzászólása kapcsán:
Ha a gombon nyomvatartod az egeret, majd lehúzod róla, és ott engeded el, akkor beragad a lenyomott állás?
arra gondoltam, ha már az active-ot hover-re cserélem, használhatom menünek is az egész CSS kódot, a minimális modosításokkal. A CSSben mindössze annyi a tennivaló, hogy az active modosítókat kicseréljük hoverre. Így a link fölé görgetéskor aktíválodik az új kinézet és nem a link lenyomásakor. Miután készen vagyunk a CSS résszel, nyugodtan használhatjuk weboldalainkban.
Mi van akkor, ha a kódot nem mi írjuk? Én arra az esetre gondoltam, amikor a WordPress által kilistázott oldalakat/kategóriákat formázom menüként. A megoldás egy kis ügyesség, okosság. A probléma orvoslását keresve az alábbi megoldást találtam a legmegfelelőbbnek.
// lekérem a formázni való oldalakat
// fontos, hogy az echo legyen nulla, hogy ne történjen kiírás a sablonba
$pages = wp_list_pages('depth=1&title_li=&echo=0');
// behelyettesítem az <a> tagokat <a><span> tagpárosokkal
// mivel a linknek vannak paraméterei, kegyetlen vagyok regular expressiont használni
$pages = preg_replace(’/(<a[^>]*>)/’,'$1<span>’,$pages);
// a link záró tagokat sima szöveg behelyettesítéssel is végezhetem
$pages = str_replace(’</a>’, ‘</span></a>’, $pages);
// végül kiírom a menüt
echo $pages;
Ezek az ikonok ún. közösségi könyvjelző oldalakra mutatnak, ahol meg lehet osztani másokkal is amit fontosnak találsz.