DEV Community 👩‍💻👨‍💻

Cover image for Modern Sidebar Menu
Cornea Florin
Cornea Florin

Posted on • Updated on

Modern Sidebar Menu

As a CSS enthusiast I'm always trying to replicate designs I see using CSS.

Today I wanted to create a sidebar menu.
I used codepen as always(God Bless Codepen).

At first I added the necessary HTML I knew I wanted on the page:


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

Enter fullscreen mode Exit fullscreen mode

Now I want my sidebar to be 100vh and no margins:

body {
  font-family: 'Roboto';
  width: 100%;
  height: 100vh;
  margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

For the nice visuals of the sidebar:

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

aside a:hover {
  color: #3f5efb;
  background: #fff;
  position: relative;
  background-color: #fff;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

aside a i {
  margin-right: 5px;
}
Enter fullscreen mode Exit fullscreen mode

The most difficult effect to achieve was the hover over the menu item:

Alt Text

For the left top and bottom hover design i added 2 pseudo elements like this:


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

There are some hardcoded values but if it works, it works! :))

Thank you for reading this article and I'm curios if you have another method to achieve the hover result.

Top comments (20)

Collapse
 
adithyarafk profile image
AdithyaR-afk

Awesome. Just want to highlight one thing because of my OCD , you may want to remove the rectangular div highlighting that happens when you clip an option

Collapse
 
dreitzner profile image
Domenik Reitzner

Looks really nice!
Guess I have the same ocd 😀.
Also the first element cuts into the top border radius and it looks a bit weird how it overlaps...

Collapse
 
florincornea profile image
Cornea Florin

thanks!, and solved, both things :D

Collapse
 
florincornea profile image
Cornea Florin

thanks!, and solved :D

Collapse
 
tinaeldvs profile image
Tinaël

Visually appealing! However, I'd like to point out two things about it:

1) Semantically considering the HTML, you should use title tags (hX) & list tags (ul/ol & li) for your menu list. It would give a better accessibility and understanding of your menu to people with less abilities & to bots or other softwares.

2) You should avoid using JavaScript href as it is firstly considered not clean & now obsolete.

Thank you for sharing, keep up the good work!

Collapse
 
jhelberg profile image
Joost Helberg

Nice!

Collapse
 
nove1398 profile image
nove1398

This is nice, i like it

Collapse
 
arnabsen1729 profile image
Arnab Sen

Nice work! Thanks for sharing with the community <3

Collapse
 
ronaldomiranda profile image
ronaldomiranda

Cool!!
thanks for sharing

Collapse
 
ikurosaki profile image
ikurosaki

Hermoso 😍 gracias

Collapse
 
florinfrasia profile image
Florin Ovidiu Frăsia

Faină treabă Florine!
Un an nou cu multe realizări în Web development şi sănatate! La mulți ani!

Collapse
 
florincornea profile image
Cornea Florin

Mersi fain Florin!, la fel iti doresc si eu, la multi ani!

Collapse
 
aalireza439 profile image
aalireza439

what's modern about this? it's a cool CSS trick but looks kinda ugly.

Collapse
 
utkarshdhiman48 profile image
Utkarsh Dhiman

This is really really cool.

Collapse
 
florincornea profile image
Cornea Florin

Thanks!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
florincornea profile image
Cornea Florin

Thanks Drew, it was a mistake, the tag I was looking for was #ui.

Collapse
 
infernus255 profile image
infernus255

Esta muy bueno jajaj parece un windows del futuro

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Hey 😍

Want to help the DEV Community feel more like a community?

Head over to the Welcome Thread and greet some new community members!

It only takes a minute of your time, and goes a long way!