Hello Friends, Today in this project, you'll learn to create a simple, fully responsive Website interface using only HTML and CSS. No javascript or jquery was used while making this snippet. I have shared many CSS animation examples, bootstrap, and javascript-based snippets before on this website. Would you please make sure to check those as well apart from this?
In this blog, we are going to create a website with a side navbar. The main menu for this website will remain on the left, and the website's content will be on the right side. When we click on the menu items, the related section will appear on the right. a smooth transition effect is added, so the animation occurs slowly. The site also works on small devices. I have used CSS responsive media queries to adjust the website look for the smaller devices. The main menu will be on top as we shrink the website, and the content will go underneath the main menu. So the navbar position will change according to device width. You can use this snippet for personal portfolio websites, agency websites, etc. For better understanding, I will recommend you follow the tutorial below until the end.
I hope you watched the whole video and got the idea behind it. In the HTML part, I have taken the nav element with an unordered list. Inside the ul element, there are five li elements, where the first one is used for a profile image. You can put a company logo or name as well. The rest of the li is used for nav items. I have taken four menu items in four different sections named home, about, blog and contact. You can add more menu items and areas according to your need. The second div, called "right-content," is made for putting the contents of the website. For the homepage, I used a simple background image and banner text. From the following sections, I used header text and paragraph text. As it is a simple demonstration of creating a responsive website with sidenav, I didn't put too much content on each section. You can decorate it with your idea.
In the CSS part, first, I eliminated the default margin and padding of the project by giving margin and padding of zero to the body element. I used Montserrat as the default font for the website, but you can use any fonts of your choice while you modify it. Then I gave the ul element a width of 260px and gave it a position fixed value. I have later given the anchor element a display block value so that they align correctly. After that, I used some basic CSS styling to provide a background and hover color. For each section on the right side, I used the display grid property to align the content to the center of that section. Then I styled the rest of the elements. In the responsive part, I changed the ul width to 100% and gave it a default height of 60px to remain on top for the small devices. Later, I also adjusted the height, width, and size of each element in the website in the media queries.
Responsive Website with Sidebar using HTML CSS [ Source Code ]:
For Creating this website, you have to create two files. one is HTML file with .html extension and the other is CSS file with .css extension. would you please copy the code from the code box and paste it into an individual file? Also, remember to link the CSS file to the HTML file. Otherwise, the CSS will not work.
ADD HTML:
ADD CSS:
I hope you have successfully created your snippet version and now modify it according to your need. If you like this snippet, please follow us on our social media profiles and share this blog's articles in your social media profiles. Thank you immensely for your visit.
1
Comments
Please Do not Enter any spam link in the comment box
Lovely!
ReplyDeleteThank you!
Post a Comment
Please Do not Enter any spam link in the comment box