Slim sidebar menu with hover effect

Hello #devs,

I started working o a side small Ui Kit that looks nice and is easy to use.

Disclaimer: The main purpose of this kit is to be used on the admin dashboards where the users already know to use a dashboard so no more hate comments like "this design is not in trend anymore" or smth like that you haters! :))

I'm not going to explain the whole project as it's still in progress, today I only want to share the menu creation.

First some HTML skeleton:

<aside>
  <ul>
    <li class="menu">Ui kit</li>
    <li>
      <i class="fa fa-user-o" aria-hidden="true"></i>
    </li>
    <li>
      <i class="fa fa-laptop" aria-hidden="true"></i>
    </li>
    <li>
      <i class="fa fa-clone" aria-hidden="true"></i>
    </li>
    <li>
      <i class="fa fa-star-o" aria-hidden="true"></i>
    </li>
    <li>
      <i class="fa fa-trash-o" aria-hidden="true"></i>
    </li>
  </ul>
</aside>

And now the styling. First some general CSS for the body to remove margins and use a custom font:

body {
  display: flex;
  font-family: 'Roboto';
  margin: 0;
}

Let's begin to style the menu. I will create a ul fixed and to create the overlapping effect with the main section, I will make it a bit wider and then add the section on top of it:

ul {
  position: fixed;
  min-height: 100vh;
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: #fff;
  text-align: center;
  width: 80px;
  background-image: linear-gradient(-130deg , #63bbac, #aad963);
  padding-right: 40px;
  z-index: 0;
}

ul .menu {
  padding: 30px 0;
}

aside ul li {
  padding: 20px 0;
  cursor: pointer;
}


aside ul li:not(.menu):hover {
  background-image: linear-gradient(-130deg , #eee, #fff);
  color: #63bbac;
}

section.main {
  z-index: 1;
  width: 70%;
  padding: 30px;
  background: #eee;
  margin-left: 80px;
  border-radius: 30px;
}

The final menu result(WIP):

Hope you enjoy this one and please feel free to add suggestions and constructive criticism

Comments

[Dave]

Thank you for posting this. I'm a CSS noob. Not coding CSS, but the "prettiness" as I call it. I'm terrible at what looks good. Your work will give me a jump start on helping that improve.