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.
Top comments (19)
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
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
thanks!, and solved :D
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!
Nice!
This is nice, i like it
Nice work! Thanks for sharing with the community <3
Cool!!
thanks for sharing
Hermoso 😍 gracias
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!
what's modern about this? it's a cool CSS trick but looks kinda ugly.
This is really really cool.
Thanks!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.