Grow your CSS skills. Land your dream job.

How does CSS-TRICKS’S tabbed navigation work? Please help!

  • # August 1, 2009 at 11:46 am

    Hello,

    I’m new to the board and I’m writing in hopes of learning a bit more about how the tabbed-main navigation works on CSS-TRICKS.COM. There is some sort of "current page/category" set but I do not know how to re-create this.
    I’ve tried to create dynamic menu highlighting (http://codex.wordpress.org/Dynamic_Menu_Highlighting) but alas have had no success after many failed attempts and tutorials (http://www.bomblesblog.com/wordpress-tu … amic-menu/) (http://themeshaper.com/wordpress-menu-tricks/).

    I know Chris did a video of various WordPress tricks where he brushed upon -

    Listing categories with a built-in function and building a tabbed navigation from them with “current tab” functionality.

    Anyone know of where I can learn more about this and how to execute a similar menu in WordPress?

    Thanks in advance! Look forward to chatting with you all and learning more about everyone and everything.

    # August 1, 2009 at 12:14 pm

    Welcome. :D

    I always find the easiest way is to use the wp_list_pages() function http://codex.wordpress.org/wp_list_pages to generate the nav because it gives you all the necessary classes to work with.

    On this site it seems that Chris has used a bit of custom php to generate a body "id" for each page, but as of Wp version 2.8 it is even easier, as you can now use the new body_class() function http://www.nathanrice.net/blog/wordpress-2-8-and-the-body_class-function/.

    # August 4, 2009 at 11:59 am

    Hi apostraphe,

    Thanks for your help. You have pointed me in the right direction.
    For now, I am making a static page because I know how to accomplish this sort of thing in HTML/CSS easily but WP is a bit more tricky. So I will work on sorting it out in WP and when its ready, I will re-configure my site to the WP site. Wish me luck and thanks again for the reply.

    # August 4, 2009 at 12:14 pm
    "fienixNYC" wrote:
    For now, I am making a static page because I know how to accomplish this sort of thing in HTML/CSS easily but WP is a bit more tricky. So I will work on sorting it out in WP and when its ready, I will re-configure my site to the WP site. Wish me luck and thanks again for the reply.

    That’s exactly how you should be doing it when first learning WP. Starting with a static site and then slowly replacing each element on the page is the best way to learn how everything functions.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".