Responsive Sidebar Menu with Social Media Buttons

Responsive Sidebar Menu with Social Media Buttons Using HTML and CSS

Byjvcodes

Having an active sidebar and 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

Video Tutorial

Video thumbnail Watch on YouTube

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.

Download Source Code

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.

Download JV Source Codes

Similar Posts

Navigation Bar with Dark and Light Mode
| | |

Navigation Bar with Dark and Light Mode in HTML, CSS and JavaScript

If you want to add a simple, but a modern and responsive menu bar on your website, the perfect solution is the Navigation Bar with Dark and Light Mode in HTML, CSS, JavaScript. Now, I’ll give you the free source code that has a beautiful navigation bar, has a built-in Dark and Light mode. Not…

Navigation Bar with Indicator
| | |

Navigation Bar with Indicator in HTML, CSS and JavaScript

Navigation bar with indicator is one of the user friendly ways of presenting menu options on the website that improves general appearance of the navigation. It includes a bar that changes its position when a user navigates to various parts of the website by clicking on the corresponding menu item. In this tutorial, I am…

Dropdown Sidebar Menu
| | |

Dropdown Sidebar Menu in HTML, CSS and JavaScript

A dropdown sidebar menu is a wonderful and elegantly looking implementation that facilitates comfortable navigation through several sections using a single menu. Dropdowns allow the user to click on a menu item and opt to see more links beyond the main areas without complicating its appearance. Today, I’ve written and shared the full length source…

Leave a Reply

Your email address will not be published. Required fields are marked *