DEV Community

loading...
Cover image for Modern Sidebar Menu

Modern Sidebar Menu

florincornea profile image Cornea Florin Updated on ・2 min read

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.

Discussion (20)

pic
Editor guide
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 Author

thanks!, and solved, both things :D

Collapse
florincornea profile image
Cornea Florin Author

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
Collapse
ronaldomiranda profile image
ronaldomiranda

Cool!!
thanks for sharing

Collapse
arnabsen1729 profile image
Arnab Sen

Nice work! Thanks for sharing with the community <3

Collapse
nove1398 profile image
nove1398

This is nice, i like it

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 Author

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

Collapse
ikurosaki profile image
ikurosaki

Hermoso 😍 gracias

Collapse
vgerasimovich profile image
Vlad Gerasimovich

Looks cool, good job! Though, I think, the modern sidebar is no sidebar :P

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

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

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
Collapse
ats1999 profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
Rahul kumar

Checkout my page bdevg.com