A cool thing I just discovered will working on the WPMovieLibrary tabbed metabox: use CSS siblings and :target pseudo-class to build a full-CSS tab menu.

Siblings works with the ~ combinator to target elements from the same container if the second element is preceded by the first; The :target pseudo-class can be used to style an element targeted by an identifier in the URI. Combine the two and you can style a target link — the tab menu link — and the targeted panel.

Two things to take into account: the menu has to be located after the panels, and both menu and panels have to be children of the same parent element. In my case it meant I had to modify a bit the way the tabs were built, which involving some floating and margins (vertical menu). If you’re using an horizontal menu you’ll have to play with positions to have your menu showing on top of your tabs.

I’m not going to develop the coding part, CSS-Tricks and Nathan Faubion did that for you already. As mention on the former, this is far from an ideal technique to build tabs, the biggest inconvenient IMHO is that relying on URI identifier makes the user jump through the page, which is pretty dirty is you’re dealing with massive tabs.

That said, it’s a very useful trick to provide minimal tabbing as a fall-back for JS-disabled pages. In my case the WordPress Dashboard is very limited if you don’t have JS enabled, but it happens, either by the user’s will or a bug causing JS errors and preventing your nice JS-powered tab to work, so it’s always nice to provide some alternative to make sure a tabbed metabox somehow works in every situation.

Publié par Charlie

Être humain depuis 1986, développeur web, designer et photographe, je code pour le Web depuis 2000 et pour WordPress depuis 2008. Aventure, Histoire, sciences, musique, café ou personnages forts en caractère et dotés d'un nez en tout point remarquable sont parmi mes passions les plus dévorantes. Indépendant depuis 2010 je travaille avec des gens formidables dans le monde entier, de la Californie à l'Europe en passant par l'Australie et l'Asie. D'autres détails croustillants ?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

*