Create a menu that spans the entire page using CSS

From time to time, we need to ask our visitors which page they want to go to by displaying the main sections of our website. This menu is not often very pleasant to use, so let's discover together in this article how to make it much more modern with beautiful animations that will make your visitors want to explore your site!

Step 1

Let's start with the HTML code.

<ul>
    <li><a href="#" data-text="Home">Home</a></li>
    <li><a href="#" data-text="About">About</a></li>
    <li><a href="#" data-text="Services">Services</a></li>
    <li><a href="#" data-text="Contact">Contact</a></li>
</ul>

Nothing very complicated here: we just need a bullet list.

Note that we are using a data-text attribute; it's original but you will quickly understand why!

Step 2

Let's style the body tag.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #111;
    height: 100vh;
}

Here, we center our menu in the middle of the page: vertically and horizontally, thanks to Flexbox.

Step 3

Now let's style our bullet list to make it more appealing.

ul {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    list-style-type: none;
}

Here, we center our menu in the middle of the page: vertically and horizontally, thanks to Flexbox.

Step 4

Let's work on the links.

a {
    text-transform: uppercase;
    font-size: 3em;
    color: white;
    text-decoration: none;
    font-family: sans-serif;
    display: inline-block;
    margin: 25px 0;
}

Step 5

Now let's create the ::before element.

a::before {
    content: attr(data-text);
    text-align: center;
    line-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: scale(0);
    font-size: 10rem;
    transition: all 0.3s;
}

In the previous step, we created the background that is displayed when we select a link from our menu.

When we use the content property, we write this time attr(data-text).

This value allows us to retrieve the text entered inside the data-text attribute of the <a> tag automatically.

Step 6

Let's detect the link hover.

li:hover a::before{
    transform: scale(1);
}

li:nth-child(1) a::before{
    background-color: #da4747;
}

li:nth-child(2) a::before{
    background-color: #303960;
}

li:nth-child(3) a::before{
    background-color: #dd7631;
}

li:nth-child(4) a::before{
    background-color: #95389e;
}

The nth-child selector is a pseudo-class denoted by the syntax :nth-child(n) which allows you to target each element that is the n-th child of its parent.