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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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 check if a link has http or https in it in JavaScript?JavaScriptIntroduction to Angular modules Part 2: NgModules and componentsAngularHow to undo Git Commits on Pantheon?MiscellaneousCheck if any column has NULL values in PostgresPostgresHow to host Google fonts on your server and add them using CSS?CSSWhat’s new in Constructor in PHP 8?PHPHow to create a simple slider with CSS and jQuery?CSSHow to use $IF operator in Envision Basic?Envision BasicIs there a way to do a FULL OUTER JOIN in MySQL?SQL/MySQLSolution to pod install fails with json error on Mac OS X 10.15 (or Mac OS Catalina)MiscellaneousLearn how to use Self JOIN in SQL and MySQLSQL/MySQLHow to add onclick event to html elements dynamically using JavaScript?JavaScript