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: