Shift the sideways movement of the triangle symbol

Question

Shift the sideways movement of the triangle symbol

I currently have a main menu in the header with links, accompanied by a moving triangle that changes position as the user hovers from one page to another. While I want to maintain the dynamic movement, I am seeking a smoother transition effect similar to what is showcased on this website: harris-active.co.uk

Below is the CSS Code:

/* Navigation
--------------------------------------------------------------------------------*/

#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
border:none;
}

#nav-wrap table {
width:100%;
border-collapse: collapse;
border-spacing: 0;
padding:0px;
}

#nav-wrap table td {
border-collapse: collapse;
border-spacing: 0;
}

#nav-wrap .container ul {
list-style: none;
float: right;
margin-right:40px;
}

#nav-wrap .container ul li {
list-style: none;
float: left;
margin-left:40px;
position:relative;
top:0px;
}

#nav-wrap .container ul li a {
display: block;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: #999999;
text-decoration: none;
padding: 50px 0px;
border: 0;
outline: 0;
list-style-type: none;
font-size: 16px;
transition: 0.5s ease;
}

#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color: #fff;
border: 0;
text-shadow: 0 0 3px rgba(255,255,255,0.5);
background: url(nav-hover.png) no-repeat center bottom;
transition: 0.5s ease;
}

View how it currently appears on my live site: tradey-lb.com

javascript jquery html css

Answer 1

Answer №1

When working with the following HTML structure:

<ul>
  <li class="m1">menu1</li>
  <li class="m2">menu2</li>
  <li class="m3">menu3</li>
  <li class="m4">menu4</li>
  <li id="arrowid" class="arrow"></li>
</ul>

One can utilize absolute positioning to place a triangle in any desired position, for example:

.arrow {  
  position:absolute;
  bottom:0px;
  left:85px;
}

Subsequently, classes can be added for different hover effects:

.position1 {
  left:85px;
}
.position2 {
  left:195px;
}
.position3 {
  left:300px;
}

By using a simple function, you can remove existing classes on hover and add the necessary position class:

 $(".m1").hover(function () {
        $('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position1");
 });
 $(".m2").hover(function () {
        $('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position2");
 });

Here is a complete example:

 $(".m1").hover(function () {
 $('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position1");
 });
 $(".m2").hover(function () {
 $('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position2");
 });
  $(".m3").hover(function () {
  $('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position3");
 });
  $(".m4").hover(function () {
  $('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position4");
 });

ul {position:relative; border-bottom:2px solid #000;}
li {display:inline-block;padding:12px 30px;overflow:visible;}
.arrow {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;  
  border-bottom: 5px solid black;
  padding:0;
  position:absolute;
  bottom:0px;
  left:85px;
  transition: left 0.3s ease-in-out;
}
.position1 {
  left:85px;
}
.position2 {
  left:195px;
}
.position3 {
  left:300px;
}
.position4 {
  left:410px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li class="m1">menu1</li>
  <li class="m2">menu2</li>
  <li class="m3">menu3</li>
  <li class="m4">menu4</li>
  <li id="arrowid" class="arrow"></li>
</ul>

While I considered deleting my answer after encountering your disrespectful comment towards another user, I believe this information may be beneficial to someone else, so I will keep it for now. It's important to practice good manners in all interactions.

Answer 2

When working with the following HTML structure:

<ul>
  <li class="m1">menu1</li>
  <li class="m2">menu2</li>
  <li class="m3">menu3</li>
  <li class="m4">menu4</li>
  <li id="arrowid" class="arrow"></li>
</ul>

One can utilize absolute positioning to place a triangle in any desired position, for example:

.arrow {  
  position:absolute;
  bottom:0px;
  left:85px;
}

Subsequently, classes can be added for different hover effects:

.position1 {
  left:85px;
}
.position2 {
  left:195px;
}
.position3 {
  left:300px;
}

By using a simple function, you can remove existing classes on hover and add the necessary position class:

 $(".m1").hover(function () {
        $('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position1");
 });
 $(".m2").hover(function () {
        $('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position2");
 });

Here is a complete example:

 $(".m1").hover(function () {
 $('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position1");
 });
 $(".m2").hover(function () {
 $('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position2");
 });
  $(".m3").hover(function () {
  $('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position3");
 });
  $(".m4").hover(function () {
  $('#arrowid').attr('class', 'arrow');
    $('#arrowid').addClass("position4");
 });

ul {position:relative; border-bottom:2px solid #000;}
li {display:inline-block;padding:12px 30px;overflow:visible;}
.arrow {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;  
  border-bottom: 5px solid black;
  padding:0;
  position:absolute;
  bottom:0px;
  left:85px;
  transition: left 0.3s ease-in-out;
}
.position1 {
  left:85px;
}
.position2 {
  left:195px;
}
.position3 {
  left:300px;
}
.position4 {
  left:410px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li class="m1">menu1</li>
  <li class="m2">menu2</li>
  <li class="m3">menu3</li>
  <li class="m4">menu4</li>
  <li id="arrowid" class="arrow"></li>
</ul>

While I considered deleting my answer after encountering your disrespectful comment towards another user, I believe this information may be beneficial to someone else, so I will keep it for now. It's important to practice good manners in all interactions.

Shift the sideways movement of the triangle symbol

Answer №1

Similar questions

The stylesheet link for "contact.css" is unresponsive

I'm struggling to figure out how to specify the data type for storing an array of objects in a variable using React.useState

Difficulty with font rendering across different web browsers such as Firefox, Chrome, and Opera

Utilizing AJAX and PHP to Showcase Data

Select the Month and Year from the Dropdown Menu

What strategies can be employed to reduce the need for numerous if-else statements in my JavaScript code?

Customizable form fields in AngularJS

Handling the same form button repeatedly in a loop using jQuery

Passing variables from AJAX response to PHP using a passthru function

Guide for displaying a React Bootstrap modal within a function

Issue with Jquery change event not functioning as expected

A Step-by-Step Guide to Successfully Clicking on a Checkbox Using Selenium and Python

In PHP forms, ensure that only completed textboxes are submitted and empty textboxes are discarded

How to position an absolute element beneath a fixed element

Gulp does not generate any new folders

Access and retrieve pkpass files from a server using React

Error encountered with the OffsetWidth in the Jq.carousel program

Unable to locate React.js refs within object

The issue with Ajax file upload is that it only processes the first file in the filelist array for

Strategies for adjusting text size to fit within a resizable div container