DEV Community

Codewithrandom Blogs
Codewithrandom Blogs

Posted on

Modern Sidebar Menu With Animation Using Only HTML and CSS

Hello Coder! Welcome to the Codewitrandom blog. We learn how to create a Modern Sidebar Menu Using Only Html and Css. this is the sidebar navigation menu with sliding Animation and we create it with pure Css Code.

I hope you enjoy our blog so let's start with a basic HTML structure for the Modern Sidebar Menu.

Html Code For Sidebar Menu:- 

<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>
Enter fullscreen mode Exit fullscreen mode

There is all the html code for the Modern Sidebar Menu. we add aside Html tag for creating all links on 1 side.

CSS Code For Sidebar Menu:- 

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;
}
Enter fullscreen mode Exit fullscreen mode

We have completed our CSS section,  Here is our final updated output HTML + 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

Written by - Code With Random/Anki

code by - FlorinCornea

Top comments (1)

Collapse
 
growkon21 profile image
Growkon •

This is such an insightful post! I really appreciate how you broke down the topic in a way that's easy to understand. Looking forward to implementing some of these tips in my daily routine!
Best International schools in Hyderabad