Arrow smoothly sliding beneath the selected tab in the active menu

Here is a reference picture.

https://i.sstatic.net/wsp6R.png

I am trying to create a slide effect for my arrow when clicking on different menu items. The arrow should move over the active menu item. By default, the arrow should point to the active menu. Each menu item should act like a tab, displaying a list of items when clicked. I have included the code snippet below, but I have been unable to achieve the desired effect.

Code Snippet:

.db-new-filters {
  margin-bottom: 20px;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.db-new-filters .tabs {
  border-bottom: 1px #dddddd solid;
  position: relative;
}
ul,
ol,
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}
.db-new-filters .tabs li:first-child {
  margin-left: 0;
}
.db-new-filters .tabs li {
  display: inline-block;
  margin-left: 11px;
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  -o-transition: left 0.3s;
  transition: left 0.3s;
}
.db-new-filters .tabs li a {
  padding: 3px 5px 10px 5px;
  color: #999999;
  font-size: 14px;
  line-height: 42px;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
}
.db-new-filters .tabs li.pointer {
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  left: 10px;
  bottom: 0;
  margin: 0;
  border-bottom: 10px solid #dddddd;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
<div class="db-new-filters">
  <ul class="tabs js-db-status-tabs">
    <li><a>Active</a>
    </li>
    <li><a>Paused</a>
    </li>
    <li><a>Pending</a>
    </li>
    <li><a>Unapproved</a>
    </li>
    <li class="pointer" style="left: 193.5px;"></li>
  </ul>
</div>

I have searched on Google extensively for a solution but have been unsuccessful. If anyone knows how to solve this problem, please share the solution. I have spent more than an hour trying to figure this out, so any help would be greatly appreciated. Thank you in advance.

javascriptandroidjqueryhtmlcss

Answer №1

Here is the code snippet you can use for your project:

HTML Code:

<div class="services-block">
  <div id="services-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner services" role="listbox" >
      <div class="item active" id="services">
        <ul class="tabbed-menu menu-list">
          <li><a href="javascript:rudrSwitchTab('tb_1', 'content_1');" id="tb_1" class="tabmenu active">Menu nav 1</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_2', 'content_2');" id="tb_2" class="tabmenu">Menu navigation 2</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_3', 'content_3');" id="tb_3" class="tabmenu">Menu navigation 3</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_4', 'content_4');" id="tb_4" class="tabmenu">Menu nav 4</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_5', 'content_5');" id="tb_5" class="tabmenu">Menu navigation 5</a></li>
          <li><a class="right carousel-control" href="#services-carousel" role="button" data-slide="next">Menu nav 6</a></li>
       </ul>                 
     </div> <!--/.item active-->

   </div> <!--/.carousel-inner-->
   <div id="marker"></div>
 </div> <!--/#services-carousel-->
</div> <!--services-block-->

CSS Code:

#services-carousel, #services {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
ul {
  overflow:hidden;
  padding: 0;
}
li {
  float: left;
  list-style-type: none;
  padding: 10px 20px;  
}
a {
  text-decoration: none;
  color: #666;
  font-size: 18px;
}
#marker {
background: transparent url("http://cdn7.unit4.com/images/theme/2014/icons/down.png") no-repeat scroll 50% 50%;   
height: 16px;
left: 4%;
position: absolute;
z-index: 1;
width: 45px;
transition: .4s left ease-in;
}

Javascript Code:

 $("#services ul > li").click(function(event){
    var position = $(this).position().left;
    var width = Math.round($(this).width()/2) - 5;
    var arrowPos = position + width;
    $('#marker').css('left', arrowPos);
    event.preventDefault();
  });

For more information, you can visit: http://codepen.io/anon/pen/vObmJV

Answer №2

To achieve this effect, you can utilize jQuery. I made adjustments to your HTML and CSS by using the :after pseudo element.

Take a look at the example below:

