Modern Web

Posted on Sep 1, 2021

Tile Navigation - How to make navbar for web page with HTML CSS and JS in 2021

#html #css #javascript #webdev

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

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

Thanks For reading.

Top comments (11)

Nicolas Hervé • Sep 2 '21

In 2021 most browsers support HTML5 semantic elements, it would be nicer to use those instead of only div and span to improve accessibility of your site.

Modern Web • Sep 2 '21 • Edited

Yeah there is no issue, if you can use that also☺️

Comment hidden by post author - thread only accessible via permalink

ramona44 • Sep 7 '21

Although conventional hard discs simply overwrite existing data, the SSDs can only be written to a few times before they fail. That means that drive longevity and future reuse will be better to avoid scribbling waste across the disc.

SSDs include a Secure Erase function, which employs a voltage spike to clear the internal mapping table of the drive. The newer and therefore somewhat less conventional sanitising feature on each block on the disc is the same. freeactivationkeys.org/adobe-premi...

Most SSD producers give software, but the tools are built solely for working with SSDs of that certain manufacturer - a hassle if you have many hard drives from several manufacturers. System sup Operating

ramona44 • Sep 10 '21

Wonderful submit, very informative. I ponder why the opposite experts of this sector do not realize this.
You should proceed your writing. I am sure,
you have a great readers' base already!