Responsive website design with sidenav

Many people want to make their own website after learning how to code. This is even better if the website is responsive. We will show you the code of a simple website layout which is Mobile Responsive. Side navigation will open when you click a button on this website. If you click the cross button on the side navigation it will remove the navbar from the right. Before you collect the code, watch the video below and follow the steps. You will be able to understand the code very quickly. There are a lot of videos on the topic of front-end development basics on our YouTube channel. If you are new to front-end development, then you can subscribe to our channel.

If you watched the video from beginning to end, you'll understand how the snippets were created. This is a basic layout that was created with the help of HTML and CSS. The normal rules of making a navigation bar for the website were not applied in this project. Instead, we have placed a button called menu so that when clicked, our navigation bar will open in the form of a side nav. Each nav item is linked to a related section. When we click on a nav item, we go to the related section of that nav item. The scroll behavior property has been used to make the animation smooth.

First, we have a div called "leftMenu" in which we put together the nav items of our main navigation bar. We will make six sections so the sections are linked with the nav items. Also on this div, a cross button has been taken with a onclick event called closeBtn (). Below the left menu, we have taken a span tag and another on-click event so that when you click, the side nav will open. Then I took the Home, About, Services, Blog, and Contact sections. We have used the display grid property for each section in CSS. Then we take the place-items center and 100vh height so that the content of each section is all over the viewport and its contents are in the middle of the viewport. You can see how the rest of the elements have been styled by watching the video. The span tag is set to the top right with the fixed position. CSS media queries have been used in this project so that the website layout can be viewed beautifully on small devices. You can modify the style of the element according to your needs.

You May Also like:

How to create a responsive website [ Source Code ]:

To create this snippet, first, create an HTML file. Then create a CSS file and attach it to HTML. Since we used JQuery to create a side nav, we need to add the latest JQuery file to our project. Then copy the code from the code box below and paste it into your files. Open the project in the browser and see if it works properly. If not, download the code from the download button below.

ADD HTML:

<!doctype html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>How to Create a Website Layout using HTML CSS</title>
    <link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="leftMenu">
        <a href="javscript:void(0)" class="btn-area" onclick="closeBtn()">×</a>
        <div class="mainNav">
            <a href="#">home</a>
            <a href="#about">about</a>
            <a href="#portfolio">portfolio</a>
            <a href="#services">services</a>
            <a href="#blog">blog</a>
            <a href="#contact">contact</a>
        </div>
    </div>
    <span onclick="openBtn()">☰ Menu</span>
    
    <div class="content">
        <div class="box">
            <h2>Creative Agency</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit Fuga dolor</p>
        </div>
    </div>
    <div class="about" id="about">
        <div class="box">
            <h2>About Us</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga dolor, reprehenderit in enim amet aspernatur ipsum praesentium fugiat error ea tempore, aut rem nostrum labore?</p>
        </div>
    </div>
    <div class="portfolio" id="portfolio">
        <div class="box">
            <h2>Portfolio</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga dolor, reprehenderit in enim amet aspernatur ipsum praesentium fugiat error ea tempore, aut rem nostrum labore?</p>
        </div>
    </div>
    <div class="services" id="services">
        <div class="box">
            <h2>Our Services</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga dolor, reprehenderit in enim amet aspernatur ipsum praesentium fugiat error ea tempore, aut rem nostrum labore?</p>
        </div>
    </div>
    <div class="blog" id="blog">
        <div class="box">
            <h2>Our Blog</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga dolor, reprehenderit in enim amet aspernatur ipsum praesentium fugiat error ea tempore, aut rem nostrum labore?</p>
        </div>
    </div>
    <div class="contact" id="contact">
        <div class="box">
            <h2>Contact Us</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga dolor, reprehenderit in enim amet aspernatur ipsum praesentium fugiat error ea tempore, aut rem nostrum labore?</p>
        </div>
    </div>
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function openBtn()
        {
            document.getElementById("leftMenu").style.width = "250px";
        }

        function closeBtn()
        {
            document.getElementById("leftMenu").style.width = "0";
        }
    </script>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: impact;
}
html {
	scroll-behavior: smooth;
}
#leftMenu {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: deepskyblue;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 60px;
	z-index: 1000;
}
.mainNav {
	margin-top: 70px;
}
.mainNav a {
	margin-bottom: 15px;
}
.content, .about, .portfolio, .services, .blog, .contact {
	display: grid;
	place-items: center;
	height: 100vh;
}
.content h2, .about h2, .portfolio h2, .services h2, .blog h2, .contact h2 {
	font-family: russo one;
	text-align: center;
	text-transform: uppercase;
	font-size: 50px;
	color: deepskyblue;
}
.content p, .about p, .portfolio p, .services p, .blog p, .contact p {
	font-family: montserrat;
	width: 65%;
	line-height: 1.9;
	text-align: center;
	margin: auto;
}
.content {
	display: grid;
	place-items: center;
	height: 100vh;
	background: url(img/1.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
}
.content:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: -1;
}
.content p {
	color: #fff;
}
#leftMenu a {
	padding: 8px 8px 8px 10px;
	text-decoration: none;
	font-size: 25px;
	color: #fff;
	display: block;
	transition: 0.4s;
	text-align: center;
	text-transform: uppercase;
	border-radius: 0 50PX 50px 0;
}
#leftMenu a:hover {
	color: #000;
	background: #FFF;
}
#leftMenu a.btn-area {
	border-radius: 0;
}
#leftMenu .btn-area {
	position: absolute;
	top: 0;
	right: 15px;
	font-size: 40px;
}
span {
	position: fixed;
	right: 90px;
	top: 30px;
	font-size: 30px;
	transition: 0.3s;
	cursor: pointer;
	z-index: 5;
	color: deepskyblue;
}
@media (max-width:767px) {
	span {
		right: 15px;
		top: 20px;
		font-size: 20px;
	}
	.content h2, .about h2, .portfolio h2, .services h2, .blog h2, .contact h2 {
		font-size: 35px;
	}
	.mainNav {
		margin-top: 20px;
	}
}

If your code is working, that's good. Front-end related source code is shared on our website frequently. You can visit our website frequently if you feel like it. Share the articles of this website with everyone because we all know sharing is caring. We would like to thank you for visiting our site.

DOWNLOAD CODE

How to create a responsive website [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive website design with sidenav

How to create a responsive website [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form