What is the best way to incorporate a highlighting bar below a link for emphasis?

How can I create a highlight effect above a link in the status bar, similar to what is seen on Fiddle sites? The highlight should remain above the active link and move to the link the mouse hovers over. Here is an example image of what I am trying to achieve:

The small blue line under "collaboration": https://i.sstatic.net/ya1rB.gif

           $(function() {

      $("li").on("mouseover mouseleave",
         function () {
          $("#progressbar").toggleClass("highlight"); 

         });

            setInterval("rotateimages()", 1000);
        });
        

        function rotateimages() {
        
            var curPhoto = $("#photoShow div.current");
            var nextPhoto = curPhoto.next();
            if (nextPhoto.length == 0) {
                return;
            } 
            
            curPhoto.removeClass("current").addClass('previous');  
            nextPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000, function() {
                curPhoto.removeClass('previous');
            });         
        }
     #logo { float: left; }

     #nav  {
        list-style-type:none; 
        float:right;
    } 
    li {
        display: inline-block;
        border-right: thin;
    } 

    #progressbar{
        float: right;
        background-color: #D2D5D5;
        height: 5px;
        width: 100%;
    }
    
    .highlight {
        background-color: #79CDFE;
    }

    .topnav {
        background-color: #FEFEFE;
        overflow: hidden;
    }

    .topnav a {
        width:100%;
        float: left;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px; 
    }

    #nav a:hover {
        background-color: white;
        color: #79CDFE;
        background-origin: : #79CDFE;
        border-top: #79CDFE;
    }

    .topnav a.active {
        background-color: white;
        color: #79CDFE;
    }
    .status-menu {
        width: 98px;
        height: 5px;
        background: #4EFFFF;
        position: absolute;
    }

    body {
        padding: 0px;
        margin: 0px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>


    <div class="topnav">

    <div id="progressbar">
        <div id="care"></div>
        <div id="hospital"></div>
        <div id="service"></div>
        <div id="about"></div>
        <div id="news"></div>
    </div>

        <img src="src/images/logo.png" id="logo" class="gallery"/>
        <ul id="nav">
            <li> <a class="active" href="#home">Home</a></li>
            <li><a class="" href="#care">Link 1</a></li>
            <li><a class="" href="#hospital">Link 2</a></li>
            <li><a class="" href="#service">Link 3</a></li>
            <li><a class="" href="#about">Link 4</a></li>
             <li><a class="" href="#news">Link 5</a></li>
        </ul>
          
    </div> 
  
    </header>

javascriptjqueryhtmlcss

Answer №1

To create a highlight bar above a link, consider using a ::before pseudo element on the link for positioning flexibility. Currently positioned at the top of the progress bar, it can be adjusted higher or lower as needed.

$(function() {

  $("li").on("mouseover mouseleave",
     function () {
      $("#progressbar").toggleClass("highlight");

     });

        setInterval("rotateimages()", 1000);
    });


    function rotateimages() {

        var curPhoto = $("#photoShow div.current");
        var nextPhoto = curPhoto.next();
        if (nextPhoto.length == 0) {
            return;
        }

        curPhoto.removeClass("current").addClass('previous');
        nextPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000, function() {
            curPhoto.removeClass('previous');
        });
    }
#logo { float: left; }

#nav  {
    list-style-type:none;
    float:right;
}
li {
    display: inline-block;
    border-right: thin;
}

#progressbar{
    float: right;
    background-color: #D2D5D5;
    height: 5px;
    width: 100%;
}

.highlight {
    background-color: #79CDFE;
}

.topnav {
    background-color: #FEFEFE;
    overflow: hidden;
}

.topnav a {
    width:100%;
    float: left;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: relative;
}

.topnav a::before {
    background-color: transparent;
    content: '';
    display: block;
    height: 1px;
    position: absolute;
    top: -21px;
    width: 100%;
}

#nav a:hover {
    background-color: white;
    color: #79CDFE;
    background-origin: #79CDFE;
}

#nav a:hover::before {
    background-color: #79CDFE;
}

.topnav a.active {
    background-color: white;
    color: #79CDFE;
}

.topnav a.active::before {
    background-color: #79CDFE;
}

.status-menu {
    width: 98px;
    height: 5px;
    background: #4EFFFF;
    position: absolute;
}

