JQ realizes the function of hovering, highlighting and sliding the navigation bar mouse

Time:2020-2-26

JQ realizes the function of hovering, highlighting and sliding the navigation bar mouse

Recently, a highlighted navigation will have a floating block effect of animation. There are many similar effects on the Internet. After a lot of reference, I took them to repair, modify and finally meet the needs of my work. There are not many parts in JS:

<html>

<head></head>
<!-- <link rel="stylesheet" href="css/css.css"> -->
<style>
    nav {
        position: relative
    }

    nav #line {
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 2px;
        background: -webkit-linear-gradient(315deg, #0c5fa4, #4aa654);
        background: -moz- oldlinear-gradient(315deg, #0c5fa4, #4aa654);
        background: -o-linear-gradient(315deg, #0c5fa4, #4aa654);
        background: linear-gradient(135deg, #0c5fa4, #4aa654);
        -webkit-transition: all 0.4s;
        -o-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s
    }
    nav ul {
        text-align: center;
        position: relative;
        z-index: 1
    }
    nav ul li {
        float: left;
        margin-right: 40px;
        position: relative
    }
    nav ul li:hover .stair {
        color: #1e649f
    }
    nav ul li.active .stair {
        color: #1e649f
    }
    nav ul li .stair {
        color: #333;
        font-size: 16px;
        height: 64px;
        line-height: 64px;
        padding: 0 4px;
        display: inline-block;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
        position: relative
    }
    nav ul li .stair .new-icon {
        position: absolute;
        width: 22px;
        top: 9px;
        right: -22px
    }

    nav ul li .second {
        padding-top: 25px;
        padding-bottom: 25px;
        position: absolute;
        width: 150px;
        top: 74px;
        left: 50%;
        margin-left: -95px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: none
    }
    nav ul li .second:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 10px;
        background-color: transparent;
        top: -10px;
        left: 0;
        z-index: 2
    }
    nav ul li .second .item {
        display: block;
        line-height: 40px;
        color: #666;
        font-size: 16px
    }
    nav ul li .second .item:hover {
        color: #1e649f
    }
    nav ul li .second .item.active {
        color: #1e649f
    }
</style>
<script></script>

<body>
    <nav>
        <span id="line"></span>
        <ul class="clearfix">
            <li class="">
                < a class = "Star" href = "javascript:;" > Home Page</a>
            </li>
            <li class="">
                < a class = "Star" href = "javascript:;" > Product Center</a>
            </li>
            <li class="active">
                < a class = "Star" href = "javascript:;" > solutions</a>
            </li>
            <li class="">
                < a class = "Star" href = "javascript:;" > services and support</a>
            </li>
        </ul>
    </nav>
    <script>
        //Floating navigation
        var navActive = $("nav li.active");
        $("#line, .triangle-color").width($("li.active").outerWidth());
        $("#line, .triangle-color").offset({ left: $("li.active").offset().left })
        $("nav li").hover(function () {
            $(this).addClass("active").siblings().removeClass("active");
            $("#line, .triangle-color").width($("li.active").outerWidth());
            $("#line, .triangle-color").offset({ left: $("li.active").offset().left })
        }, function () {
            $("nav li").removeClass("active");
            navActive.addClass("active");
            $("#line, .triangle-color").width(navActive.outerWidth());
            $("#line, .triangle-color").offset({ left: navActive.offset().left })
        });
    </script>
</body>
</html>

This is the complete code.
The basic principle is to move the mouse in to obtain the offset position of the move in navigation
($(“li.active”).offset().left)

And the width of the move in navigation, which ultimately assigns the value obtained to the suspended block.
But remember to get the highlighted element $(“NAV Li. Active”) of the initial navigation, because after the mouse moves out of the navigation, you need to give the position of the floating block back to the initial navigation.
The above is my summary. I hope it can help people in need. If there are any problems in writing, friends are welcome to point them out.