One of the best ways to handle navigation on small screens is to use sidenavs. When it comes to creating that nav, the best was is not the JavaScript all the time. Then what is the best formula to have fancy sidenav actions? Here comes the recipe; Ingredients: A checkbox to imitate the click event, A label to associate the checkbox, A sidenav, Some content - Optional, A pinch of CSS with . animation Preparation: 1- Create a checkbox in your HTML file with an "id", in our case we give it the id "toggler". < = = /> input type "checkbox" id "toggler" 2- Then create a to associate the checkbox by using the "for" attribute. The "for" will be "toggler" to connect the label with the checkbox. label < = = > label for "toggler" class "toggle-label" < = > i class "fas fa-chevron-circle-down" </ > i </ > label Now our button is ready to trigger the sidenav actions. In our example, I will put the label inside my sidenav to create a fancy button with the help of CSS animation. Also, I used a arrow for the label icon. font-awesome 3- Create a sidenav however you want. I added some links to create a sidenav. As I mentioned before I placed the label inside my nav. Twitter Instagran Github Linkedin Mql5 Mail -By Safa ERDEN < > nav < = = > label for "toggler" class "toggle-label" < = > i class "fas fa-chevron-circle-down" </ > i </ > label < > ul < > li < = > a href "https://twitter.com/safaerden" </ > a </ > li < > li < = > a href "https://www.instagram.com/safaerden" </ > a </ > li < > li < = > a href "https://github.com/SafaErden" </ > a </ > li < > li < = > a href "https://www.linkedin.com/in/safaerden/" </ > a </ > li < > li < = > a href "https://www.mql5.com/en/users/safaerden" </ > a </ > li < > li < = > a href "mailto:safaerden@gmail.com " </ > a </ > li < > li < = > a href "#" </ > a </ > li </ > ul </ > nav 4- Optionally you can add some content to your HTML file. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." < > main < > p </ > p </ > main Now we created our content but it is not functional right now. It is not even a good looking content without CSS. So let's begin to add some flavor to our content. 1- First of all we should hide the checkbox. We don't need to see it. We just need its pseudo-class selector ". ":checked { : absolute; : none; } #toggler position display 2- Time to style the label which will be used as the checkbox. I gave my label "toggle-label" class. I position it to the top-left of my sidenav with "position: absolute" attribute. When my nav is not shown, I want my label is to be positioned outside of my nav, pointing left to indicate the sliding direction. When my nav is shown, I want my label to be positioned inside of my nav pointing right to indicate the sliding direction. I use the "transform" attribute to rotate the arrow. I use the "left" attribute to put the label inside and outside of the sidenav each time user click on it. I also change its color to make it look better between position changes. To make all these changes I use ":checked" pseudo-class. It enables me to trigger the animations. With "transition" property I set the duration for each animation. { : absolute; : - ; : ; : (90deg); : transform, left, color; } ~ { : (270deg); : ; : ; } .toggle-label position left 55px top 5px transform rotate transition 1s 1s 1s #toggler :checked nav .toggle-label transform rotate left 5px color #2c3e50 3- Once you finished the label styling, you can begin styling the sidenav including animations rules. My nav has 500px width and it is pushed 500px right outside of my body to hide it when I do not need it. When I need to reveal my sidenav, I should move it back inside my body. So I update it's "right" attribute to "0" to show it inside my body. For the "right" value transform, I set the transition duration 1 second. Also for the body, "overflow-x" property should be hidden to avoid horizontal scrollbar. { : fixed; : (256, 256, 256, 0.9); : ; : ; : ; : - ; : ; : right ; : ; } ~ { : ; } nav position background-color rgba height 100vh width 500px max-width 100% right 500px top 0 transition 1s padding 50px #toggler :checked nav right 0 4- Additionally you can style your main content to make it have a better look. { : ; : white; : ; : ; : hidden; } { : ; : ; : auto; } { : none; : ; : ; } { : none; : ; } body background-color #2c3e50 color font-size 50px font-weight 900 overflow-x p font-size 30px width 75% margin 20px nav ul list-style-type margin-top 100px color #2c3e50 nav ul li a text-decoration color #2c3e50 Now your CSS-only, JavaScript-free sidenav is ready to serve, Have a good appetite :) To reach the source visit . For live demo check . the repo this link
![featured image - Creating An Animated SideNav without JavaScript [A How To Guide]](https://hackernoon.imgix.net/images/im3a321m.gif?auto=format&fit=max&w=1920)
