Tile Navigation - How to make navbar for web page with HTML CSS and JS in 2021
Tags: html, css, javascript, webdev
Published: 2021-09-01 09:57:35

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

{% youtube LeaWb_3UDK4 %}

>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](https://www.patreon.com/modernweb). Support my work for more awesome and amazing projects. This is just a beginning.[Source Code](https://www.patreon.com/posts/55615263)

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`.

```HTML
<h1 class="heading">navigation</h1>
```
Style it.

```CSS
*{
    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
![Frame 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81pxmts85q92gsh00v1i.png)

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

```HTML
<!-- links -->
<div class="links-container hide">
</div>
```
And inside this container make `a` tag as we use this to create links.
```HTML
<!-- 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. 
```HTML
<!-- 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.
```CSS
.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.
```CSS
.link{
    position: relative;
    width: 20%;
    height: 100%;
    overflow: hidden;
}

.link img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}
```
######Output
![Capture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxe58tk1otir6akxjzq6.PNG)

Now let's add hover effect to it.
```CSS
.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](https://dev.to/kunaal438/all-about-css-before-and-after-element-css-pseudo-elements-5g1n).

```CSS
.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
![Untitled design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l3664esymrutixqj2w2.gif)
 
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.

```HTML
<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.
```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
![Capture2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9ovbzxybuepii4tzpp5.PNG)

Now, we have to create toggle button. 
```HTML
<!-- toggle btn -->
<div class="toggle-btn">
    <span></span>
    <span></span>
</div>
```
Style the button.
```CSS
.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
![Capture3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lacjqcdov22pdek0scq4.PNG)

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.
```CSS
.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
![Capture4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkx7k23gawahc2qdzyux.PNG)

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

```CSS
.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.

```JS
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.
```JS
toggleBtn.addEventListener('click', () => {
    toggleBtn.classList.toggle('active');
    linksContainer.classList.toggle('hide');
})
```

######Output
![Untitled design (1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvd8fiiwdcjxi552mr8q.gif)
 
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](https://youtu.be/EsD3QY_wFm8).

#Articles you may find Useful

1. [Infinte CSS loader](https://dev.to/kunaal438/quick-css-make-infinity-loading-animation-for-your-next-website-187k)
2. [Best CSS Effect](https://dev.to/kunaal438/css-the-best-css-effects-of-all-time-most-underrated-web-ux-2chj)
3. [Wave Button Hover Effect](https://dev.to/kunaal438/create-awesome-wavy-button-hover-effect-pure-css-wavy-design-1722)
4. [Youtube API - Youtube Clone](https://dev.to/kunaal438/create-working-youtube-clone-with-search-box-youtube-api-2a6e)
5. [TMDB - Netflix Clone](https://dev.to/kunaal438/how-to-create-netflix-clone-netflix-clone-with-hmtl-css-js-989)

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

<a href="https://www.youtube.com/c/modern_web?sub_confirmation=1"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jeitpawvax07cx7r9yoa.png"></a>

Thanks For reading.