Sidebar using JavaScript

Explore the versatility of Sidebar implementation using HTML, CSS, and JavaScript, perfect for creating responsive and interactive navigation systems.

Preview
Code

<nav id='close_nav'>
 <div onclick="toggle_nav()">
   <div class="line"></div>
   <div class="line_1"></div>
   <div class="line_2"></div>
 </div>
 <h1><span>LO</span>GO</h1>
 <ul>
   <li>Discover</li>
   <li>New</li>
   <li class="active">Hot</li>
   <hr>
   <li>Porto</li>
   <li>About</li>
   <li>Contact</li>
   <li>Upload</li>
 </ul>
</nav>

nav {
	position: fixed;
	z-index: 1;
	top: 0px;
	left: 0px;
	bottom: 0px;
	width: 300px;
	overflow-x: hidden;
	overflow-y: scroll;
	background-color: #222;
	transition: 500ms all ease-in-out;
	box-shadow: 1px 0px 12px rgba(0,0,0,0.50);
}
/*logo  */
h1 {
	color: #fff;
	font-size: 40px;
	font-weight: 100;
	letter-spacing: 5px;
	position: absolute;
	margin-left: 100px;
	margin-top: 13px;
}

/*bold part of the logo */
h1 span {
	color: #dc3545;
	font-weight: 400;
}
/*nav toggle  */
nav div {
	z-index: 2;
	position: fixed;
	top: 8px;
	left: 8px;
	width: 60px;
	height: 60px;
	background: transparent;
	border-radius: 20px;
	transition: 500ms all ease-in-out;
}
nav div:hover {
	box-shadow: 0px 0px 0px rgba(0,0,0,0);
}

p {
	text-align: center;
	color: #fff;
}
hr {
	border-top: 0px solid grey;
	border-bottom: 1px solid grey;
}
div .line {
	position: relative;
	top: 10px;
	width: 30px;
	height: 2px;
	margin: 8px 6px;
	text-align: center;
	background: #dc3545;
	box-shadow: none;
}
div .line_1 {
	position: relative;
	top: 10px;
	width: 20px;
	height: 2px;
	margin: 8px 6px;
	text-align: center;
	background: #dc3545;
	box-shadow: none;
}
div .line_2 {
	position: relative;
	top: 10px;
	width: 15px;
	height: 2px;
	margin: 8px 6px;
	text-align: center;
	background: #dc3545;
	box-shadow: none;
}

nav ul {
	margin-top: 120px;	
	font-weight: lighter;
	margin-left: -45px;
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
  font-family: 'Comfortaa', cursive;
}

nav ul li {
	color: #fff;
	padding: 20px;
	list-style: none;
	text-decoration: none;
	font-weight: bold;
	transition: 300ms ease-in-out;
}

li:hover{
  background: white;
  color: deepskyblue;
  cursor: pointer;
}

.active {
	background: deepskyblue;
}

let navStatus = true;
function toggle_nav() {
 if (navStatus == true) {
 		document.getElementById('close_nav').style.left = '-300px';
 		navStatus = false;
 	}
 else if (navStatus == false) {
 		document.getElementById('close_nav').style.left = '0';
 		navStatus = true;
 	}
}

Discover how to implement a dynamic Sidebar navigation using a combination of HTML, CSS, and JavaScript, providing a robust solution for organizing and navigating through content on your website. Sidebars offer a convenient way to display navigation links, menus, or widgets, enhancing user experience and accessibility.

With HTML, CSS, and JavaScript, you can create fully customizable sidebar designs with responsive layouts and interactive features. Define the sidebar structure in HTML, style it with CSS to match your website's design language, and add functionality with JavaScript to enable dynamic behavior such as collapsible menus or animated transitions.

Implementing sidebars with HTML, CSS, and JavaScript allows for flexible customization and ensures compatibility across different browsers and devices. By leveraging JavaScript for interactivity, you can enhance the user experience by providing features such as expandable/collapsible sections, dropdown menus, or content filtering options within the sidebar.

Integrating sidebars into your website using HTML, CSS, and JavaScript is straightforward and well-documented, making it accessible to developers of all levels. Whether you're building a blog, e-commerce platform, or web application, sidebars provide a versatile solution for organizing and navigating through content efficiently.

