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: