You are currently viewing Modern Sidebar Menu Using Html Css | Sidebar Hover Animation

Modern Sidebar Menu Using Html Css | Sidebar Hover Animation

Modern Sidebar Menu Using Html Css | Sidebar Hover Animation

Welcome to Code With Random blog. We learn how to create a Modern Sidebar Menu. We use HTML & CSS for Modern Sidebar Menu. Hope you enjoy our blog so let’s start with a basic HTML structure for the Modern Sidebar Menu.

Html Code 

Table of Contents

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Modern Sidebar Menu</title>
    <link rel="stylesheet" href="style.css">
</head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<body>
    <aside>
        <p> Menu </p>
        <a href="javascript:void(0)">
          <i class="fa fa-user-o" aria-hidden="true"></i>
          My drive
        </a>
        <a href="javascript:void(0)">
          <i class="fa fa-laptop" aria-hidden="true"></i>
          Computers
        </a>
        <a href="javascript:void(0)">
          <i class="fa fa-clone" aria-hidden="true"></i>
          Shared with me
        </a>
        <a href="javascript:void(0)">
          <i class="fa fa-star-o" aria-hidden="true"></i>
          Starred
        </a>
        <a href="javascript:void(0)">
          <i class="fa fa-trash-o" aria-hidden="true"></i>
          Trash
        </a>
      </aside>
      
      <div class="social">
        <a href="https://www.instagram.com/codewith_random/" target="_blank">
          <i class="fa fa-instagram"></i>
        </a>
      </div>
</body>

</html>

There is all HTML code for the Modern Sidebar Menu. Now, you can see output without CSS, then we write CSS for the Modern Sidebar Menu.

Output

Modern Sidebar Menu html

CSS Code

aside {
  color: #fff;
  width: 250px;
  padding-left: 20px;
  height: 100vh;
  background-image: linear-gradient(30deg, #0048bd, #44a7fd);
  border-top-right-radius: 80px;
}

aside a {
  font-size: 12px;
  color: #fff;
  display: block;
  padding: 12px;
  padding-left: 30px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

aside a:hover {
  color: #3f5efb;
  background: #fff;
  outline: none;
  position: relative;
  background-color: #fff;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

aside a i {
  margin-right: 5px;
}

aside a:hover::after {
  content: "";
  position: absolute;
  background-color: transparent;
  bottom: 100%;
  right: 0;
  height: 35px;
  width: 35px;
  border-bottom-right-radius: 18px;
  box-shadow: 0 20px 0 0 #fff;
}

aside a:hover::before {
  content: "";
  position: absolute;
  background-color: transparent;
  top: 38px;
  right: 0;
  height: 35px;
  width: 35px;
  border-top-right-radius: 18px;
  box-shadow: 0 -20px 0 0 #fff;
}

aside p {
  margin: 0;
  padding: 40px 0;
}

body {
  font-family: "Roboto";
  width: 100%;
  height: 100vh;
  margin: 0;
}

.social {
  height: 0;
}

.social i:before {
  width: 14px;
  height: 14px;
  font-size: 14px;
  position: fixed;
  color: #fff;
  background: #0077b5;
  padding: 10px;
  border-radius: 50%;
  top: 5px;
  right: 5px;
}

We have completed our CSS section,  Here is our final updated output CSS.

Final Output

Modern Sidebar Menu css

We have completed our CSS section,  Here is our updated output with CSS. I hope you like the Modern Sidebar Menu, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

This post teaches us to create a Modern Sidebar Menu using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

code by – FlorinCornea

Check out more…..

1.Html And Css Projects With Source Code

2. Add To Cart Button Html

3. Notes App Using Html Css Javascript

Leave a Reply