DEV Community

Designyff
Designyff

Posted on • Originally published at designyff.com

Fullscreen menu with hover animation - A step-by-step guide

Fullscreen Menu

HTML

For HTML we need a container with a list of menu items.

<div class="container">
    <ul class="menu">
        <li class="menu-item">HOME</li>
        <li class="menu-item">WELCOME</li>
    </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

For CSS, first we'll style the container.

We'll position it absolute, hovering the whole screen by setting top, bottom, left and right properties to zero.

Then we'll position the list in center using flexbox and set the background color to purple.

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(167, 118, 221);
}
Enter fullscreen mode Exit fullscreen mode

Now we're styling the list.

Remove the paddings and list style type.

We'll also display menu items in columns.

.menu {
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

Now let's style manu items.

We'll set width, height and font size.

Now we'll displat text in center using flexbox and set transition so that hover effect (which we'll add later) is smooth.

Of course, we'll set cursor to pointer and a bit transparent text color.

.menu-item {
    height: 70px;
    width: 100vw;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s ease-in;
    cursor: pointer;
    color: rgba(0,0,0,.4);
}
Enter fullscreen mode Exit fullscreen mode

On hover, we'll increase font size and set color to white.

We'll add a little text shadow and increase font weight.

With transition, this change will be nice and smooth.

.menu-item:hover {
    font-size: 35px;
    transition: .3s ease-out;
    color: #fff;
    text-shadow: 0px 0px 50px rgb(161, 95, 232);
    font-weight: 600;
}
Enter fullscreen mode Exit fullscreen mode

And that is it.

You can get the full code and video tutorial here.

Thank you for reading. ❤️

Top comments (0)