Home/ Questions/Q 6886

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 60k
Asked: 2024-11-27T10:41:11+00:00

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

  • 60k

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.

csshtmljavascriptwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,