DEV Community

loading...
Cover image for Slim sidebar menu with hover effect

Slim sidebar menu with hover effect

florincornea profile image Cornea Florin ・2 min read

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

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

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

The final menu result(WIP):

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

Discussion (1)

pic
Editor guide
Collapse
tardisgallifrey profile image
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.