Enhance navigation and user experience on your website by incorporating dynamic and interactive sidebars using HTML, CSS, and JavaScript. Provide users with intuitive navigation options and convenient access to content, improving engagement and usability across your website.

Steps to Copy the Code

Creating a customized Sidebar with HTML, CSS, and JavaScript is made simple with our comprehensive guide. Follow these steps to copy the code and personalize it to match your website's design:

Copy the Code: Start by copying the HTML, CSS, and JavaScript code for the Sidebar component from our guide or relevant documentation.
Paste into Your Project: Open your project files in a code editor and paste the copied HTML, CSS, and JavaScript code into the appropriate files. Paste the HTML code into your HTML file at the desired location where you want the Sidebar to appear. Paste the CSS code into your CSS file, and the JavaScript code into your JavaScript file.
After copying the HTML, CSS, and JavaScript code for the Sidebar component into your project files, ensure that you properly link the CSS and JavaScript files to your HTML file.

To link the CSS file, add the following line within the <head> section of your HTML file:
```
<link rel="stylesheet" href="styles.css">
```
Replace "styles.css" with the path to your CSS file containing the Sidebar styles.

To link the JavaScript file, add the following line at the bottom of your HTML file, just before the closing </body> tag:
```
<script src="script.js"></script>
```
Replace "script.js" with the path to your JavaScript file containing the Sidebar functionality.

This will apply the custom styles and functionality to the Sidebar component as defined in the CSS and JavaScript files.
Customize as Needed: HTML, CSS, and JavaScript provide flexibility for customizing the appearance and behavior of your Sidebar. Modify the code to match your design preferences, such as adjusting colors, sizes, and styles for the sidebar items and layout. You can also add or remove functionality as required.
Enhance with Interactivity (Optional): Consider adding additional interactivity to your Sidebar using JavaScript, such as implementing animations, dropdown menus, or collapsible sections.

By following these steps, you'll be able to effectively customize a Sidebar component using HTML, CSS, and JavaScript, allowing you to create a seamless and user-friendly navigation experience for your website visitors.

Code Explanation

HTML Code

<nav id='close_nav'>
  <div onclick="toggle_nav()">
    <div class="line"></div>
    <div class="line_1"></div>
    <div class="line_2"></div>
  </div>
  <h1><span>LO</span>GO</h1>
  <ul>
    <li>Discover</li>
    <li>New</li>
    <li class="active">Hot</li>
    <hr>
    <li>Porto</li>
    <li>About</li>
    <li>Contact</li>
    <li>Upload</li>
  </ul>
</nav>

<nav id='close_nav'>: This is a <nav> element with the id attribute set to 'close_nav'. The id attribute is used to uniquely identify the element in the document.
<div onclick="toggle_nav()">: This is a <div> element with an inline onclick event handler. When clicked, it triggers the JavaScript function toggle_nav(). This likely controls the opening and closing of a navigation menu.
- <div class="line"></div>: This is an empty <div> element with the class 'line'.
- <div class="line_1"></div>: This is an empty <div> element with the class 'line_1'.
- <div class="line_2"></div>: This is an empty <div> element with the class 'line_2'. These empty <div> elements are likely used as styling elements for creating a hamburger menu icon.
<h1><span>LO</span>GO</h1>: This is a <h1> (heading) element containing the text 'LOGO', where 'LO' is wrapped in a <span> element. This structure suggests that 'LO' may be styled differently from 'GO'.
<ql>: This is an unordered list element that contains navigation items.
- <li>Discover</li>: This is a list item representing a navigation link with the text 'Discover'.
- <li>New</li>: This is a list item representing a navigation link with the text 'New'.
- <li class="active">Hot</li>: This is a list item representing a navigation link with the text 'Hot' and the class 'active'. The 'active' class suggests that this item may be currently selected or highlighted.
- <hr>: This is a horizontal rule element, typically used to separate content. In this case, it may be used to visually separate different sections of the navigation menu.
- <li>Porto</li>: This is a list item representing a navigation link with the text 'Porto'.
- <li>About</li>: This is a list item representing a navigation link with the text 'About'.
- <li>Contact</li>: This is a list item representing a navigation link with the text 'Contact'.
- <li>Upload</li>: This is a list item representing a navigation link with the text 'Upload'.