body {
    padding: 0px;
    margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>


    <div class="topnav">

    <div id="progressbar">
        <div id="care"></div>
        <div id="hospital"></div>
        <div id="service"></div>
        <div id="about"></div>
        <div id="news"></div>
    </div>

        <img src="src/images/logo.png" id="logo" class="gallery"/>
        <ul id="nav">
            <li> <a class="active" href="#home">Home</a></li>
            <li><a class="" href="#care">Link 1</a></li>
            <li><a class="" href="#hospital">Link 2</a></li>
            <li><a class="" href="#service">Link 3</a></li>
            <li><a class="" href="#about">Link 4</a></li>
             <li><a class="" href="#news">Link 5</a></li>
        </ul>

    </div>

    </header>

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

TinyMce editor's WYSIWYG settings are not functioning properly on IE9

Incorporating TinyMce into my application has been a success. However, one problem I encountered was that when users typed something in the editor and hit enter, an extra blank line would be inserted. To resolve this issue, I utilized force_p_newlines: fal ...

jqueryasp.nettinymcewysiwyg

I am having trouble grasping the concept of how the find method operates in

I am new to using jquery. I have created a table in HTML below: https://i.sstatic.net/6Odg3.png My goal was to display three alert boxes consecutively for 3 checkboxes found in my table. Here is the code I used: $(document).ready(function(){ $("#but ...

jqueryhtml

Pass the value of v-model from one component to the template

I've recently started working with Vue.js and I encountered an issue where I needed to pass a value to the v-model of a template in my main.js file. Here is the template: Inside main.js Vue.component("app-input", { template: ` <b-row class= ...

javascriptvue.jsvue-component

Obtaining up-to-date data when utilizing jquery for cloning

Is there a way to retrieve the current data of elements when cloning using jquery? Currently, it only copies the default data in the elements. Below is an example of the code: souRce.clone() .prop('id', newName) .html(function () { ...

jqueryclonecloning

Vue - Seamlessly Editing and Creating Content Together

When using Laravel, I am attempting to pass data to a Vue component. Depending on whether the user enters the component through an edit URL or a create URL, we send either an array of data or null. Here is an example of how this process works: Blade view ...

javascriptlaravelvue.jsvuejs2axios

Ways to loop through an array in a JSON object

Exploring methods of iterating through an array in json: $(document).ready(function(){ $('#wardno').change(function(){ //this code will execute whenever there is a change in the select with id country $("#wardname > ...

javascriptjqueryjson

What are some ways to lazily load directives in AngularJS?

Currently, I am exploring the capabilities of angularjs and aiming to dynamically load directives only when they are required instead of loading all of them initially on the page. My focus is on creating custom directives for the plugins that I use frequen ...

javascriptangularjs

How can I automatically select an option in Vue JS based on a nested v-for value?

I am encountering a challenge with a nested v-for inside of another v-for in my Vue project. Although I am able to retrieve the correct data, I am facing difficulty using a select dropdown to populate a field and automatically selecting the option based on ...

javascripthtmljqueryvue.jsvuejs2

Can a circular dependency be tolerated when a type declaration file brings in an enum from the implementation?

Let's say you have an implementation file called module.ts and a type declaration file named module.d.ts. // module.ts import type ConfigI from 'module.d.ts'; export enum ConfigType { Simple, Complex } function performTask(config: Conf ...

javascriptnode.jstypescriptenumscircular-dependency

Is it possible to combine the use of 'res.sendFile' and 'res.json' in the same code?

At the moment, my Express app utilizes a controller to manage routing. When a specific route is accessed, I trigger pagesController.showPlayer which sends back my index.html. This is what the controller looks like: 'use strict'; var path = requ ...

javascriptnode.jsexpress

Having troubles with Vue.js lifecycle events? Are you experiencing issues with your data array only being populated after refreshing the page with a Webpack loader? Struggling to get Google Maps

Just dipping my toes into vueJS, currently working on an app that can plot locations on a google maps element. My code may be messy, but it's all part of the learning process for me. Any assistance is greatly appreciated. Context I have an array of ...

javascriptgoogle-mapsvue.jswebpack

Utilizing JavaScript to iterate through objects retrieved via Ajax calls

Recently, I've been diving into the world of Javascript and delving deep into AJAX. Utilizing Vanilla JS along with simple AJAX, my current task involves fetching a user object from a URL based on the user's input ID. Despite attempting to use .d ...

javascriptajax

jQuery - final slide not triggering interval, causing animation malfunction

I am working on creating a slider using multiple divs instead of images. I have a total of 3 divs, and while the first two transition smoothly as intended, the third div seems to fly away too quickly - it briefly appears and then snaps back to the first di ...

javascriptjqueryhtml

What are the steps for scheduling asynchronous tasks using Promises in Node.js?

As a beginner in Javascript, I am struggling to understand how to execute my functions sequentially. My goal is to use Promises to accomplish this task. I am currently following a tutorial on creating a chat bot for Facebook Messenger. Essentially, I want ...

javascriptnode.jspromisefacebook-messenger

Trigger an Angular click event that applies a class to the element that is specifically clicked on and removes it from the elements that were not clicked

What is the best way to translate this jQuery code into Angular? HTML <div> <p class="question">Which option would you like to choose?</p> <div class="answer">Option 1</div> <div class="answe ...

jqueryangular

Leveraging PHP to dynamically insert image file names into a directory for populating the HTML img src attribute in a Bootstrap

I am trying to dynamically populate a Bootstrap carousel with images from a folder by using PHP to scan the image files. However, instead of displaying the images in the carousel, only the names of the images are being listed. Below is my code, and I have ...

phphtmltwitter-bootstraptwitter-bootstrap-3php-7

Using jQuery to remove the td element from an HTML table

Hello everyone, I have a query. I am trying to remove a specific td from a table using JavaScript, but the remove() function is not working. Here is my code: $('.btnEliminarLicencia').off('click'); $('.btnEliminarLicencia&apo ...

javascriptjqueryhtmlajaxjsp

Storing JSON content in a MySQL database with PHP

I am developing a web application using Leap Motion technology with PHP and JavaScript. This app focuses on gesture recognition, where the values captured by Leap Motion need to be stored in a database. When a recognized gesture is matched, its correspondi ...

javascriptphpmysqlleap-motion

When using `res.send()`, an error of Type Error may be encountered stating that the callback is not a function. However, despite this error,

I am currently working on a function for my Node.js server, using Express as the framework and MongoDB as the database. This function involves calling two mongoose queries: (1) Retrieving filtered data from one collection (2) Aggregating data from anothe ...

javascriptnode.jsmongodbexpresscallback

Generate a random number to select a song file in Javascript: (Math.floor(Math.random() * songs) + 1) + '.mp3'

My current JavaScript code selects a random song from the assets/music folder and plays it: audio.src = path + 'assets/music/'+(Math.floor(Math.random() * songs) + 1)+'.mp3' However, I've noticed that sometimes the same trac ...

javascript