davidvandenbor/Simple-navigation-for-desktop-and-mobile.md

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Simple navigation, usable on both desktop and mobile</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <nav>
    <label>Menu</label>
    <a href="pagename.html">MySite</a>
    <a href="pagename.html">About</a>
    <a href="pagename.html">Services</a>
    <a href="pagename.html">Products</a>
    <a href="pagename.html">Jobs</a>
    <a href="pagename.html">Contact</a>
  </nav>

  <h1>For desktop and mobile</h1>
  <script src="script.js"></script>
</body>

</html>

## script.js
/*
BONUS!!! Stick an ".active" class
on the menu link of the current page
(that is loaded in the browser window)!
In this case, it looks for all the links (a)
in the container with the ID of "menu"
=====================================================
*/
function setActive() {
	linkObj = document.querySelectorAll('#menu a');
	for (i = 0; i < linkObj.length; i++) {
		if (document.location.href.indexOf(linkObj[i].href) >= 0) {
			linkObj[i].classList.add('active');
		}
	}
}
window.onload = function() {
	setTimeout(function() {
		setActive();
	}, 500);
};

## Simple-navigation-for-desktop-and-mobile.md

      
    Raw
  

              Simple-navigation-for-desktop-and-mobile.md
            
          
    Simple navigation for desktop and mobile

Example of a very simple horizontal bar navigation which changes into a vertical navigation menu on mobile (meaning, when the screen is smaller than 500px) As a bonus, I've also added some javascript that sticks an ".active" class
on the menu link of the current page (that is loaded in the browser window)
Preview: at bl.ocks.org

  
## style.css
body {
  background:white;
  font-family: Arial, sans-serif;
  margin: 0;
}

h1 {
  font-size: 5vw;
  text-align: center;
  font-weight: normal;
}

/** ------------------------------------------- //
*  @group:  MENU
*/

nav {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  width: 100%;
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-right: none;
  overflow: hidden;
  transition: all 0.5s ease;
}

nav a:first-of-type {
  margin-right: auto;
}

nav a {
  text-decoration: none;
  color: #616161;
  padding: 10px 10px;
  text-align: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
  /* width: 100%; */
}

nav a:hover {
  background: darkorange;
  color: black;
  transition: all 1s ease;
}

/* The javascript code uses this to stick the .active classon the current link, depending on which page is loaded! */
.active {
  transition: all 0.5s ease;
  background: rgb(255, 89, 0);
  color: white;
}

nav label {
  display: none;
}

/* responsive vanaf hier */

@media (max-width: 500px) {
  nav label {
    display: block;
    font-size: 20px;
    cursor: pointer;
    text-align: center;
    padding: 10px 5px 35px 25px;
  }

  nav,
  nav a {
    display: block;
    font-size: 40px;
    max-height: 40px;
  }

  nav:hover {
    transition: all 0.5s ease;
    cursor: pointer;
    padding-bottom: 50px;
    overflow: hidden;
    max-height: 470px;
  }
}

/* @end MENU -----------  */
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Simple navigation, usable on both desktop and mobile</title>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>

	<nav>
	<label>Menu</label>
	<a href="pagename.html">MySite</a>
	<a href="pagename.html">About</a>
	<a href="pagename.html">Services</a>
	<a href="pagename.html">Products</a>
	<a href="pagename.html">Jobs</a>
	<a href="pagename.html">Contact</a>
	</nav>

	<h1>For desktop and mobile</h1>
	<script src="script.js"></script>
	</body>

	</html>
	/*
	BONUS!!! Stick an ".active" class
	on the menu link of the current page
	(that is loaded in the browser window)!
	In this case, it looks for all the links (a)
	in the container with the ID of "menu"
	=====================================================
	*/
	function setActive() {
	linkObj = document.querySelectorAll('#menu a');
	for (i = 0; i < linkObj.length; i++) {
	if (document.location.href.indexOf(linkObj[i].href) >= 0) {
	linkObj[i].classList.add('active');
	}
	}
	}
	window.onload = function() {
	setTimeout(function() {
	setActive();
	}, 500);
	};
	body {
	background:white;
	font-family: Arial, sans-serif;
	margin: 0;
	}

	h1 {
	font-size: 5vw;
	text-align: center;
	font-weight: normal;
	}

	/** ------------------------------------------- //
	* @group: MENU
	*/

	nav {
	display: flex;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	width: 100%;
	background: #f0f0f0;
	border: 1px solid #ccc;
	border-right: none;
	overflow: hidden;
	transition: all 0.5s ease;
	}

	nav a:first-of-type {
	margin-right: auto;
	}

	nav a {
	text-decoration: none;
	color: #616161;
	padding: 10px 10px;
	text-align: center;
	border-left: 1px solid #fff;
	border-right: 1px solid #ccc;
	/* width: 100%; */
	}

	nav a:hover {
	background: darkorange;
	color: black;
	transition: all 1s ease;
	}

	/* The javascript code uses this to stick the .active classon the current link, depending on which page is loaded! */
	.active {
	transition: all 0.5s ease;
	background: rgb(255, 89, 0);
	color: white;
	}

	nav label {
	display: none;
	}

	/* responsive vanaf hier */

	@media (max-width: 500px) {
	nav label {
	display: block;
	font-size: 20px;
	cursor: pointer;
	text-align: center;
	padding: 10px 5px 35px 25px;
	}

	nav,
	nav a {
	display: block;
	font-size: 40px;
	max-height: 40px;
	}

	nav:hover {
	transition: all 0.5s ease;
	cursor: pointer;
	padding-bottom: 50px;
	overflow: hidden;
	max-height: 470px;
	}
	}

	/* @end MENU ----------- */