How to create a Fun Interactive Menu in CSS

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: