Mobile Navigation using HTML CSS with Source Code

Hey, developers welcome to Day 31 of our 90Days 90Projects challenge. And in Day 31we are going to create a Mobile Navigation using HTML CSS with Source Code

So to run the code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

mobile navigation menu, mobile navigation menu code, mobile navigation example, mobile navigation using html css


Image Resource - Download Now

HTML Code

index.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> Mobile Navigation </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main-container">
        <nav class="navigation">
            <ul>
                <li>
                    <i class="fa-solid fa-house"></i>
                </li>
                <li>
                    <i class="fa-solid fa-user"></i>
                </li>
                <li>
                    <i class="fa-solid fa-rocket"></i>
                </li>
                <li>
                    <i class="fa-solid fa-people-group"></i>
                </li>
                <li>
                    <i class="fa-solid fa-cart-shopping"></i>
                </li>
            </ul>
        </nav>
    </div>

</body>

</html>


CSS Code

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navigation {
    bottom: 2rem;
    position: absolute;
    left: 50%;
    display: block;
    margin: 0 auto;
    border-radius: 1.5rem;
    transform: translate(-50%, 0);
    background-color: purple;
}

.navigation ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

.navigation ul li {
    height: 35px;
    width: 35px;
    margin: 1rem;
    color: white;
    padding: 0 1rem;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s linear;
}

.navigation ul li:hover {
    color: purple;
    transform: scale(1.2);
    background-color: #fff;
}

.navigation ul li:hover i {
    border-radius: 50%;
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

2 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad