davidvandenbor/navigation-desktop-mobile: example

.vscode

# Scalable navigation for desktop and menu

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Navigation</title>
</head>

<body>
   <nav>
      <label>Menu</label>
      <a href="index.html">MySite</a>
      <a href="about.html">About</a>
      <a href="services.html">Services</a>
      <a href="products.html">Products</a>
      <a href="jobs.html">Jobs</a>
      <a href="contact.html">Contact</a>

   </nav>
   <h1>For desktop and mobile</h1>
</body>

</html>

{
	"main": "index.html",
	"scripts": {
		"start": "parcel index.html --open",
		"build": "parcel build index.html"
	},
	"devDependencies": {
		"@babel/core": "^7.2.0",
		"parcel-bundler": "^1.6.1"
	}
}

body {
	font-family: Arial, sans-serif;
	margin: 0;
	background: rgb(255, 219, 186);
}

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

/* MENU STARTS HERE! */

/* styling for the <nav> and the <menu> */

nav {
	width: 100%;
	background: white;
	border: none;
	transition: all 0.5s ease;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}

nav label {
	display: block;
	font-size: 20px;
	cursor: pointer;
	text-align: center;
	padding: 10px 0;
}

nav a {
	font-size: 40px;
	text-decoration: none;
	color: #616161;
	padding: 10px 10px;
	text-align: center;
	border-left: 1px solid #fff;
	border-right: 1px solid #ccc;
}

nav a:hover {
	background: rgb(255, 191, 73);
	transition: all 0.5s ease;
	color: black;
}

/* hover animation to make the <nav> drop down! */
nav,
nav a {
	display: block;
	font-size: 40px;
	max-height: 40px;
	overflow: hidden;
}

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

/* MEDIA QUERIES */

@media (min-width: 600px) {
	nav {
		display: flex;
		font-size: 20px;
		justify-content: flex-end;

		transition: all 0.5s ease;
	}

	nav:hover {
		padding-bottom: 0;
	}

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

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

	nav label {
		display: none;
	}
}