Hello, welcome. In today's blog, we'll see how to make awesome fully working tile navigation system for your website.

Tile navigation is very unique navigation that you'll not found most. Make a good impression by using tile navigation on your portfolio. This navigation has good UX which makes better experience than normal navbar.

For demo, code tutorial with explanation. You can watch the video below.

Video Tutorial

If you want to miss more amazing upcoming projects. Make sure to subscribe me on youtube. It really motivates me.

So, without wasting more time let's see how to code this.

Code

You can get my all project's source code in just 5$ membership on patreon. Support my work for more awesome and amazing projects. This is just a beginning.Source Code

For the tile navigation, we need 3 files - index.html, style.css and app.js. And of course we have an img folder for images.

So let's start with simply making the NAVIGATION heading. Start by basic HTML Template and give title to it, link style.css file and don't forget to add app.js.

<h1 class="heading">navigation</h1>

Style it.

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

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2f2f2f;
    color: #fff;
    font-family: 'roboto', sans-serif;
}

.heading{
    font-size: 100px;
    text-transform: uppercase;
}

Output

Now, let's make the important thing tiled navbar. For that make a container which will hold all the links.

<!-- links -->
<div class="links-container hide">
</div>

And inside this container make a tag as we use this to create links.

<!-- links -->
<div class="links-container hide">
    <a href="#" class="link"></a>
</div>

Now, maybe you don't know that we can give images inside a to create images element. Well I didn't knew that before.

So we need images as a links of course.

<!-- links -->
<div class="links-container hide">
    <a href="#" class="link">
        <img src="img/img 1.jpg" alt="">
    </a>
</div>

Just copy this a tag 4 more time and change the image path.

The output will look terrible because of the big images. So let's style the links.

.links-container{
    width: 100%;
    height: 100vh;
    position: fixed; 
    top: 0;
    left: 0;
    display: flex;
}

Give links-container display to flex. This will make the link or a side by side. And position fixed because we want it to stay on the screen irrespective of scroll.

Now style the a tag along with its image.

.link{
    position: relative;
    width: 20%;
    height: 100%;
    overflow: hidden;
}

.link img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}

Output

Now let's add hover effect to it.

.link:hover img{
    transform: rotate(-2deg) scale(1.1);
}

:hover this simply means when being hover. So, the whole line or selector simply means give these style to the img element when .link element is being hover.

We got the effect, but its very bright. And not looking that much appealing. So, let's make a black overlay to the link.

For overlay we'll use ::after css pseudo element. You can find about this in detail here.

.link::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    transition: .5s;
}

.link:hover::after{
    opacity: 0.4;
}

Output

Now as you have seen in the demo, we have texts on the bottom also. So let's make them. To make text just add p element inside a tags.

<div class="links-container hide">
    <a href="#" class="link">
        <img src="img/img 1.jpg" alt="">
        <p>home</p>
    </a>
    <a href="#" class="link">
        <img src="img/img 2.png" alt="">
        <p>project</p>
    </a>
    +3 links more
</div>

If you see the page, You'll not able to see the text. Because texts are behind the images. To make them at top give some CSS.

.link p{
    color: #fff;
    position: absolute;
    bottom: 220px;
    right: -120px;
    width: 150%;
    height: 30px;
    text-transform: uppercase;
    font-size: 50px;
    transform: rotate(-90deg);
}

Output

Now, we have to create toggle button.

<!-- toggle btn -->
<div class="toggle-btn">
    <span></span>
    <span></span>
</div>

Style the button.

.toggle-btn{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 20px;
    top: 20px;
    background: #2f2f2f;
    border-radius: 50%;
    z-index: 99;
    cursor: pointer;
}

.toggle-btn span{
    position: absolute;
    width: 50%;
    height: 2px;
    background: #fff;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .5s;
}

.toggle-btn span:nth-child(2){
    top: 60%;
}

Output

Now of course we want the cross X effect. For that rotate the spans by 45 deg when toggle button have active class. Like this.

.toggle-btn.active span{
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.toggle-btn.active span:nth-child(2){
    transform: translate(-50%, -50%) rotate(-45deg);
}

Now add active class to toggle-btn to see the output.

Output

And to hide the links. We'll use hide class for links-container element.

.links-container{
    // previous styles
    opacity: 1;
    pointer-events: all;
    transition: .5s;
}

.links-container.hide{
    opacity: 0;
    pointer-events: none;
}

pointer-events property is used to set elements pointer interactivity. In this case we are setting all kind of pointer interaction as a default. But setting no interaction when the links are hidden using hide class.

Now of course we want JS here to make the classes toggle. We can make this whole effect with pure CSS using check boxes. But we'll do that some other day.

Open app.js and first select toggle-btn and links-container using querySelector method.

const toggleBtn = document.querySelector('.toggle-btn');
const linksContainer = document.querySelector('.links-container');

And after that, add click event to toggle-btn and toggle the classes inside that click event.

toggleBtn.addEventListener('click', () => {
    toggleBtn.classList.toggle('active');
    linksContainer.classList.toggle('hide');
})

Output

We are done. I hope you understood each and everything. If you have doubt or I missed something let me know in the comments. I have made another tile navigation tutorial. But unfortunately that time I don't used to write blogs. You can check it here.

Articles you may find Useful

1. Infinte CSS loader
2. Best CSS Effect
3. Wave Button Hover Effect
4. Youtube API - Youtube Clone
5. TMDB - Netflix Clone

I really appreciate if you can subscribe my youtube channel. I create awesome web contents.

Thanks For reading.