Creating a Mobile Nav w/ Javascript - Day 18

Navigation Part Deuce

Simply a continuation of yesterday’s article about how important creating a clean and streamlined navigation it for your potential users. But for a great mobile experience it becomes even more true. The fact that more and more people are using just their mobile phones to view websites and buy products combined with the lack of screen real estate makes the mobile nav functionality very important.

There are a few very elegant solutions I’ve seen and I even like to bookmark sites that do a great job with their mobile navigation. One that I use all the time is right below and actually use this in our DamnGoodBrew.co example site as well. It leverages two simple javascript function to show and hide the menu, this is a very simple example which can be highly customized which is why I use it for my websites and clients’ alike.

HTML file

<button class="open-menu" onclick="openNav()">Open</button>

<nav id="nav" class="nav">
  <a href="/"><img src="./img/logo.jpg"></a>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/cart">Cart</a>
  <button onclick="closeNav()">Close</button>
</nav>

Javascript file

function openNav() {
 document.getElementById("nav").style.width = "100%";
}

function closeNav() {
 document.getElementById("nav").style.width = "0%";
}

CSS file

.nav {
  height: 100%;
  width: 0%;
  z-index: 1;
  right: 0;
  top: 0;
  position: fixed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

.open-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2;
}

Conclusion

This is just the mobile version we used for our site but you can also use it for desktop as well. The ability to show and hide this menu on mobile vs. desktop makes it super versatile. For a more detailed look at the code and example we used for DamnGoodBrew, subscribe below!

Creating a Mobile Nav w/ Javascript

Coming Tomorrow -----> Google Fonts & Font Awesome!

Want To Learn How To Turn Your Ideas Into Code?


Written by Tim Moreton who lives and works
in Philadelphia building useful things.