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>
Now I want my sidebar to be 100vh and no margins:
body {
font-family: 'Roboto';
width: 100%;
height: 100vh;
margin: 0;
}
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;
}
The most difficult effect to achieve was the hover over the menu item:
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;
}
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.
Latest comments (19)
This is nice, i like it
what's modern about this? it's a cool CSS trick but looks kinda ugly.
Nice work! Thanks for sharing with the community <3
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!
This is really really cool.
Thanks!
Nice!
Thanks Drew, it was a mistake, the tag I was looking for was #ui.
Faină treabă Florine!
Un an nou cu multe realizări în Web development şi sănatate! La mulți ani!
Mersi fain Florin!, la fel iti doresc si eu, la multi ani!
Esta muy bueno jajaj parece un windows del futuro
Hermoso 😍 gracias
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
thanks!, and solved :D
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...
thanks!, and solved, both things :D
Cool!!
thanks for sharing
Some comments may only be visible to logged-in visitors. Sign in to view all comments.