ScribbleGhost/Mobile menu CSS example template.html

## Mobile menu CSS example template.html
<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900" rel="stylesheet">
	<style>
		/*Demo purposes styling only*/
		body { font-family: 'Lora', serif; line-height: 1.8; font-size: 1.2em; }
		h1, h2, h3, h4, h5, h6 { font-size: 150%; font-family: 'Heebo', sans-serif; padding-top: 1em; padding-left: 5%; padding-right: 5%; margin: 0; }
		p { padding-left: 5%; padding-right: 5%; }
		/*---------------------------*/
		.site-header {
			margin: auto;
			border-radius: 10px;
		}
		.topnav {
			overflow: hidden;
			position: relative;
			line-height: 0;
		}
		.topnav #menu-content {
			display: none;
			box-shadow: inset 1px 3px 5px -4px rgba(0, 0, 0, 0.37);
			border-bottom: 1px solid #ececec;
			padding: 1em;
			font-family: 'Heebo', sans-serif;
			font-style: italic;
			font-size: 14px;
			line-height: 2;
		}
		.topnav #search-content {
			display: none;
			box-shadow: inset 1px 3px 5px -4px rgba(0, 0, 0, 0.37);
			border-bottom: 1px solid #ececec;
			padding: 1em;
			font-family: 'Heebo', sans-serif;
			font-style: italic;
			font-size: 14px;
			line-height: 2;
		}
		#search-content input {
			height: 100%;
		    width: calc(100% - 2em);
		    padding: 1em;
		    border: none;
		    background-color: rgba(0, 0, 0, 0.02);
		    border-radius: .4em;
		    margin: 0 0 1em 0;
		}
		.topnav a {
			color: black;
			text-decoration: none;
			font-size: 17px;
		}
		.topnav button.menu-icon {
			display: block;
			position: absolute;
			right: 0;
			top: 0;
			height: 50px;
			width: 50px;
			padding: 0;
			background-color: rgba(255, 170, 255, 0.8);
			border: none;
			cursor: pointer;
		}
		.topnav button.search-icon {
			display: block;
			position: absolute;
			right: 50px;
			top: 0;
			height: 50px;
			width: 50px;
			padding: 0;
			background-color: rgba(170, 255, 170, 0.8);
			border: none;
			cursor: pointer;
		}

		.topnav button:hover,
		.topnav a:hover {
			background-color: lightblue;
			color: black;
		}
		.active {
			color: white;
		}
		a.logo {
			width: 50px;
			padding: 0;
			height: 50px;
			display: inline-block;
		}
		.logo-text {
		    width: calc(100% - 150px);
		    height: 50px;
		    display: inline-block;
		    position: absolute;
		    text-align: center;
		    left: 50px;
		    line-height: 2.5;
		}
		.logo-img {
			height: 40px;
			width: 40px;
			padding-left: 5px;
			padding-top: 5px;
		}
		.site-content {
			box-shadow: inset 1px 3px 5px -4px rgba(0, 0, 0, 0.37);
		}
	</style>
</head>
<body>
	<div id="page" class="site">
		<div id="masthead" class="site-header">
			<div class="topnav">
				<a href="test.html" class="logo active"><img src="https://i.imgur.com/7tKqURG.png" class="logo-img"></a>
				<span class="logo-text"><a href="#">This is a page</a></span>
				<div id="menu-content">
					<span>
					The content of your menu should go here. You can place anything here really. This is just a span but it could be anything. The content of your menu should go here. You can place anything here really. This is just a span but it could be anything. The content of your menu should go here. You can place anything here really. This is just a span but it could be anything.
					</span>
				</div>
				<div id="search-content">
					<span>
						<input type="text" placeholder="Search..."> This is the content of the search bar...
					</span>
				</div>
				<button href="javascript:void(0);" class="search-icon" onclick="searchtoggle()">
					<i class="fa fa-search search-button-icon"></i>
				</button>
				<button href="javascript:void(0);" class="menu-icon" onclick="menutoggle()">
					<i class="fa fa-bars menu-button-icon"></i>
				</button>
				</div>
		</div>

		<div id="content" class="site-content">
			<h3>Vertical Mobile Navbar</h3>
			<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
			<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>

			<p>The first menu icon on the right are positioned with: <code>position: absolute; right: 0; top: 0;</code></p>
			<p>The next search icon is positioned with: <code>position: absolute; right: 50px; top: 0;</code></p>

			<h3>To-do list</h3>
			<ul>
			<li>How can I focus on the input searchbar when the search icon is clicked?</li>
			<li>How can I use only the two Font awesome icons instead of the whole shebang?</li>
			</ul>

			<h3>Rules</h3>
			<ul style="font-weight: bold;">
			<li>No jQuery ✔</li>
			<li>Internet Explorer 11 support 🤮 ✔</li>
			</ul>
		</div>
		<script>
			function menutoggle()
			{
				// Show search content if search is clicked
				var x = document.getElementById("menu-content");
				if (x.style.display === "block")
				{ x.style.display = "none"; }
				else
				{ x.style.display = "block"; }

				// Close menu if it is open when seach is clicked
				var x = document.getElementById("search-content");
				if (x.style.display === "block")
				{ x.style.display = "none"; }
				else
				{ x.style.display = "none"; }
			}
		</script>
		<script>
			function searchtoggle()
			{
				// Show search content if search is clicked
				var x = document.getElementById("search-content");
				if (x.style.display === "block")
				{ x.style.display = "none"; }
				else
				{ x.style.display = "block"; }

				// Close menu if it is open when seach is clicked
				var x = document.getElementById("menu-content");
				if (x.style.display === "block")
				{ x.style.display = "none"; }
				else
				{ x.style.display = "none"; }
			}
		</script>
	</div>
</body>
</html>