jan
15
Írta: Tupacko, 2008-01-15, (Blogolok, CMS, CSS, Design, PHP)

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.
  • description
  • blogtercimlap
  • Linkter
  • bodytext
  • del.icio.us
  • NewsVine
  • Furl
  • Reddit
  • Spurl
  • Technorati
  • YahooMyWeb
  • co.mments
  • Google
  • Live
  • Ma.gnolia
  • TwitThis
(0 szavazat)
Loading ... Loading ...



Szólj hozza!

Név: 
Email: 
Weboldal *
Hozzaszólás: 
*Nem kötelező megadni, ha nincs weboldalad, akkor hagyd üresen!