Making the nav bar body tag trick work

  • jtroll

    (@jtroll)


    14 years, 9 months ago

    Any help in pulling off a typical CSS trick for nav bars here would be helpful; I’m new to WordPress, and still figuring out how best to integrate it into a site I’m developing for a client.

    The trick has to do with displaying the “selected” state to my nav bar buttons. You can see an example here: http://www.cypresshilldevelopment.com/beta/ourstory.html

    Essentially when I tag the body div like this:

    <body id="page_ourstory">

    Then it calls this code within the CSS:

    body#page_ourstory ul#navigation li a#menu_ourstory {
	background: url(images/nav_ourstory_all.jpg) no-repeat 0 -48px;
	}

    Non-selected states are here (standard and hover):

    #navigation li a#menu_ourstory {
	width: 74px;
	height: 24px;
	background: url(images/nav_ourstory_all.jpg) top no-repeat;
	}
    #navigation li a#menu_ourstory:hover {
	background: url(images/nav_ourstory_all.jpg) no-repeat 0 -24px;
	}

    My problem is that in order to properly integrate WordPress, I’m not quite sure how to implement this trick. Different “pages,” perhaps? So far I know of no code that will let me integrate the body tag into the header and also call up CSS like this to assign to different pages.

    The site itself is very, very basic: no blog, just five static pages.

    Thanks again for any help!

Viewing 1 replies (of 1 total)
  • esmi

    (@esmi)

    14 years, 9 months ago

    If you set the nav bar up and then check the source code, you’ll see that WP applies special classes to currently selected page or category items that you can use to style your sprite based menu. You don’t need to add classes to the body tag.

Viewing 1 replies (of 1 total)
  • The topic ‘Making the nav bar body tag trick work’ is closed to new replies.