Skip to content

JavaScript Menu


HTML CODE:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="1.page.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>

    <nav>
        <div class="toggle">
            <i class="fas fa-bars but"></i>
        </div>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">PORTFOLIO</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </nav>

</body>
</html>

CSS CODE:

body{
    margin:0;
    padding:0;
    font-family:sans-serif
}
nav {
    width: 100%;
    background: #00316b;
}
ul{
    width:80%;
    margin:0 auto;
    padding:0;
}
ul li{
    list-style:none;
    display:inline-block;
    padding:20px;
}
ul li:hover{
    background:#e91e63;
}
ul li a{
    color:#fff;
    text-decoration:none;
}
.toggle{
    width:100%;
    padding:10px 20px;
    background:#001f44;
    text-align:right;
    box-sizing:border-box;
    color:#fff;
    font-size:30px;
    display:none;
}
@media(max-width:768px){
    .toggle{
        display:block;
    }
    ul {
        width: 100%;
        display:none;
    }

    ul li {
       display: block;
       text-align: center;
     }
    .active{
        display:block;
    }
}

JAVASCRIPT CODE

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            $(".but").click(function () {
                $("ul").toggleClass("active");
            })
        })
    </script>

3 Comments »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: