Current category links

  • andrewmanalo

    (@andrewmanalo)


    10 years, 10 months ago

    I’ve been searching all over the net, trying to find an answer for this.

    http://goo.gl/Ceun8q

    So, the tabs on this page are category based. Is there a way to make the tab scroll over at the same time as the content category link?

    I’m sorry if I don’t make sense ha. I added a link to a screenshot an image to give a better visual. So as you rollover the category button (not in the nav), it has the roll over effect on both the navigation and in the content area and vice versa, you roll over a category in the navigation, and it has the roll over effect in the content area.

    So how can it have the hover effect whenever you hover over a certain category, and make it active throughout the site?

    View post on imgur.com

    Thank you

Viewing 1 replies (of 1 total)
  • CrouchingBruin

    (@crouchingbruin)

    10 years, 10 months ago

    You could do it using jQuery:

    <script>
jQuery(document).ready(function($){

// This is the mouse event handler for the Inner Beauty menu item
$( "#menu-item-6" )
  .mouseover(function() {
    $("#menu-item-6").addClass("cat-hovered");
    $(".cat-inner-beauty").addClass("cat-hovered");
  })
  .mouseout(function() {
    $("#menu-item-6").removeClass("cat-hovered");
    $(".cat-inner-beauty").removeClass("cat-hovered");
  });

// This is the mouse event handler for the Inner Beauty category tags
$( ".cat-inner-beauty" )
  .mouseover(function() {
    $(".cat-inner-beauty").addClass("cat-hovered");
    $("#menu-item-6").addClass("cat-hovered");
  })
  .mouseout(function() {
    $(".post-categories").removeClass("cat-hovered");
    $("#menu-item-6").removeClass("cat-hovered");
  });

});

</script>

    You would add the script using a script plugin like Header and Footer. What the script does is add mouseover and mouseout event handlers to the Inner Beauty menu item and the Inner Beauty category tags. The event handlers either add the class cat-hover to the Inner Beauty elements when the mouse is hovered over one of them or removes the class when the mouse exits.

    So all you have to do, now, is define the CSS for the cat-hover class using your theme’s custom CSS option or a CSS plugin:

    .cat-hover {
   background-color: #ea7bda;
   color: white;
}

Viewing 1 replies (of 1 total)

The topic ‘Current category links’ is closed to new replies.