Responsive Sidebar Menu with Social Media Buttons Using HTML and CSS
Having an active sidebar menu using social media icon will help in enhancing the navigation of the sections in a website while having buttons to social media accounts.
Here in this article, I will help you how you can create a responsive sidebar menu with proper icons and nice animation.
For your convenience, you will receive the complete source codes to implement this feature on your website without any legal limitations.
This sidebar menu can be applied to any web application, and it will provide you with tidy structure and easily navigable interface. It supports all device resolutions, and users may not necessarily be limited to using the website only on their big screen.
Now, this is the time for you to get to know more about the features and certain steps in order to create this Responsive Sidebar Menu with Social Media Buttons Using HTML, CSS.
Let’s get in!
GitHub Source: Responsive Sidebar Menu with Social Media Buttons
Features
Here are some great features you’ll find in this responsive sidebar menu:
- Easy to Customize: The sidebar menu is easy to customize and enables you to change color, icons and style with a lot of ease.
- Icons Used: Comes with beautiful icons for the menu items, and for the social media platforms as well to boost aesthetics.
- Animation Effect: It comes with smooth animation, for example, slide-in effects when opening or closing the sidebar.
- Compatibility: Designed and developed for use on any device, to enhance usability on desktops, tablets, and phones.
- Clean Code: Your code is well structured and commented which means you can follow it easily to meet your requirements.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
Recommended for You
- Responsive Sidebar Menu With Dark and Light Mode
- Modern Sidebar Menu
- Dropdown Sidebar Menu
- Responsive Side Navigation Bar With Tooltips
- Simple Responsive Navigation Menu Bar
- Responsive Drop Down Menu Bar with Sub Menu
Video Tutorial
Steps to Build Sidebar Menu
- Create Project Folder: The initial step should be to open a new folder on their computers to contain all files related to project.
- Create index.html: Folder project created, open it and add an index.html file so that you can add the rest of the HTML elements as shown below.
- Create style.css: Must create style.css on the same folder to style the sidebar menu.
- Copy & Paste the Code: To speed up the configuration, you need to use the code provided below, but you can modify any of it.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html> <!-- Created By JV Codes - www.jvcodes.com --> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Sidebar Menu with Social Media Buttons | JV Codes</title> <!-- Link to external CSS file for styling --> <link rel="stylesheet" href="style.css"> <!-- Link to Font Awesome icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"> </head> <body> <!-- Wrapper for sidebar and content --> <div class="wrapper"> <!-- Checkbox used to toggle the menu --> <input type="checkbox" id="btn" hidden> <!-- Menu button to open/close sidebar --> <label for="btn" class="menu-btn"> <i class="fas fa-bars"></i> <!-- Menu icon (hamburger) --> <i class="fas fa-times"></i> <!-- Close icon --> </label> <!-- Sidebar navigation --> <nav id="sidebar"> <div class="title">Side Menu</div> <ul class="list-items"> <!-- Navigation links with icons --> <li><a href="#"><i class="fas fa-home"></i>Home</a></li> <li><a href="#"><i class="fas fa-sliders-h"></i>Clients</a></li> <li><a href="#"><i class="fas fa-address-book"></i>Services</a></li> <li><a href="#"><i class="fas fa-cog"></i>Settings</a></li> <li><a href="#"><i class="fas fa-stream"></i>Features</a></li> <li><a href="#"><i class="fas fa-user"></i>About us</a></li> <li><a href="#"><i class="fas fa-globe-asia"></i>Languages</a></li> <li><a href="#"><i class="fas fa-envelope"></i>Contact us</a></li> <!-- Social media icons --> <div class="icons"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-github"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> </ul> </nav> </div> <!-- Main content area outside the sidebar --> <div class="content"> <div class="header">Sidebar Menu with Social Media Buttons | HTML and CSS</div> </div> </body> </html>
CSS
Here is the complete code for style.css file to style the sidebar menu:
/* Import Google Font 'Poppins' */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); /* Reset margins and paddings, set default font */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } /* Wrapper for sidebar and button */ .wrapper { height: 100%; width: 300px; position: relative; } /* Style for the menu button */ .wrapper .menu-btn { position: absolute; left: 20px; top: 10px; background: #0066cc; /* New blue color */ color: #ffffff; height: 45px; width: 45px; z-index: 9999; border: 1px solid #004c99; /* Darker shade of blue for border */ border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } /* Move menu button right when sidebar is open */ #btn:checked ~ .menu-btn { left: 247px; } /* Icon in the menu button */ .wrapper .menu-btn i { position: absolute; font-size: 23px; transition: all 0.3s ease; } /* Hide close icon by default */ .wrapper .menu-btn i.fa-times { opacity: 0; } /* Show close icon when sidebar is open */ #btn:checked ~ .menu-btn i.fa-times { opacity: 1; transform: rotate(-180deg); } /* Hide menu icon when sidebar is open */ #btn:checked ~ .menu-btn i.fa-bars { opacity: 0; transform: rotate(180deg); } /* Sidebar styling */ #sidebar { position: fixed; background: #004c99; /* New dark blue */ height: 100%; width: 270px; overflow: hidden; left: -270px; transition: all 0.3s ease; } /* Show sidebar when checkbox is checked */ #btn:checked ~ #sidebar { left: 0; } /* Sidebar title styling */ #sidebar .title { line-height: 65px; text-align: center; background: #003366; /* Darker shade */ font-size: 25px; font-weight: 600; color: #e6f2ff; /* Light blue */ border-bottom: 1px solid #002244; } /* Sidebar list container */ #sidebar .list-items { position: relative; background: #0059b3; /* Medium blue */ width: 100%; height: 100%; list-style: none; } /* Sidebar list item styling */ #sidebar .list-items li { padding-left: 40px; line-height: 50px; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid #003366; transition: all 0.3s ease; } /* Hover effect for list items */ #sidebar .list-items li:hover { border-top: 1px solid transparent; border-bottom: 1px solid transparent; box-shadow: 0 0px 10px 3px #002244; } /* Remove border from first list item */ #sidebar .list-items li:first-child { border-top: none; } /* Sidebar link styling */ #sidebar .list-items li a { color: #e6f2ff; /* Light blue text */ text-decoration: none; font-size: 18px; font-weight: 500; height: 100%; width: 100%; display: block; } /* Icon margin in links */ #sidebar .list-items li a i { margin-right: 20px; } /* Social media icons container */ #sidebar .list-items .icons { width: 100%; height: 40px; text-align: center; position: absolute; bottom: 100px; line-height: 40px; display: flex; align-items: center; justify-content: center; } /* Style for individual social icons */ #sidebar .list-items .icons a { height: 100%; width: 40px; display: block; margin: 0 5px; font-size: 18px; color: #ffffff; background: #0073e6; /* Bright blue */ border-radius: 5px; border: 1px solid #0059b3; /* Slightly darker border */ transition: all 0.3s ease; } /* Hover effect for social icons */ #sidebar .list-items .icons a:hover { background: #0059b3; } /* Remove left margin from first social icon */ .list-items .icons a:first-child { margin-left: 0px; } /* Content styling outside sidebar */ .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #002244; z-index: -1; width: 100%; text-align: center; } /* Content header styling */ .content .header { font-size: 45px; font-weight: 700; } /* Paragraph styling in content */ .content p { font-size: 40px; font-weight: 700; }
Download Source Code
Free source code for this Responsive Sidebar Menu with Social Media Buttons Using HTML, CSS is available without any form of copyright. To use the code and to implement it on your website, click the button below.
Conclusion
This simple and responsive sidebar menu with social media buttons can be an updated feature for your site, making it more functional and looking better. You are allowed to use this code and remember to mention JV Source Codes with a link back.
If for some reason it does not work, please feel free to leave a comment below and I will assist.