DEV Community

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

Posted on

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

#html #css #webdev #javascript

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode
Output

Frame 2

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode
Output

Capture

Now let's add hover effect to it.

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

: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;
}
Enter fullscreen mode Exit fullscreen mode
Output

Untitled design

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode
Output

Capture2

Now, we have to create toggle button.

<!-- toggle btn -->
<div class="toggle-btn">
    <span></span>
    <span></span>
</div>
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode
Output

Capture3

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);
}
Enter fullscreen mode Exit fullscreen mode

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

Output

Capture4

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;
}
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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');
})
Enter fullscreen mode Exit fullscreen mode
Output

Untitled design (1)

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.

Top comments (11)

Collapse
 
hnicolas profile image
Nicolas Hervé •

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.

Collapse
 
themodernweb profile image
Modern Web • • Edited

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

Collapse
 
ramona44 profile image
Info Comment hidden by post author - thread only accessible via permalink
ramona44 •

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

Collapse
 
ramona44 profile image
ramona44 •

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!

Collapse
 
herculeskan profile image
Carlos E. Lara •

Thank You So much!!

Collapse
 
themodernweb profile image
Modern Web •

I’m so pleased to hear that you liked it.

Collapse
 
meo3w profile image
Phil Hasenkamp •

Awesome job on this! I’m going to try today and post on GitHub

Collapse
 
themodernweb profile image
Modern Web •

Sounds great

Collapse
 
thumbone profile image
Bernd Wechner •

I love the article and the navbar design.

Not so keen on the robot voice in the video.

Collapse
 
themodernweb profile image
Modern Web •

Sorry about that 😢

Collapse
 
boutsism profile image
boutsism •

This is an excellent work! Well done! Keep making projects like this! I only have one question. What happens in mobile? how can this be responsive?

View full discussion (11 comments)

Some comments have been hidden by the post's author - find out more