Modern Sidebar Menu css

Modern Sidebar Menu With Animation Using Only HTML and CSS

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.

50+ HTML, CSS & JavaScript Projects With Source Code

Live Preview Of Sidebar Menu:-

Code byFlorinCornea
Project DownloadLink Available below
Language usedHTML and CSS
External link / DependenciesNo
ResponsiveYes

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>

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

Restaurant Website Using HTML and CSS

Html Code Output:-

Modern Sidebar Menu With Animation Using Only HTML and CSS

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;
}

100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

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

Final Output Of Modern Sidebar Menu Using Only CSS

Modern Sidebar Menu With Animation Using Only HTML and 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

 

Which code editor do you use for this Modern Sidebar Menu coding?

I personally recommend using VS Code Studio, it’s very simple and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

No


Leave a Reply