$(function() {
  $('ul.tabs a').click(function() {
    $('ul.tabs li').removeClass('active');
    $(this).parent('li').addClass('active');
  });
});
.db-new-filters {
  margin-bottom: 20px;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.db-new-filters .tabs {
  border-bottom: 1px #dddddd solid;
  position: relative;
}
ul,
ol,
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}
.db-new-filters .tabs li:first-child {
  margin-left: 0;
}
.db-new-filters .tabs li {
  position: relative;
  display: inline-block;
  margin-left: 11px;
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  -o-transition: left 0.3s;
  transition: left 0.3s;
}
.db-new-filters .tabs li a {
  padding: 3px 5px 10px 5px;
  color: #999999;
  font-size: 14px;
  line-height: 42px;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.db-new-filters .tabs li.active::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 10px;
  margin-top: -10px;
  left: calc(50% - 10px);
  border-bottom: 10px solid #dddddd;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="db-new-filters">
  <ul class="tabs js-db-status-tabs">
    <li class="active">
      <a>Active</a>
    </li>
    <li>
      <a>Paused</a>
    </li>
    <li>
      <a>Pending</a>
    </li>
    <li>
      <a>Unapproved</a>
    </li>
  </ul>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a secondary ordered list with ongoing points - a step-by-step guide

Is there a way to create an unordered list with a continued ordered second level that automatically counts the points? I know about using <ol start="Previous number+1">, but is it possible for the list to continue numbering on its own? The ...

htmlhtml-lists

What is the best way to eliminate all click event handlers with jQuery?

I'm encountering an issue where multiple click events are being attached to a button. Specifically, when a user clicks on an 'Edit' link, the following JQuery code is executed: $("#saveBtn").click(function () { saveQuestion(id); }); Ea ...

javascriptjqueryclick

Implementing requirejs alongside retinajs for enhanced performance and compatibility

Currently, I am utilizing a combination of requirejs and retinajs as a plugin. To ensure smooth functioning, I am incorporating the shim feature along with a jQuery dependency: .... 'plugins/retina.min': { 'deps': ['jquery ...

javascriptjqueryrequirejs

How can I transform a Firestore collection into an array?

I'm struggling with converting the data retrieved from Firestore into an array that can be used for a chart.js graph. Retrieving Data from Firestore fetchData(){ //Get data this.updatesCollection = this.afs.collection(pathStats); this. ...

javascriptangularchart.jsgoogle-cloud-firestore

Issue: "StoreController Undefined" error in Python Flask + Angular application

In the python flask application that I have built with Angular JS for the front end, there are three main files. app.py import json import flask import numpy as np app = flask.Flask(__name__) @app.route("/") def index(): ...

javascriptpythonangularjsflask

xhttp.load path for server-side module

I'm currently working on developing a node package and in my JavaScript code, I have the following: const calcHtml = './calc.html'; const xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4) { ...

javascriptnpm

Executing a node (console) command from a JavaScript file using AJAX on click

Hey, I'm a beginner in node.js and I have a question: Imagine I have a web application with a button. When the user clicks this button, I want to execute a node console command (e.g. node socket.io). Here's my attempt using jQuery: $( ".button ...

javascriptnode.jsexpresssocket.io

JavaScript dropdown selection in HTML

I'm currently working on retrieving data from a database and displaying it in a select option using a drop-down menu. The data is being fetched correctly in the Java Script page. However, I'm facing an issue where it is not showing up in the HTML ...

javascriptajaxhtmlhtml-select

Guidelines for creating a uniform table border with varying border thicknesses

I have created a crossword puzzle generator that arranges words by rows and fills each cell with one letter. The keywords are distinguished by a wider border and a gray background, as shown in this image. Here is the general structure of my code: #cross ...

css

Striving to get $(document).ready to function seamlessly with load()

While attempting to load my page using the load function, I encountered an issue with initializing the orbit slider from Foundation. The images load fine, but the slider fails to initialize. Here is the code used to load slider.html: $("a#1").click( func ...

jqueryajaxdocument-ready

The ng-include feature seems to be malfunctioning

After building a basic web page using AngularJs, I ran into an issue when attempting to integrate header.htm into index.html - nothing was displaying in the browser. index.html <html> <script src="https://ajax.googleapis.com/ajax/libs/angul ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-include

Tips for incorporating the .get(position) method into an alert dialog box

I'm currently working with the Realtime database and I'm trying to retrieve the position of the selected item in the recycler view to delete it. However, I'm facing an issue with this line of code: " String id = list.get(position).getId ...

javaandroidfirebase-realtime-database

What level of trust can be placed in MUI Global Class names when using JSS?

Here is my current code snippet: const formControlStyles = { root: { '&:hover .MuiFormLabel-root': { } } } Would it be considered secure to utilize the class name in theme overrides for connecting with other components? Furthe ...

javascriptreactjsmaterial-uijss

Discover the smallest and largest values within the multi-layered object

My JavaScript object is deeply nested with an infinite number of children, each containing a value. var object = { value: 1, children: { value: 10, children:{ value: 2, children: {...} } } } I've tried ...

javascriptreduce

Prevent the execution of useEffect on the client side in Next JS if the data has already been retrieved from the server

Upon loading the server side rendered page, data is fetched on the server and passed to client side components. To handle this process, a hook has been created with a state that updates based on checkBox changes. When the state changes, a useEffect is tri ...

javascriptreactjsperformancenext.jsserver-side-rendering

Extracting a precise data point stored in Mongo database

I have been struggling to extract a specific value from my MongoDB database in node.js. I have tried using both find() and findOne(), but I keep receiving an object-like output in the console. Here is the code snippet: const mongoose = require('mongoo ...

javascriptnode.jsmongodbexpressmongoose

Accessing an object from a webpage using Selenium: A step-by-step guide

Today marks my debut using Selenium IDE, and I must admit that my knowledge of web development is limited. My team is currently working on a website, and as part of my task, I need to write tests for it. The website features several charts showcasing data ...

htmlcssseleniumselenium-ide

Looking to reset the default display option in a select dropdown using JavaScript or jQuery?

Here is some HTML code for a select element: <select> <br> <option>1</option><br> <option>2</option><br> </select> This select element will initially display the first option item (display ...

javascripthtmlselect

Performing a mouse hover action with Selenium WebDriver

Can someone guide me on how to perform a mouse hover action in Selenium WebDriver? The mouse hover action needs to be done on a tab where it hovers and then clicks on the tab. Is there a way to achieve this using JavaScript executor and java? ...

javajavascriptselenium-webdriver

What is the best way to hide the MatSlidePanel?

There is a side panel in my application that I need to close upon user action. I am facing an issue with the following error message: Property 'close' does not exist on type 'MatSlidePanel'.ts(2339) Below is the code snippet I attempte ...

jqueryangular