Hover Effect on Navigation Menu for Special Events Only

Question

Hover Effect on Navigation Menu for Special Events Only

I am trying to replicate the navigation menu effect of this website but with cleaner code. The current code I have was auto-generated from a PSD to HTML/CSS conversion tool, resulting in a lot of unnecessary code. While I can recreate most of the menu, I am stuck on implementing the hover-off effect for the Shop Now button only when the contact button is hovered over.

Do you have any suggestions on how I can achieve this toggle effect where hovering over the contact button turns off the Shop Now effect?

Below is what I have attempted so far:


    <ul>
        <li id="homeButton"> <img src="images/home.png" onmouseout="this.src='images/home.png'" onmouseover="this.src='images/homeHover.png'" width="115" height="55" alt="home" /></li>
        // Other menu items...
         <li id="contactButtonMenu"> <img src="images/contactButton.png" onmouseout="this.src='images/contactButton.png'" onmouseover="this.src='images/contactButtonHover.png'"  width="115" height="55" alt="contact" /></li>
        <li id="shopNowButton"> <img src="images/shopNowHover.png" width="114" height="53" alt="Shop Now" /> </li>
    </ul>

Here is my attempt on JS Fiddle: http://jsfiddle.net/GHHJM/

javascript jquery html css menu

Answer 1

Answer №1

It's not too complex.

Create the menu using a <ul> element, as is commonly done today. Add a style called "hover" with a border to simulate highlighting. Apply the default class (with the border) to the last element. The rest should have normal styles for now. Remember, you can stack classes when working with styles like this:

<element class="firstclass hover otherclass">

Next, create a hover action:

$("li").hover(function () {
    $(elementtoputborderon).addClass("hover");
 },
function () {
    $(this).removeClass("hover");
  })

For the part where it turns off:

$("#idofcontactbtn").hover(function () {
    $('#idoflastelement').removeClass("hover");
 },
function () {
    $('#idoflastelement').addClass("hover");
  })

To achieve a "fade" effect on the last element, you could try something similar to this:

$('#lastitem').hover(function() {
    $(this).toggleClass('pretty-hover', 500);
  });

Answer 2

It's not too complex.

Create the menu using a <ul> element, as is commonly done today. Add a style called "hover" with a border to simulate highlighting. Apply the default class (with the border) to the last element. The rest should have normal styles for now. Remember, you can stack classes when working with styles like this:

<element class="firstclass hover otherclass">

Next, create a hover action:

$("li").hover(function () {
    $(elementtoputborderon).addClass("hover");
 },
function () {
    $(this).removeClass("hover");
  })

For the part where it turns off:

$("#idofcontactbtn").hover(function () {
    $('#idoflastelement').removeClass("hover");
 },
function () {
    $('#idoflastelement').addClass("hover");
  })

To achieve a "fade" effect on the last element, you could try something similar to this:

$('#lastitem').hover(function() {
    $(this).toggleClass('pretty-hover', 500);
  });

Answer 3

Answer №2

I have successfully resolved this using a simple and efficient method, focusing on the code for two button effects. I trust that this solution will be beneficial to those in need.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Hover</title>
<script type='text/javascript' src='jquery.js'></script>

<script  type='text/javascript'>
$(document).ready(function(){
    $(".contactButton").hover(function() {
        $(contactButtonMenu).attr("src","images/contactButtonHover.png");
            }, function() {
        $(contactButtonMenu).attr("src","images/contactButton.png");
    });
});

$(document).ready(function(){
    $(".contactButton").hover(function() {
        $(shopNowButton).attr("src","images/shopNow.png");
            }, function() {
        $(shopNowButton).attr("src","images/shopNowHover.png");
    });
});
</script>

</head>

<body>

<img id="contactButtonMenu" src="images/contactButton.png" alt"Contact Button" class="contactButton" />
<img id="shopNowButton" src="images/shopNowHover.png" alt="Shop Now" class="shopNowButton" />

</body>
</html>

Unfortunately, I am encountering compatibility issues with Firefox. Any suggestions on how to resolve this?

Answer 4

I have successfully resolved this using a simple and efficient method, focusing on the code for two button effects. I trust that this solution will be beneficial to those in need.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Hover</title>
<script type='text/javascript' src='jquery.js'></script>

<script  type='text/javascript'>
$(document).ready(function(){
    $(".contactButton").hover(function() {
        $(contactButtonMenu).attr("src","images/contactButtonHover.png");
            }, function() {
        $(contactButtonMenu).attr("src","images/contactButton.png");
    });
});

$(document).ready(function(){
    $(".contactButton").hover(function() {
        $(shopNowButton).attr("src","images/shopNow.png");
            }, function() {
        $(shopNowButton).attr("src","images/shopNowHover.png");
    });
});
</script>

</head>

<body>

<img id="contactButtonMenu" src="images/contactButton.png" alt"Contact Button" class="contactButton" />
<img id="shopNowButton" src="images/shopNowHover.png" alt="Shop Now" class="shopNowButton" />

</body>
</html>

Unfortunately, I am encountering compatibility issues with Firefox. Any suggestions on how to resolve this?

Hover Effect on Navigation Menu for Special Events Only

Answer №1

Answer №2

Similar questions

Struggling with modifying css attribute in a JQuery Chrome Extension

The split function is creating redundant values

The presence of fs.existsSync as a function is not recognized when importing electron

Tips for transmitting data from a form to a server

What are the steps to make the chosen title and its content active while deactivating the others?

Encountering an issue with Angular when trying to add the urlRouterProvider

Leveraging the power of AJAX, PHP, and JavaScript to display numerous status updates throughout an extended operation

The alternative condition for jQuery Color takes 17 seconds to respond

The XMLHttpRequest fetches data before the page is completely loaded

Animating the movement of a div

The validation error is triggered when using jQuery to add additional methods on select combo boxes

Unable to locate object for property 'setAttribute' and thus it is undefined

Exploring an array in Angular 2 using TypeScript

Can the issue of mangling be avoided during .NET minification?

Tips for getting Vue's element-ui validateField() function to function correctly in conjunction with v-if?

Sending files to the server through HTML5

Different Ways to Customize Button Click Events in Angular 9 Based on Specific Situations

Swapping out images with a different image using angular.js

Despite being correctly linked in EJS and without any errors, the CSS is still not loading

What is the best way to utilize Typescript when making queries to Firebase?