Moving icon that appears when hovering over a menu button

Question

Moving icon that appears when hovering over a menu button

Before diving into this, please take a moment to visit the following website to understand my goal:

You'll notice there is a noticeable RED arrow positioned below the menu. What I aim to accomplish is... when I hover over a menu button, the arrow smoothly transitions to that same button without any page reload.

My ideal scenario would be for the arrow to revert back to its original position once I'm no longer hovering over any buttons. Additionally, the default button should change if a different menu button is clicked on.

If you have any examples or resources to share, I would truly appreciate it!

Thank you for your attention,

Kerry x

javascript jquery html css

Answer 1

Answer №1

One issue to address is an incorrect DOCTYPE declaration.

<!DOCTYPE html PUBLIC "">

This is causing your page to load in quirk mode. Correct it to

<!DOCTYPE html>

for HTML5 or use the complete version with FSI & FPI included.

Another point to consider is the use of a <table> for navigation. While not necessarily a problem, using ul is more common.

When styling the :hover effect, a simple approach would be:

#MenuPosition table tbody tr td:hover
{
background-image: url("/images/Arrow.jpg");
}

You may need to adjust paddings and margins, or utilize display: block or display: inline-block to position the arrow correctly.

Answer 2

One issue to address is an incorrect DOCTYPE declaration.

<!DOCTYPE html PUBLIC "">

This is causing your page to load in quirk mode. Correct it to

<!DOCTYPE html>

for HTML5 or use the complete version with FSI & FPI included.

Another point to consider is the use of a <table> for navigation. While not necessarily a problem, using ul is more common.

When styling the :hover effect, a simple approach would be:

#MenuPosition table tbody tr td:hover
{
background-image: url("/images/Arrow.jpg");
}

You may need to adjust paddings and margins, or utilize display: block or display: inline-block to position the arrow correctly.

Answer 3

Answer №2

Convert the "buttons" into anchors. Use CSS to create a rule for :hover in order to set a background image with an arrow.

There are numerous resources available for learning CSS techniques, such as browsing through tutorials on sites like Nettuts and Webdesigntuts, which offer a plethora of navigation articles. Alternatively, if you're comfortable with reverse engineering, analyze a website you admire and dissect its source code to understand how they achieved their design.

Note that using javascript is not essential for achieving your goal. Unless you require specific animations, CSS can handle most tasks effectively; I personally believe that relying solely on CSS is the superior approach.

Answer 4

Convert the "buttons" into anchors. Use CSS to create a rule for :hover in order to set a background image with an arrow.

There are numerous resources available for learning CSS techniques, such as browsing through tutorials on sites like Nettuts and Webdesigntuts, which offer a plethora of navigation articles. Alternatively, if you're comfortable with reverse engineering, analyze a website you admire and dissect its source code to understand how they achieved their design.

Note that using javascript is not essential for achieving your goal. Unless you require specific animations, CSS can handle most tasks effectively; I personally believe that relying solely on CSS is the superior approach.

Answer 5

Answer №3

CSS ONLY SOLUTION

Take a look at this response.

Can you hover over one element and impact another element?

One possibility could be:

#someelement {
    padding: 0;
}
.classhovered:hover + #someelement {
    padding-top: 15px;
    padding-left: 15px;
}

This works if they are siblings within the same parent container.

Answer 6

CSS ONLY SOLUTION

Take a look at this response.

Can you hover over one element and impact another element?

One possibility could be:

#someelement {
    padding: 0;
}
.classhovered:hover + #someelement {
    padding-top: 15px;
    padding-left: 15px;
}

This works if they are siblings within the same parent container.

Answer 7

Answer №4

Adjust the arrow position using the margin-left CSS property in relation to the left side of the td. DEMO

$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});

To achieve this, include the jQuery library in the head section of your webpage.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Add this code to an external JavaScript file and include it in the head section of your page.

$(function(){
  $("#MenuPosition").on("hover","td",function(){
    $("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});

  });

});

EDIT : To reset the arrow to its original position, use the following:

$(function(){
  currentPos = $("#Arrow").css("margin-left");

  $("#MenuPosition").on("hover","td",function(){
    $("#Arrow").css({"margin-left":$(this).position().left});

  });


   $("#MenuPosition").on("mouseout","td",function(){

     $("#Arrow").css({"margin-left":currentPos});        
  });

});

NOTE : PLEASE REVIEW THE CALCULATIONS AND MAKE NECESSARY CORRECTIONS.

PS: Unable to correct now as I am logging out from office ;) . but I believe you have understood the logic to make the corrections

