Learn with us how to create a Fun Interactive Menu in CSS!
If you found us on TikTok on the following post, check out this article and copy-paste the full code!
Happy coding! 😻
@creative.tim Try this interactive menu in CSS! Check out TikTok Tutorial #44! Link in bio 🤩 #webdev #techtok #webdevelopment #cssprojects #programmingexercises ♬ original sound - Creative Tim
1. HTML Code
<ul id="nav">
<li class="nav-link">
<h1 data-name="home">Home</h1>
</li>
<li class="nav-link">
<h1 data-name="About">About</h1>
</li>
<li class="nav-link">
<h1 data-name="services">services</h1>
</li>
<li class="nav-link">
<h1 data-name="contact">contact</h1>
</li>
</ul>
2. CSS Code
:root {
--bgcolor: #212227;
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--bgcolor);
color: white;
}
ul {
list-style: none;
}
h1 {
font-size: 5rem;
position: relative;
text-transform: uppercase;
transition: all 300ms ease;
width: fit-content;
cursor: pointer;
}
h1:hover {
transform: skew(10deg);
}
h1::before {
content: attr(data-name);
position: absolute;
top: 0;
left: -20px;
background: var(--bgcolor);
height: 3rem;
overflow: hidden;
transition: all 300ms ease;
padding-left: 20px;
}
h1:hover::before {
top: -3px;
left: 0px;
color: #ff5714;
}
h1::after {
content: "";
height: 4px;
width: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #ff5714;
transition: all 300ms ease;
}
h1:hover::after {
width: 120%;
outline: 5px solid rgb(2, 0, 36);
}
I hope you did find this tutorial useful!
For more web development or UI/UX design tutorials, follow us on:
Other useful resources:
