Use jQuery to select and emphasize the following menu option

Question

Use jQuery to select and emphasize the following menu option

Hey there! I'm currently working on adding a new feature to my website. I want the menu items to highlight in succession when clicked. For example, if I click on people, I want it to highlight and then move on to highlight the next item in the menu, which would be tourist. I've been using CSS for hover effects, but I've heard that a:active doesn't work with CSS. Can anyone provide some guidance on this?

Here's what I have done so far:

HTML

<section id="nav">
        <li><a class="nav" href="People.html">People</a></li>
        <li><a class="nav" href="Tourist.html">Tourist</a></li>
        <li><a class="nav" href="Joints.html">Joints</a></li>
        <li><a class="nav" href="Project.html">Project</a></li>
        <li><a class="nav" href="Products.html">Products</a></li>
        <li><a class="nav" href="cafes.html">cafes</a></li>
    </section>

jQuery

<script>
        $(function() {
            $('#nav').on('click','.nav', function ( e ) {
                e.preventDefault();
                $(this).parents('#nav').find('.active').removeClass('active').end().end().addClass('active');
                $(activeTab).show();
            });
        });
    </script>

CSS

#nav{
        width:100%;
        text-align:center;
        min-width:1300px;
        height:80px;
        position:absolute;
        top:0;
        left:0;
        background:#fff;
        list-style:none;
        border-bottom: 1px solid #000;
    }

    #nav li{
        display:inline;
    }

    #nav .nav{
        display:inline-block;
        background-color:#000;
        color:#FFF;
        font-family: 'Oswald', sans-serif;
        letter-spacing:1px;
        font-size:16pt;
        line-height:18pt;
        font-weight:400;
        text-decoration:none;
        margin-right: 3px;
        margin-left: 3px;
        margin-top:35px;
        padding:0px 3px 2px 3px;
    }

    #nav .nav:hover{
        background:#FFFF00;
        color:#000;
    }

    .active{
        background:#FFFF00;
        color:#000;
    }

If you have any tips or suggestions, please share! I'm currently stuck on this issue and any help would be greatly appreciated.

javascript jquery html css jquery-ui

Answer 1

Answer №1

Here is a solution that may work for you (assuming I have correctly understood your question):

$('#nav').on('click','.nav', function ( e ) {
    e.preventDefault();
    // Remove all instances of the "active" class:
    $('.active').removeClass('active');
    // Locate the next menu item and add the "active" class:
    $(this).parent().next('li').find('.nav').addClass('active');
    $(activeTab).show();
});