Answer 8

Adjust the arrow position using the margin-left CSS property in relation to the left side of the td. DEMO

$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});

To achieve this, include the jQuery library in the head section of your webpage.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Add this code to an external JavaScript file and include it in the head section of your page.

$(function(){
  $("#MenuPosition").on("hover","td",function(){
    $("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});

  });

});

EDIT : To reset the arrow to its original position, use the following:

$(function(){
  currentPos = $("#Arrow").css("margin-left");

  $("#MenuPosition").on("hover","td",function(){
    $("#Arrow").css({"margin-left":$(this).position().left});

  });


   $("#MenuPosition").on("mouseout","td",function(){

     $("#Arrow").css({"margin-left":currentPos});        
  });

});

NOTE : PLEASE REVIEW THE CALCULATIONS AND MAKE NECESSARY CORRECTIONS.

PS: Unable to correct now as I am logging out from office ;) . but I believe you have understood the logic to make the corrections

Answer 9

Answer №5

Here's a neat trick you can use:

To add a background arrow below the navigation/menu links in your HTML, you can utilize a span element like so:

<ul class="menu">
    <li>
        <a href="#">Home</a>
        <span class="arrow">&nbsp;&nbsp;</span>
    </li>
    <li>
        <a href="#">About</a>
        <span class="arrow">&nbsp;&nbsp;</span>
    </li>
</ul>

The corresponding CSS styles are as follows:

.menu {
    font-size: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    background: #ccc;
    display: inline-block;
    padding: 10px;
    position: relative;
}

.menu li a {
    color: #333;
    text-decoration: none;
}

.arrow {
    background: url("images/arrow.png") no-repeat center bottom;
    display: none;
    height: 20px;
    width: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Finally, the JavaScript code that brings it all together is:

$(document).ready(function(){     
    AddArrowToMenu();
});

function AddArrowToMenu(){

    $(".menu li").hover(function(){
            $(this).find('.arrow').fadeIn(200);
        }, function(){
            $(this).find('.arrow').fadeOut(200);
    });

}

Check out this website for a live example:

Answer 10

Here's a neat trick you can use:

To add a background arrow below the navigation/menu links in your HTML, you can utilize a span element like so:

<ul class="menu">
    <li>
        <a href="#">Home</a>
        <span class="arrow">&nbsp;&nbsp;</span>
    </li>
    <li>
        <a href="#">About</a>
        <span class="arrow">&nbsp;&nbsp;</span>
    </li>
</ul>

The corresponding CSS styles are as follows:

.menu {
    font-size: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    background: #ccc;
    display: inline-block;
    padding: 10px;
    position: relative;
}

.menu li a {
    color: #333;
    text-decoration: none;
}

.arrow {
    background: url("images/arrow.png") no-repeat center bottom;
    display: none;
    height: 20px;
    width: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Finally, the JavaScript code that brings it all together is:

$(document).ready(function(){     
    AddArrowToMenu();
});

function AddArrowToMenu(){

    $(".menu li").hover(function(){
            $(this).find('.arrow').fadeIn(200);
        }, function(){
            $(this).find('.arrow').fadeOut(200);
    });

}

Check out this website for a live example:

Moving icon that appears when hovering over a menu button

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Why is it that one of my useQuery hooks is returning a value while the other one is returning undefined?

Converting HTML into an image in a Node.js Buffer

Interacting with an API and retrieving data using JavaScript

What is the reason behind having 3 watchers for 1 binding in AngularJS?

Alert: The comment index is not defined on line 5 of the comment.php file located in C:xampphtdocsindex

Alexa Skill: Successful with the initial query but fails with the subsequent one

What are some creative ways to customize the background of a full component?

Employing an item as a function

steps for setting up babel-cli and babel-preset-react

Using Selenium in conjunction with browsermob-proxy to generate new HAR files for redirected web pages

Error received - CORS request denied on Firefox browser (Ubuntu)

Require this form to be centered flawlessly

"Resolving the Issue of jQuery Displaying NaN Value

Turn off the nicescroll scroll bar that appears as a default feature

What is the best way to ensure that two divs in the same row float in opposite directions?

Steps to display a single entry in a Laravel/Vue implementation

Creating optimized CSS builds for Next.js production

Learn how to effortlessly update models by integrating AngularJS with Django and Django Rest Framework

JS: Issue with iterating over objects

The function .classList.remove() is effective when applied to one element, but fails to work on a different element