Breaking News: Grepper is joining You.com. Read the official announcement!

responsive sidebar menu css

Lovely Leopard answered on February 24, 2022 Popularity 10/10 Helpfulness 2/10

answer responsive sidebar menu css

related responsive sidebar menu html css

responsive sidebar menu css

Comment

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

Popularity 10/10 Helpfulness 2/10 Language html

Source: front-end.codes

Tags: css html menu responsive sidebar

Link to this answer
Share Copy Link

Contributed on Feb 24 2022

Lovely Leopard

0 Answers Avg Quality 2/10

Closely Related Answers

responsive sidebar menu html css

Comment

<!DOCTYPE html>
<html>

<head>
    <style>
        /* Basic CSS for sidebar menu */
        .sidebar {
            width: 250px;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #f5f5f5;
            padding: 20px;
        }

        /* Media query for mobile and tablets */
        @media screen and (max-width: 768px) {
            .sidebar {
                width: 100%;
                position: static;
                height: auto;
            }
        }
    </style>
</head>

<body>
    <div class="sidebar">
        <!-- Sidebar Menu Items -->
        <ul>
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
            <li>Menu Item 4</li>
        </ul>
    </div>
</body>

</html>

Popularity 9/10 Helpfulness 2/10 Language html

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

responsive sidebar menu css

Contents

More Related Answers

responsive sidebar menu css

Closely Related Answers

responsive sidebar menu html css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.