Design a Toggleable Sidebar using HTML CSS and JavaScript
In this article, we will create a toggleable sidebar navigation menu using HTML, CSS, and JavaScript. The navigation menu allows users to open and close a sidebar to access various sections of a website. When the user clicks on a navigation item, the corresponding content is displayed in the main content area. We’ll make the website responsive to different screen sizes for a seamless user experience.
Approach
- First, we will make nav items with the help of anchor tags.
- Now by using CSS properties like position fixed, left, and right properties, we will align the navbar to the sidebar.
- Design the navbar including headings, and paragraphs by using CSS properties.
- Change the content of the heading dynamically by using the showContent () function.
- Lastly, make a button for closing the navbar by using the function name closeNav().
Example: In this example, we write a code to build a toggleable sidebar using HTML CSS and JavaScript.
Javascript
function openNav() { document.getElementById( "sideMenu" ) .style.width = "300px" ; document.getElementById( "contentArea" ) .style.marginLeft = "300px" ; } function closeNav() { document.getElementById( "sideMenu" ) .style.width = "0" ; document.getElementById( "contentArea" ) .style.marginLeft = "0" ; } function showContent(content) { document.getElementById( "contentTitle" ) .textContent = content + " page" ; closeNav(); } |
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < link rel = "stylesheet" href = "style.css" /> < title > Toggleable Sidebar using HTML CSS & JavaScript </ title > </ head > < body > < div id = "sideMenu" class = "sideMenu" > < a href = "javascript:void(0)" class = "closeBtn" onclick = "closeNav()" >×</ a > < div class = "mainMenu" > < h2 >SideMenu</ h2 > < a href = "javascript:void(0)" onclick = "showContent('Home')" >Home</ a > < a href = "javascript:void(0)" onclick = "showContent('About')" >About</ a > < a href = "javascript:void(0)" onclick = "showContent('Portfolio')" >Portfolio</ a > < a href = "javascript:void(0)" onclick = "showContent('Services')" >Services</ a > < a href = "javascript:void(0)" onclick = "showContent('Contact')" >Contact</ a > </ div > </ div > < div id = "contentArea" > < span style = "font-size: 30px; cursor: pointer" onclick = "openNav()" >☰</ span > < div class = "contentText" > < h2 id = "contentTitle" > Toggle Sidebar Navigation</ h2 > < h3 >HTML CSS JS</ h3 > </ div > </ div > < script src = "script.js" ></ script > </ body > </ html > |
CSS
/* style.css */ body { margin : 0 ; font-family : poppins; } .sideMenu { height : 100% ; width : 0 ; position : fixed ; z-index : 1 ; top : 0 ; left : 0 ; background : #478cff ; overflow-x: hidden ; transition: 0.5 s; padding-top : 60px ; } .mainMenu h 2 { text-align : center ; letter-spacing : 7px ; color : #fff ; background : #111 ; padding : 20px 0 ; } .sideMenu a { padding : 8px 8px 8px 32px ; text-decoration : none ; color : #fff ; display : block ; transition: 0.3 s; font-size : 18px ; margin-bottom : 20px ; text-transform : uppercase ; font-weight : bold ; } .mainMenu a:hover { color : #fff ; background : #111 ; } .sideMenu .closeBtn { position : absolute ; top : 0 ; right : 25px ; font-size : 36px ; margin-left : 50px ; } #contentArea { transition: margin- left 0.5 s; padding : 16px ; } .contentText { padding : 100px 20px ; text-align : center ; } .contentText h 2 { background : #478cff ; display : inline- block ; padding : 15px 10px ; text-transform : uppercase ; font-size : 24px ; color : #fff ; } .contentText h 3 { text-transform : uppercase ; font-size : 18px ; margin : 0 ; letter-spacing : 3px ; } @media screen and ( min-width : 768px ) { .contentText { padding : 100px 180px ; } .contentText h 2 { padding : 15px 35px ; font-size : 50px ; } .contentText h 3 { font-size : 45px ; } } |
Output: