Learn how to create an engaging YouTube sidebar using HTML, CSS, and JavaScript. Enhance your website with this interactive feature.
Table of Contents
Welcome to our comprehensive guide on creating a YouTube sidebar for your website using HTML, CSS, and JavaScript. In this digital age, where user engagement is paramount, integrating your YouTube channel content into your website can be a game-changer. By following the steps and tips outlined in this blog post, you'll learn how to enhance your website's appeal and interactivity.
So, whether you're a web developer looking to add a dynamic feature to your site or a business owner seeking to engage your audience effectively, this guide is for you. Let's dive into the world of YouTube sidebar creation and unlock its potential for your online presence.
Prerequisites for Implementation
Before you begin, ensure you have a basic understanding of HTML, CSS, and JavaScript. Having some knowledge of web development will make this process smoother.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our sidebar.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let me explain each part of the code:
1. <!DOCTYPE html>: This is the document type declaration, specifying that the document follows the HTML5 standard.
2. <html lang="en">: This is the opening tag of the HTML document. It indicates that the document is written in English (language code "en").
3. <head>: This section contains metadata about the web page, such as character encoding, the title of the page, and links to external resources.
- <meta charset="UTF-8">: Specifies that the character encoding used for the document is UTF-8, which supports a wide range of characters and symbols.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag is often used for responsive design. It sets the initial scale to 1.0 and adapts the page's width to the device's width.
- <title>Youtube Sidebar</title>: Sets the title of the web page, which is typically displayed in the browser's title bar or tab.
- <link rel="stylesheet" href="styles.css">: This line links an external CSS file named "styles.css" to style the web page. It's used to define the visual layout and appearance of the page.
4. <body>: This is the main content of the web page. It contains the visible elements of the page.
5. <aside class="sidebar">: Defines a sidebar section with the class "sidebar." This is typically used for additional content or navigation menus.
- Inside the sidebar, there is a button with a menu icon.
- <div class="sidebar-items">: Contains a list of items, each consisting of an image and a text label. These items appear to represent navigation links for a website's sections, such as "Home," "Shorts," "Subscriptions," and "Library."
6. <div id="menu">: Defines another section with the ID "menu." It appears to represent a navigation menu.
- Inside the menu section, there is a header with a menu icon and a YouTube logo.
- There are two menu groups, each containing menu items with images and text labels. These items represent different sections or categories of the website.
7. <section>: This section represents the main content of the page.
- Inside the section, there is a <nav> element containing a link with a YouTube logo and a text element saying "NavBar."
- The <main> element contains the main content of the page, which includes an <h1> heading with the text "Feed."
8. <script src="script.js" defer></script>: This line includes an external JavaScript file named "script.js" with the "defer" attribute. The "defer" attribute indicates that the script will be executed after the HTML content has been parsed.
This is the basic structure of our sidebar using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the sidebar is in place, the next step is to add styling to the sidebar using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our sidebar.
Let's break down and explain each part of the code:
1. @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap");
- This line imports a font from Google Fonts. It imports the "Roboto" font with various font weights (100, 300, 400, and 500) and specifies that it should be used with the "swap" font-display option. This line allows you to use the "Roboto" font on your webpage.
2. *, *::before, *::after
- This is a universal selector that targets all elements, and their pseudo-elements (::before and ::after), and applies the following styles to them:
- margin: 0; removes any default margin for all elements.
- padding: 0; removes any default padding for all elements.
- box-sizing: border-box; sets the box-sizing property to "border-box," which means that an element's padding and border are included in its total width and height.
3. body
- This selector targets the <body> element and applies the following styles:
- font-family: "Roboto", sans-serif; sets the font family to "Roboto," and if "Roboto" is not available, it falls back to a generic sans-serif font.
- background-color: #0f0f0f; sets the background color of the page to a dark grayish color.
- height: 100vh; sets the height of the <body> to 100% of the viewport height.
- color: white; sets the text color to white.
- display: flex; sets the display property to "flex," allowing for flexible layout.
- overflow: hidden; hides any content that overflows the viewport.
4. .sidebar
- This selector targets elements with the class "sidebar" and applies the following styles:
- width: 80px; sets the width of the sidebar to 80 pixels.
- height: 100%; sets the height to 100% of the viewport height.
- padding: 16px 0; adds padding to the top and bottom of the sidebar.
- display: flex; makes the sidebar a flex container.
- flex-direction: column; arranges the children in a column layout.
- align-items: center; centers the children vertically.
- gap: 16px; adds a gap (space) between the children elements.
5. .menu-btn and .menu-btn:hover
- These selectors target elements with the class "menu-btn" and apply styles for both normal and hover states:
- display: flex; makes the menu button a flex container.
- justify-content: center; centers its content horizontally.
- align-items: center; centers its content vertically.
- padding: 8px; adds padding around the button.
- cursor: pointer; changes the cursor to a pointer on hover.
- border-radius: 50%; gives the button a circular shape.
- On hover, the background color changes to a darker shade.
6. .sidebar-items, .item, and .item:hover
- These selectors define styles for the sidebar items and their hover state.
- .sidebar-items is a flex container for sidebar items.
- .item represents individual items in the sidebar.
- .item:hover defines the hover state of these items.
- Styles include flex layout, padding, cursor, and background color changes on hover.
7. #menu and #menu.visible
- These selectors target an element with the ID "menu" and add styles for showing and hiding a menu.
- #menu sets the initial properties of the menu, such as width, position, background color, and transformation (it's initially off-screen).
- #menu.visible sets styles for when the menu is visible, translating it onto the screen.
8. .menu-header, .menu-group, .menu-item, and .menu-item:hover
- These selectors define styles for the menu header, menu groups, and individual menu items.
- .menu-header styles the menu header with alignment and padding.
- .menu-group styles menu groups with padding and border.
- .menu-item styles individual menu items with font size, alignment, and padding.
- .menu-item:hover defines the hover state of menu items.
9. section, nav, main, and main h1
- These selectors define styles for different structural elements in the webpage.
- section takes up the full width and height.
- nav styles a navigation bar with specific dimensions and alignment.
- main centers content both horizontally and vertically.
- main h1 styles the main heading with a specific font size.
This will give our sidebar an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap");
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
background-color: #0f0f0f;
height: 100vh;
color: white;
display: flex;
overflow: hidden;
}
.sidebar {
width: 80px;
height: 100%;
padding: 16px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.menu-btn {
display: flex;
justify-content: center;
align-items: center;
padding: 8px;
cursor: pointer;
border-radius: 50%;
}
.menu-btn:hover {
background-color: #272727;
}
.sidebar-items {
display: flex;
flex-direction: column;
align-items: stretch;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 2px;
border-radius: 8px;
cursor: pointer;
}
.item:hover {
background-color: #272727;
}
.item img {
width: 24px;
height: 24px;
margin-bottom: 6px;
}
.item span {
font-size: 11px;
}
#menu {
width: 240px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: black;
padding: 16px 12px;
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform 0.5s ease;
z-index: 10;
}
#menu.visible {
transform: translateX(0);
}
.menu-header {
display: flex;
align-items: center;
padding-left: 6px;
gap: 24px;
margin-bottom: 20px;
}
.menu-group {
padding: 16px 0;
border-block: 1px solid #3f3f3f;
}
.menu-item {
font-size: 14px;
display: flex;
align-items: center;
padding: 10px 12px;
border-radius: 10px;
cursor: pointer;
}
.menu-item:hover {
background-color: #272727;
}
.menu-item img {
margin-right: 24px;
}
section {
width: 100%;
height: 100%;
}
nav {
width: 100%;
height: 72px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 16px;
}
main {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
main h1 {
font-size: 42px;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. Let me explain it step by step:
1. const menu = document.querySelector("#menu");: This line of code selects an HTML element with the id "menu" and assigns it to the variable menu. It is assumed that the HTML contains an element with the id "menu," which represents the menu that you want to control.
2. const menuBtns = document.querySelectorAll(".menu-btn");: Here, the code selects all the HTML elements with the class "menu-btn" and stores them in an array-like object called menuBtns. This assumes that there are multiple buttons with the class "menu-btn" that can be clicked to toggle the menu.
3. menuBtns.forEach((btn) => { ... });: This code uses the forEach method to iterate through each of the elements in the menuBtns array. For each button element (btn), an event listener is added to respond to a click event.
4. Inside the event listener, when a menu-btn element is clicked (btn.addEventListener("click", function () { ... })), it toggles the visibility of the menu by adding or removing the "visible" class from the menu element. This class is responsible for making the menu visible or hidden through CSS styles.
5. document.addEventListener("click", function (e) { ... });: This code adds a click event listener to the entire document. This listener is used to detect clicks anywhere on the page, not just within the menu or buttons.
6. Inside the document's click event listener, it checks whether the click event (e) did not occur within the menu element and also didn't occur within the first menuBtns element (menuBtns[0]). If both conditions are met, it removes the "visible" class from the menu element, effectively hiding the menu.
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
const menu = document.querySelector("#menu");
const menuBtns = document.querySelectorAll(".menu-btn");
menuBtns.forEach((btn) => {
btn.addEventListener("click", function () {
menu.classList.toggle("visible");
});
});
document.addEventListener("click", function (e) {
if (!menu.contains(e.target) && !menuBtns[0].contains(e.target)) {
menu.classList.remove("visible");
}
});Final Output:
Conclusion:
Congratulations, you've successfully created an engaging YouTube sidebar for your website using HTML, CSS, and JavaScript. This addition will keep your visitors hooked and enhance the overall user experience. Feel free to explore further customizations to make it uniquely yours.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
