Home / Project / Make a Sidebar Navigation Menu using HTML,CSS and JAVASCRIPT

Make a Sidebar Navigation Menu using HTML,CSS and JAVASCRIPT

-

in this tutorial, I will show you how to make a simple and beautiful Sliding Menu using HTML, CSS, and Javascript.
You can download the project file from the link at the bottom of the article and you can also learn how to make with the source code.

Images Ressources

 for this project, we will need some images like the open and close button.
Menu button iconclose button icontext logo


HTML Code



 <!DOCTYPE HTML>
<html>

<head>
    <link rel="stylesheet" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat|Roboto&display=swap" rel="stylesheet">
</head>

<body>
    <nav>
        <div class="container">
            <img onclick="slide_out()" class="btn" src="menu_btn.png">
        </div>

    </nav>

    <header>

    </header>
    <div class="menu">
        <div class="logo">
            <img class="brand" src="logo.png">
            <img onclick="slide_in()" class="close" src="close_btn.png">
        </div>
        <ul>
            <a href="#">
                <li>Home Page</li>
            </a>
            <li><a href="#">Shop</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>

    </div>
    <script type="text/javascript" src="sidebar.js"></script>
</body>

</html>

CSS Code



 * {
    margin: 0;
    padding: 0;
    outline: 0;
}

nav {
    width: 100%;
    position: relative;
    height: 80px;
    background-color: #fafafa;
    box-shadow: 0 2px 4px rgba(50, 50, 50, .3);
    z-index: 0;
}

nav .container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
}

nav img {
    width: 64px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

header {
    width: 100%;
    height: 700px;
    background-image: url(bg1.jpg);
}

.menu {
    position: fixed;
    width: 300px;
    height: 100vh;
    background-color: #f0f0f0;
    z-index: 1;
    top: 0;
    margin-left: -300px;
    transition: .4s;
}

.logo {
    padding: 8px;

}

.menu .close {
    width: 32px;
    float: right;
    cursor: pointer;
}

.menu .brand {
    position: relative;
    left: 50%;
    transform: translateX(-50%);

}

.menu ul {
    width: 100%;
    text-align: center;
}

.menu ul li {
    width: 100%;
    padding: 15px 0;
    transition: .4s;
}

.menu ul li:hover {
    background-color: #e2e2e2;
}

.menu ul a {
    font-size: 1.3rem;
    color: #4c4cf5;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Montserat', sans-serif;
}

JavaScript Code



 var menu = document.querySelector('.menu');

function slide_out() {
    menu.style.marginLeft = "0";
}

function slide_in() {
    menu.style.marginLeft = "-300px"
}

I hope that you have enjoyed this project, you can download it from this link



                                                                Download





Make a Sidebar Navigation Menu using HTML,CSS and JAVASCRIPT Make a Sidebar Navigation Menu using HTML,CSS and JAVASCRIPT Reviewed by Medics on July 28, 2019 Rating: 5

No comments:

Subscribe to: Post Comments ( Atom )
-->
Powered by Blogger.