WordPress.org

1. lifetreecreative
   Member
   Posted 2 years ago #

   Hi,

   I want to make a menu using CSS Sprites, however, can't seem to find information about how to make the current state happen. I have found information on making Sprites work great with WordPress and it's true, but there is no information as to how to make this happen.

   Any geniuses that can help me out?

   Thanks!

2. chloej
   Member
   Posted 2 years ago #

   I would like to know how to do this as well. Can't seem to find a good explanation of how to target the current page/state. Would be great if someone has a good article/tutorial.
   Thanks
   Chloe.

3. alchymyth
   The Sweeper
   Posted 2 years ago #

   first question - what menu?

   page menu for instance has the class 'current_page_item' on the link to the current page, which you can use to style the link in the style.css. others are similar, check the codex for the corresponding links ;-)

   http://codex.wordpress.org/Template_Tags/wp_list_pages#Markup_and_styling_of_page_items

4. makwak
   Member
   Posted 1 year ago #

   Its odd that there are 100 css sprite examples with not a single one showing how to make a menu item stay 'current' in WP.

   I am sure my way is wrong in many ways, but it works for me!
   1. Make your menu here: (its great)
   http://lab.mattvarone.com/navbar/index.php
   2. Place the css in your stylesheet, and the html where you want.
   3. Read this, esp. about php: http://codex.wordpress.org/Dynamic_Menu_Highlighting
   4. From matt's css, carefully take out all styling for .current. eg:

   ul#navigation li#navigation-1 a.current {
   		background-position: -120px 0px
   	}

   and replace it with appropriate php in the header, (see "3"). EG:

   <?php
   if ( is_page('home') ) { $current1 = 'navigation-1 a'; }
   elseif  ( is_category('bla') ) { $current2 = 'navigation-2 a'; }
   ?>

   etc.

   I am sure someone smarter can show a better way, but no one has that I can find!

5. makwak
   Member
   Posted 1 year ago #

   oops, forgot item 5!

   5. In the header under the php in item 4, put in something like the following styling:
   

   <style type="text/css">
   ul#navigation li#<?php echo $current1; ?> {
   background-position: -120px 0px;
   }
   ul#navigation li#<?php echo $current2; ?> {
   background-position: -120px -39px;
   }</style>

Topic Closed

This topic has been closed to new replies.