CSS Code

nav {
	position: fixed;
	z-index: 1;
	top: 0px;
	left: 0px;
	bottom: 0px;
	width: 300px;
	overflow-x: hidden;
	overflow-y: scroll;
	background-color: #222;
	transition: 500ms all ease-in-out;
	box-shadow: 1px 0px 12px rgba(0,0,0,0.50);
}

nav: Selects all <nav> elements.

position: fixed;: Fixes the navigation bar at a specific position on the screen.
z-index: 1;: Sets the stacking order of the navigation bar, making it appear above other elements on the page.
top: 0px; left: 0px; bottom: 0px; width: 300px;: Positions the navigation bar at the top left corner of the viewport with a width of 300 pixels and stretches it to cover the entire height of the viewport.
overflow-x: hidden; overflow-y: scroll;: Hides horizontal overflow and allows vertical scrolling if the content exceeds the viewport height.
background-color: #222;: Sets the background color of the navigation bar to dark gray (#222).
transition: 500ms all ease-in-out;: Adds a smooth transition effect for all properties with a duration of 500 milliseconds and an ease-in-out timing function.
box-shadow: 1px 0px 12px rgba(0,0,0,0.50);: Applies a shadow effect to the right side of the navigation bar to create depth and dimension.

h1 {
	color: #fff;
	font-size: 40px;
	font-weight: 100;
	letter-spacing: 5px;
	position: absolute;
	margin-left: 100px;
	margin-top: 13px;
}

h1: Selects all <h1> elements.

color: #fff;: Sets the text color to white.
font-size: 40px;: Sets the font size to 40 pixels.
font-weight: 100;: Sets the font weight to 100 (light).
letter-spacing: 5px;: Adds letter spacing between characters.
position: absolute;: Positions the <h1> element absolutely within its containing element.
margin-left: 100px; margin-top: 13px;: Sets the margins from the left and top edges of the viewport.

h1 span {
	color: #dc3545;
	font-weight: 400;
}

h1 span: Selects <span> elements within <h1> elements.
color: #dc3545;: Sets the text color to a shade of red (#dc3545).
font-weight: 400;: Sets the font weight to 400 (normal).

nav div {
	z-index: 2;
	position: fixed;
	top: 8px;
	left: 8px;
	width: 60px;
	height: 60px;
	background: transparent;
	border-radius: 20px;
	transition: 500ms all ease-in-out;
}

nav div: Selects all <div> elements within the <nav> element.

z-index: 2;: Sets the stacking order of the <div> element, making it appear above other elements within the navigation bar.
position: fixed;: Fixes the position of the <div> element.
top: 8px; left: 8px;: Positions the <div> element 8 pixels from the top and left edges of the viewport.
width: 60px; height: 60px;: Sets the dimensions of the <div> element to 60 pixels by 60 pixels.
background: transparent;: Sets the background of the <div> element to transparent.
border-radius: 20px;: Rounds the corners of the <div> element to create a circular shape.
transition: 500ms all ease-in-out;: Adds a smooth transition effect for all properties with a duration of 500 milliseconds and an ease-in-out timing function.

nav div:hover {
	box-shadow: 0px 0px 0px rgba(0,0,0,0);
}

nav div:hover: Selects the <div> element within the navigation bar when hovered over with the mouse.

box-shadow: 0px 0px 0px rgba(0,0,0,0);: Removes any box shadow when the <div> element is hovered over.

p {
	text-align: center;
	color: #fff;
}

p: Selects all <p> elements.

text-align: center;: Aligns the text within <p> elements to the center.
color: #fff;: Sets the text color of <p> elements to white.

hr {
	border-top: 0px solid grey;
	border-bottom: 1px solid grey;
}

hr: Selects all <hr> elements.

border-top: 0px solid grey;: Sets the top border of the <hr> element to 0 pixels solid gray.
border-bottom: 1px solid grey;: Sets the bottom border of the <hr> element to 1 pixel solid gray.

