Conditional image based navigation

  • onerandommoment

    (@onerandommoment)


    16 years, 1 month ago

    Hey everyone.

    My first question here in the WordPress Support Forums. My first post too actually. But ah well.

    Anyway. Straight to my predicament.

    I’m sorting out my blog (I’m unsure whether I can post a direct link so the URL is on my profile page for this forum) and have designed a pretty rad looking navigation system.

    Its your everyday CSS based image navigation so that on hover the image will move position showing the hover version of the original image.

    This is easy.

    What my problem is that I’d like the navigation images to correspond with what page or post (within the category) the user is on.

    So for example. The HOME link image will be ‘active’ while the user is on the index page or within the category of news. The MOVIES link image will be ‘active’ while the user is on the movies page or within the category of movies etc etc.

    This is the code I’m using so far:

    <div id="navigation">
	<ul>
		<li <?php if (is_home()) { echo "class=nav-home-on";

		} elseif (in_category('14')) { echo "class=nav-home-on";

		} else { echo "class=nav-home";} ?>></li>

		<li <?php if (is_page('rants')) { echo "class=nav-rants-on";

		} elseif (in_category('16')) { echo "class=nav-rants-on";

		} else { echo "class=nav-rants";} ?>></li>

		<li <?php if (is_page('rants')) { echo "class=nav-movies-on";

		} elseif (in_category('15')) { echo "class=nav-movies-on";

		} else { echo "class=nav-movies";} ?>></li>

		<li <?php if (is_page('crap')) { echo "class=nav-crap-on";

		} elseif (in_category('17')) { echo "class=nav-crap-on";

		} else { echo "class=nav-crap";} ?>></li>

		<li style="margin: 0;" <?php if (is_page('portfolio')) { echo "class=nav-portfolio-on";

		} elseif (in_category('18')) { echo "class=nav-portfolio-on";

		} else { echo "class=nav-portfolio";} ?>></li>
	</ul>
	</div>

    At the moment I know I haven’t added any links TO the lists but I just wanted to get this part of the code correct first.

    While this worls it will also be screwy when there is for example a post on a page where teh category is different. So TWO parts of teh nav will be ‘active’.

    If any of this makes sense and ANYONE can help.

    Please do 😀

    Thanks in advance.

    Pete x

Viewing 3 replies - 1 through 3 (of 3 total)
  • microkid

    (@microkid)

    16 years ago

    Perhaps you can use a boolean you set to true whenever one of your conditions is met, and check it every time. Something like this:

    <?php
[...]

$highlighted = false;

[...]

if( ( in_category( 16 ) || is_page( 2 ) ) && $highlighted == false ) {
  echo "class="nav-portfolio;
  highlighted = true;
}

[...]
?>
    byronedwards

    (@byronedwards)

    16 years ago

    Hi Pete,

    if you create a class on the body tag (using classybody plugin) you can do it in the css.

    it will be something akin to:

    body.page-1 .current_page_item a {background image styles}
    body.page-2 .current_page_item a {background image styles}

    etc etc.

    Best

    Byron

    siredesigns

    (@siredesigns)

    15 years, 9 months ago

    That code seems a little long to accomplish such a simple task. I made a quick tutorial on how to incorporate images into your navigation menu. It also shows you how to use active and hover effects on your links. Let me know if this helps:

    http://thedailytut.com/wordpress/an-image-wordpress-navigation-with-hover-and-active-links

    Cheers,

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Conditional image based navigation’ is closed to new replies.