Fri Aug 05 2022

Menubar with Moving Hover

CSS4269 views


Menubar with Moving Hover

File Name: magic-moving-hover-menubar.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Magic Background Menubar</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'Poppins', sans-serif;
        }

        body { background-color: #292929; }

        section {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        nav {
            width: 550px;
            display: flex;
            gap: 1px;
            border-radius: 5px;
            background-color: #05a888;
            position: relative;
        }

        nav a {
            width: calc(100% / 4);
            text-align: center;
            padding: 10px 0;
            text-decoration: none;
            font-size: 18px;
            color: #fff;
            position: relative;
            z-index: 1;
        }
        
        nav .bg {
            position: absolute;
            top: 0;
            bottom: 0;
            width: calc(100% / 4);
            left: 0;
            background-color: rgba(0,0,0,0.2);
            border-radius: 5px;
            transition: 0.2s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        nav a:hover:nth-child(1) ~ .bg {
            left: 0;
        }

        nav a:hover:nth-child(2) ~ .bg {
            left: calc(100% / 4);
        }

        nav a:hover:nth-child(3) ~ .bg {
            left: calc((100% / 4) * 2);
        }

        nav a:hover:nth-child(4) ~ .bg {
            left: calc((100% / 4) * 3);
        }
    </style>
</head>
<body>
    <section>
        <nav>
            <a href="">Home</a>
            <a href="">About Us</a>
            <a href="">Services</a>
            <a href="">Contact Us</a>
            <div class="bg"></div>
        </nav>
    </section>
</body>
</html>

Result Screenshot(s)

Menubar with Moving HoverWorking Sample0

We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.