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> 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; } 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; } The final menu result(WIP):
Hope you enjoy this one and please feel free to add suggestions and constructive criticism
Top comments (1)
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.