How to create a sidebar using pure CSS?

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 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

How to add onclick event to html elements dynamically using JavaScript?JavaScriptHow to Access a Global Variable From Inside a Function in PHP?PHPHow to import a CSS file using PHP code and not HTML code?PHPHow to remove border from :visited image, link or button?CSSDROP DATABASE (remove a database) from PostgresPostgresPHP Variables ScopePHPHow to create ‘share on LinkedIn’ link using just HTML?HTMLThe order Property in Flex Items in CSSCSSHow to remove special characters (dash, asterisk etc) from any string in PHP?PHPHow to apply style to a specific child element using CSS?CSSWordPress: How to display slider repeater fields in ACF?WordPressDebugging in WordPress Part 3: SCRIPT_DEBUG and SAVEQUERIESWordPress