Still looking for help with this. I've got it a little closer to what I need, but its not quite there yet. The mouseover effects work; the assignment of the "current_page_item" class works; but the current_page_item does not fade-in until you mouse over it after the page reloads. In other words: click the "about" page link and that does gain the "current_page_item" class, but the CSS involved in raising the opacity of the colored image does not take effect. The image only fades-in when you trigger it with the hover function.
Code:
<?php /* wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); */ ?>
<script type="text/javascript">
// when the DOM is ready:
$(document).ready(function () {
//Toggle Class on Click
$("#mainmenu li").click(function() {
$('#mainmenu li:current_page_item').removeClass(function() {
return $(this).prev().attr('class');
});
$(this).addClass("current_page_item");
});
});
</script>
<script type="text/javascript"><!--http://jqueryfordesigners.com/image-cross-fade-transition/-->
// make nav images highlight on hover
// when the DOM is ready:
$(document).ready(function () {
// find the navigation elements and hook the hover event
$('#mainmenu li').hover(function() {
// on hovering over, find the element we want to fade *up*
var fade = $('> div', this);
// if the element is currently being animated (to a fadeOut)...
if (fade.is(':animated')) {
// ...take it's current opacity back up to 1
fade.stop().fadeTo(250, 1);
} else {
// fade in quickly
fade.fadeIn(250);
}
}, function () {
// on hovering out, fade the element out
if (!$(this).hasClass('current_page_item')){
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(3000, 0);
} else {
// fade away slowly
fade.fadeOut(2000);
}
}
});
});
</script>
<!-- to highlight the current page you need to add the class 'current_page_item' both on the client side (accomplished above) and on the server side. See http://www.vanseodesign.com/wordpress/hightlight-current-page-wordpress/ for how I did the server side class assignment below.-->
<ul id="mainmenu">
<li<?php if ( is_front_page()) { echo ' class="current_page_item"'; } ?> id="home">
<a href="/home">Home<img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_inactive.png" alt="home" width="152" height="309" /></a>
<div class="colorImg">
<a href="/home"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_active.png" alt="home" width="152" height="309" /></a>
</div>
</li>
<li<?php if ( is_page('about')) { echo ' class="current_page_item"'; } ?> id="about">
<a href="/about">About<img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/david_inactive.png" alt="about" width="152" height="309" /></a>
<div class="colorImg">
<a href="/about"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/david_active.png" alt="home" width="152" height="309" /></a>
</div>
</li>
<li <?php if ( is_page('store')) { echo ' class="current_page_item"'; } ?> id="store">
<a href="/store">Store<img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/canyon_inactive.png" alt="" width="152" height="309" /></a>
<div class="colorImg">
<a href="/store"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/canyon_active.png" alt="home" width="152" height="309" /></a>
</div>
</li>
<!-- the WP function is_home() refers to the page with the blog posts...which is not always the home page -->
<li<?php if ( is_home()) { echo ' class="current_page_item"'; } ?> id="information"><a href="/information">Information
<img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/wading_inactive.png" alt="" width="152" height="309" /></a>
<div class="colorImg">
<a href="/information"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/wading_active.png" alt="home" width="152" height="309" /></a>
</div>
</li>
<li<?php if ( is_page('contact')) { echo ' class="current_page_item"'; } ?> id="contact"><a href="/contact">Contact
<img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/wall_inactive.png" alt="" width="152" height="309" /></a>
<div class="colorImg">
<a href="/contact"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/wall_active.png" alt="home" width="152" height="309" /></a>
</div>
</li>
</ul>
</div><!-- #access -->
and the style rule is...
Code:
.current_page_item .colorImg a img{
background-color:none;
opacity:.99;
filter:Alpha(opacity=99); /* IE8 and earlier */
}
Reply With Quote
Bookmarks