Hello Friends, In this blog, We will learn about Sidebar Menu or Side navigation Menu. This snippet was made using only HTML and CSS. I have Shared many Snippets on CSS animation examples, HTML CSS, Javascript, Jquery Plugin Implementation before on this Website. Please Make sure to check those as well before checking this one. For this project, I will Highly recommend you follow the below video tutorial to understand the basic concept of the snippet. So please watch the video till the end and then come back here to get the code.
I hope you have watched the entire video and got some idea of how this snippet work. Navigation Menu is a very important part of a website. That is to say, a website is never complete without a good navigation menu. So when creating a website, we need to pay special attention to creating a good and interesting menu. Now, there are many types of navigation menus. Top menu, bottom menu, side menu, etc. In this blog, we will discuss the Sidebar Menu. So what exactly is this sidebar Menu? The side menu is a unique, creative, and useful element that is placed to the right or left part of a website. It is a column with useful nav links, forms-related posts, social media links, and so on.
You May Like this:
In this project, we have created a sidebar menu with nice hover animation. We have also included a font-awesome icon before each nav links so that the navbar looks better than the traditional sidebar menu. On the right side of the sidebar menu, there will be the primary content of the website. In our case, it will be the homepage. You can add a background image if you want.
In this Program [ Simple Sidebar Menu using HTML and CSS ], at first, we have taken a nav element with an unordered list for the side nav. The first li element is used to make the logo of the snippet. We named it 'logo' and placed a logo image inside it. For the rest of the li element, we have added a unique font-awesome icon and the related nav items. For creating the primary content on the right side of the side nav, we have taken another div named 'wrapper' and placed a header h2 tag there. The primary font family of the snippet is Montserrat but you can take any font of your choice from google fonts. First, We have eliminated the default margin and padding of the snippet. Then we set a background color for the body element. To make the navbar fixed to the right side of the project, we have given the ul element a fixed position value. We also gave it a width of 260px, a height of 100%, and a top-left value. For creating the hover animation, we have taken the pseudo-class of the 'a' element and gave it position absolute value. Apart from that, we set the width of the element to zero but, for the hover state, we set the width to 95%.
Simple Sidebar Menu using HTML and CSS [ Source Code ]:
For this project, you have to create two files. One is HTML with .html extension and the other is CSS with .css extension. Link the external CSS file in the HTML file. After that, go to the code box below and copy the codes. Paste the codes to the related files and save them.
ADD HTML
ADD CSS:
I hope you have completed the project. If you like this, then consider subscribing to our YouTube channel. Please press the bell notification icon for future video notifications. Share the articles of this blog to your social media profiles. Then It will reach the people who are interested in front-end development. Thank you very much for your visit to this blog.
Post a Comment
Please Do not Enter any spam link in the comment box