To ensure that the styles for .active are applied (especially if they are being overridden by parent styles like #nav .nav), add !important to the CSS:

.active{
    background:#FFFF00 !important;
    color:#000 !important;
}

Check out the JSFiddle demo

Answer 2

Here is a solution that may work for you (assuming I have correctly understood your question):

$('#nav').on('click','.nav', function ( e ) {
    e.preventDefault();
    // Remove all instances of the "active" class:
    $('.active').removeClass('active');
    // Locate the next menu item and add the "active" class:
    $(this).parent().next('li').find('.nav').addClass('active');
    $(activeTab).show();
});

To ensure that the styles for .active are applied (especially if they are being overridden by parent styles like #nav .nav), add !important to the CSS:

.active{
    background:#FFFF00 !important;
    color:#000 !important;
}

Check out the JSFiddle demo

Answer 3

Answer №2

To emphasize the following item in the menu, you just need to identify the index of the menu item (the index of the <li> in this case) and then determine the next one:

UPDATE:

included animation in code snippet

$(function () {
    $('#nav').on('click', '.nav', function (e) {
        e.preventDefault();
       var NextMenuID = ($(this).parent().index()+1)%$(this).parent().parent().children().length;
        var NextItem =$('#nav .nav').eq(NextMenuID);
        $('#nav .nav').removeClass("active");
        var x1=$(this).offset().left;
        var y1=$(this).offset().top;
        var width1=$(this).width();
        var height1=$(this).height();
        
        var x2=NextItem.offset().left;
        var y2=NextItem.offset().top;
        var width2=NextItem.width();
        var height2=NextItem.height();
        var slidingDiv=$("<div/>");
        slidingDiv.css({
            "width":width1,
            "height":height1,
            "left":x1,
            "top":y1,
            "display":"block",
            "position":"absolute",
            "background":"#FFFF00",
            "padding":"0px 3px 2px 3px"
        }).appendTo($("body")).animate({
            "width":width2,
            "height":height2,
            "left":x2,
            "top":y2,
        },function(){ 
            NextItem.addClass("active");
            slidingDiv.remove();
        });
        
      
        //$(activeTab).show();
    });
});

#nav {
    width:100%;
    text-align:center;
    height:80px;
    position:absolute;
    top:0;
    left:0;
    background:#fff;
    list-style:none;
    border-bottom: 1px solid #000;
}
#nav li {
    display:inline;
}
#nav .nav {
    display:inline-block;
    background-color:#000;
    color:#FFF;
    font-family:'Oswald', sans-serif;
    letter-spacing:1px;
    font-size:16pt;
    line-height:18pt;
    font-weight:400;
    text-decoration:none;
    margin-right: 3px;
    margin-left: 3px;
    margin-top:35px;
    padding:0px 3px 2px 3px;
}
#nav .nav:hover {
    background:#FFFF00;
    color:#000;
}
.active {
    background:#FFFF00 !important;
    color:#000 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="nav">
    <li><a class="nav" href="People.html">People</a>

    </li>
    <li><a class="nav active" href="Tourist.html">Tourist</a>

    </li>
    <li><a class="nav" href="Joints.html">Joints</a>

    </li>
    <li><a class="nav" href="Project.html">Project</a>

    </li>
    <li><a class="nav" href="Products.html">Products</a>

    </li>
    <li><a class="nav" href="cafes.html">cafes</a>

    </li>
</section>

If you have any inquiries regarding the provided example, don't hesitate to ask.

Answer 4

To emphasize the following item in the menu, you just need to identify the index of the menu item (the index of the <li> in this case) and then determine the next one:

UPDATE:

included animation in code snippet

$(function () {
    $('#nav').on('click', '.nav', function (e) {
        e.preventDefault();
       var NextMenuID = ($(this).parent().index()+1)%$(this).parent().parent().children().length;
        var NextItem =$('#nav .nav').eq(NextMenuID);
        $('#nav .nav').removeClass("active");
        var x1=$(this).offset().left;
        var y1=$(this).offset().top;
        var width1=$(this).width();
        var height1=$(this).height();
        
        var x2=NextItem.offset().left;
        var y2=NextItem.offset().top;
        var width2=NextItem.width();
        var height2=NextItem.height();
        var slidingDiv=$("<div/>");
        slidingDiv.css({
            "width":width1,
            "height":height1,
            "left":x1,
            "top":y1,
            "display":"block",
            "position":"absolute",
            "background":"#FFFF00",
            "padding":"0px 3px 2px 3px"
        }).appendTo($("body")).animate({
            "width":width2,
            "height":height2,
            "left":x2,
            "top":y2,
        },function(){ 
            NextItem.addClass("active");
            slidingDiv.remove();
        });
        
      
        //$(activeTab).show();
    });
});

#nav {
    width:100%;
    text-align:center;
    height:80px;
    position:absolute;
    top:0;
    left:0;
    background:#fff;
    list-style:none;
    border-bottom: 1px solid #000;
}
#nav li {
    display:inline;
}
#nav .nav {
    display:inline-block;
    background-color:#000;
    color:#FFF;
    font-family:'Oswald', sans-serif;
    letter-spacing:1px;
    font-size:16pt;
    line-height:18pt;
    font-weight:400;
    text-decoration:none;
    margin-right: 3px;
    margin-left: 3px;
    margin-top:35px;
    padding:0px 3px 2px 3px;
}
#nav .nav:hover {
    background:#FFFF00;
    color:#000;
}
.active {
    background:#FFFF00 !important;
    color:#000 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="nav">
    <li><a class="nav" href="People.html">People</a>

    </li>
    <li><a class="nav active" href="Tourist.html">Tourist</a>

    </li>
    <li><a class="nav" href="Joints.html">Joints</a>

    </li>
    <li><a class="nav" href="Project.html">Project</a>

    </li>
    <li><a class="nav" href="Products.html">Products</a>

    </li>
    <li><a class="nav" href="cafes.html">cafes</a>

    </li>
</section>

If you have any inquiries regarding the provided example, don't hesitate to ask.

Use jQuery to select and emphasize the following menu option

Answer №1

Answer №2

Similar questions

Bug in canvas rendering for Chrome versions 94 and 95

Is it advisable to build dynamic pages using jQuery Mobile?

Avoid making an Ajax request in CodeIgniter if there is no active session or if the network is disconnected

Why isn't it possible to send POST data to a JSON file using JQuery/AJAX?

Dynamic Rendering and Retrieving Component HTML in Angular

Arrange the menu items in a column layout based on a given condition

Jupyter QtConsole: Customize default CSS by selecting from built-in options in the configuration settings

Using a set formatter in jqGrid within a personalized formatter

Are Global variables supported in the EXT JS framework?

Can other JavaScript event listeners be synchronized with an asynchronous event?

Transitioning images with jQuery

Tips for achieving proper styling and formatting of elements in jQuery UI

Utilizing the power of AWS Lambda in conjunction with moment JS to generate unique

Is optgroup malfunctioning in IE 10?

Troubleshooting a problem with placeholder styling on Internet Explorer

Running a JavaScript function within a designated div element

Removing jQuery error label from an HTML block

Using Angular 2: A Beginner's Guide to Navigating with the Latest Angular 2.0.0-rc.1 Router

Issue with Ajax and jQuery

Main content with a floating aside menu