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.