Yogesh Chauhan's Blog

How to create a sidebar using pure CSS?

in CSS on April 2, 2021

Sidebar can be easily created using a script or script framework but it can be created using pure CSS as well.

I am going to use the same concept as switching themes using pure CSS. We’re going to have a hidden checkbox input HTML element and then based on the :checked selector we can add add or remove the style.

Let’s dive in and add the input element and keep it hidden. Also, let’s add the main section that will have all the contents and a button inside to toggle the sidebar.

Now, let’s add the sidebar content and keep it outside of the main section area by positioning it fixed. We’ll keep the style a bit different for the sidebar close button.

Finally, add the style for the :checked selector.

How to move that sidebar to bottom?

Just change the position of the sidebar like this:

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to control file extensions with an .htaccess file?MiscellaneousHow to change value of a span tag using a reference from another div using jQuery?jQueryMySQL queries to get data rows from previous month as well as from last 30 daysSQL/MySQLWordPress Plugin: Things to knowWordPressSQL Left JoinSQL/MySQLJavaScript: Methods for HTML DOM classList PropertyJavaScriptGlobal JavaScript methods to convert variables to numbersJavaScriptasync function in JavaScriptJavaScriptHow to draw an SVG path on scroll using JavaScript?JavaScriptHow different is Handling Events in React vs HTML DOM?ReactGap in Flex?CSSWhy does MOV matter in IT or any kind of projects?Miscellaneous