div .line {
	position: relative;
	top: 10px;
	width: 30px;
	height: 2px;
	margin: 8px 6px;
	text-align: center;
	background: #dc3545;
	box-shadow: none;
}
div .line_1 {
	position: relative;
	top: 10px;
	width: 20px;
	height: 2px;
	margin: 8px 6px;
	text-align: center;
	background: #dc3545;
	box-shadow: none;
}
div .line_2 {
	position: relative;
	top: 10px;
	width: 15px;
	height: 2px;
	margin: 8px 6px;
	text-align: center;
	background: #dc3545;
	box-shadow: none;
}

div .line, div .line_1, div .line_2: Selects specific <div> elements with the classes 'line', 'line_1', and 'line_2' within other <div> elements.

Sets various styles such as position, dimensions, margin, text alignment, background color, and box shadow for these elements, likely used to create lines in the hamburger icon.

nav ul {
	margin-top: 120px;	
	font-weight: lighter;
	margin-left: -45px;
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
	font-family: 'Comfortaa', cursive;
}

nav ul: Selects all <ul> elements within the navigation bar.

margin-top: 120px;: Adds a top margin of 120 pixels to the <ul> element, likely to create space between the header and the list items.
font-weight: lighter;: Sets the font weight of the text within the <ul> element to lighter.
margin-left: -45px;: Adds a negative left margin of 45 pixels to the <ul> element, likely to adjust its position horizontally.
border-top: 1px solid grey;: Adds a 1-pixel solid grey border at the top of the <ul> element.
border-bottom: 1px solid grey;: Adds a 1-pixel solid grey border at the bottom of the <ul> element.
font-family: 'Comfortaa', cursive;: Sets the font family of the text within the <ul> element to 'Comfortaa', falling back to a generic cursive font if 'Comfortaa' is not available.

nav ul li {
	color: #fff;
	padding: 20px;
	list-style: none;
	text-decoration: none;
	font-weight: bold;
	transition: 300ms ease-in-out;
}

nav ul li: Selects all <li> elements within <ul> elements in the navigation bar.

color: #fff;: Sets the text color of the list items to white.
padding: 20px;: Adds 20 pixels of padding to all sides of the list items, creating space around the text.
list-style: none;: Removes the default bullet point style from the list items.
text-decoration: none;: Removes any text decoration from the list items, such as underlines.
font-weight: bold;: Sets the font weight of the text within the list items to bold.
transition: 300ms ease-in-out;: Adds a smooth transition effect for all properties with a duration of 300 milliseconds and an ease-in-out timing function to the list items.

li:hover {
  background: white;
  color: deepskyblue;
  cursor: pointer;
}

li:hover: Selects all list items when hovered over with the mouse.

background: white;: Changes the background color of the list items to white when hovered over.
color: deepskyblue;: Changes the text color of the list items to deep sky blue when hovered over.
cursor: pointer;: Changes the cursor to a pointer when hovering over the list items, indicating interactivity.

.active {
	background: deepskyblue;
}

.active: Selects elements with the class 'active'.

background: deepskyblue;: Sets the background color of elements with the 'active' class to deep sky blue. This likely highlights the currently active or selected item in the navigation menu.

JavaScript Code

let navStatus = true;
function toggle_nav() {
	if (navStatus == true) {
			document.getElementById('close_nav').style.left = '-300px';
			navStatus = false;
		}
	else if (navStatus == false) {
			document.getElementById('close_nav').style.left = '0';
			navStatus = true;
		}
}

Variable Declaration:

let navStatus = true;: Declares a variable called navStatus and initializes it to true. This variable keeps track of the current visibility status of the navigation menu.

Function Definition:

function toggle_nav() { ... }: Defines the toggle_nav() function, which handles the toggling of the navigation menu.

Toggle Logic:

The function checks the value of navStatus to determine whether the navigation menu is currently visible or hidden.
If navStatus is true, indicating that the navigation menu is currently visible:
- It sets the left style property of the element with the ID 'close_nav' to '-300px', effectively moving it off-screen to the left.
- It updates navStatus to false, indicating that the navigation menu is now hidden.
If navStatus is false, indicating that the navigation menu is currently hidden:
- It sets the left style property of the element with the ID 'close_nav' to '0', bringing it back into view.
- It updates navStatus to true, indicating that the navigation menu is now visible again.

Execution:

The function can be called from anywhere in the HTML document, typically in response to an event like a button click.
When invoked, it toggles the visibility of the navigation menu based on the current value of navStatus.