Back

Fullscreen menu with hover animation

Tutorial on how to create a fullscreen menu using only CSS.

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>

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);
        }

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;
        }

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);
        }

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;
        }

And that is it.

Video tutorial

You can find the video with step-by-step guide on youtube:

Whole code

<div class="container">
  <ul class="menu">
    <li class="menu-item">HOME</li>
    <li class="menu-item">WELCOME</li>
  </ul>
</div>

<style>
.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);
}

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

.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);
}

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

</style>

Thank you for reading this article.

Fullscreen menu with hover animation

HTML

CSS

Video tutorial

Whole code

More menus

Similar

See also