treehouse : what would you like to learn today?
Web Design Web Development iOS Development

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

  • 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.
  • 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/.
  • 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.
  • "fienixNYC" said:
    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.