PROWAREtech

articles » current » css » mobile-navigation-menu

CSS: Mobile Navigation Menu

A mobile-centric navigation menu using HTML and CSS only.

Create a mobile compatible navigation menu without using any JavaScript.

This creates a little hamburger to the top-right of the navigation/header bar when the page is narrow like on a mobile device.

This is the above page as viewed on a desktop browser:

The reason this does not require JavaScript is because a checkbox is used to remember the toggle state of the mobile dropdown menu. The code #mobile_chkbox:checked ~ #menu { } detects when the checkbox is checked and then the CSS code in the brackets is applied to the UL with its ID set to "menu".

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>CSS mobile navigation menu</title>
		<style>
		*, *::before, *::after {
			box-sizing: border-box;
		}
		body {
			margin: 0;
			padding: 0;
		}

		/* MOBILE CSS */

		#mobile_chkbox {
			display: none;
		}

		#mobile_button {
			display: block;
			padding: 10px;
			margin: 5px 15px 0 0;
			background-color: #0094ff;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			float: right;
		}

			#mobile_button span {
				display: block;
				width: 22px;
				height: 2px;
				border-radius: 1px;
				background-color: #fff;
				margin-top: 4px;
			}

		#mobile_chkbox:checked ~ #menu {
			visibility: visible;
			transform: scale(1,1);
		}

			#mobile_chkbox:checked ~ #menu a {
				opacity: 1;
				transition: .25s ease-in-out .25s;
			}

		#menu {
			position: absolute;
			visibility: hidden;
			padding: 0;
			margin: 0;
			list-style: none;
			top: 49px;
			height: auto;
			background-color: #0094ff;
			width: 100%;
			transition: .25s ease-in-out .1s;
			transform: scale(1,0);
			transform-origin: top;
			z-index: 1;
		}

			#menu li {
				display: block;
				margin: 0;
				padding: 0;
				text-align: right;
			}

			#menu a {
				display: inline;
				opacity: 0;
				line-height: 40px;
				font-size: 20px;
				padding-right: 15px;
				transition: .1s ease-in-out;
				color: #eee;
				text-decoration: none;
			}

		header {
			height: 49px;
			background-color: #00487d;
		}

		/* DESKTOP CSS */

		@media screen and (min-width: 768px) {

			#mobile_button, #mobile_chkbox {
				display: none;
			}

			nav {
				text-align: center;
			}
			#menu {
				transition: none;
				visibility: visible;
				top: 0;
				transform: none;
				background-color: transparent;
				position: relative;
			}

				#menu li {
					position: relative;
					display: inline-block;
					text-align: center;
				}

				#menu a {
					position: relative;
					transition: none;
					line-height: 39px;
					opacity: 1;
					padding: 0 12px;
					top: 5px;
					width: 68px;
					display: inline-block;
					font-size: 14px;
					border-bottom: none;
				}

				#menu a::after {
					content: "";
					display: block;
					position: absolute;
					left: 0;
					right: 0;
					height: 4px;
					background-color: #eee;
					transform: scale(0,1);
					transition: .2s;
				}

				#menu a:hover::after {
					transform: scale(1,1);
				}


		}
		</style>
	</head>
	<body>
		<header>
			<nav>
				<input type="checkbox" id="mobile_chkbox" />
				<label id="mobile_button" for="mobile_chkbox">
					<span></span>
					<span></span>
					<span></span>
				</label>
				<ul id="menu">
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Products</a></li>
					<li><a href="#">Cart</a></li>
					<li><a href="#">Contact</a></li>
					<li><a href="#">Forum</a></li>
					<li><a href="#">Sitemap</a></li>
					<li><a href="#">Search</a></li>
				</ul>
			</nav>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
	</body>
</html>

Here is a subtle variation on the above code.

<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="css/site.css">
		<title></title>
		<style>
		/* MOBILE CSS */
		*, *::before, *::after {
			box-sizing: border-box;
		}

		body {
			padding: 0;
			margin: 0;
		}

		header {
			padding: 0;
		}

		nav {
			position: relative;
			background-color: darkolivegreen;
			height: 49px;
			padding: 0;
		}

		#mobilechk {
			display: none;
		}

			#mobilechk:checked ~ #menu {
				visibility: visible;
				transform: scale(1,1);
			}

				#mobilechk:checked ~ #menu a {
					opacity: 1;
					transition: .25s ease-in-out .25s;
				}

		#mobilebtn {
			display: block;
			float: right;
			background-color: darkgoldenrod;
			margin: 5px;
			border: none;
			cursor: pointer;
			padding: 10px;
		}

			#mobilebtn span {
				display: block;
				margin-top: 4px;
				height: 2px;
				width: 22px;
				background-color: darkolivegreen;
			}

		#menu { /* this is a UL */
			position: absolute;
			visibility: hidden;
			padding: 0;
			margin: 0;
			list-style: none;
			top: 49px;
			height: auto;
			background-color: darkgoldenrod;
			width: 100%;
			transition: .25s ease-in-out .1s;
			transform: scale(1,0);
			transform-origin: top;
			z-index: 1;
		}

			#menu li {
				display: block;
				margin: 0;
				padding: 0;
				text-align: right;
			}

			#menu a {
				opacity: 0;
				line-height: 40px;
				font-size: 20px;
				padding-right: 15px;
				transition: .1s ease-in-out;
				color: darkolivegreen;
				text-decoration: none;
			}

		/* DESKTOP CSS */

		@media (min-width: 768px) {

			#mobilebtn {
				display: none;
			}

			#menu {
				visibility: visible;
				top: 0;
				position: relative;
				background-color: transparent;
				transform: none;
				transition: none;
			}

				#menu li {
					position: relative;
					display: inline-block;
					text-align: center;
					width: 100px;
				}

				#menu a {
					position: relative;
					line-height: 49px;
					opacity: 1;
					color: darkgoldenrod;
					display: inline;
					padding: 0;
				}

					#menu a::before {
						content: "";
						position: absolute;
						display: block;
						top: -2px;
						left: 0;
						right: 0;
						height: 3px;
						background-color: darkgoldenrod;
						transform: scale(0,1);
						transition: .2s;
					}

					#menu a:hover::before {
						transform: scale(1,1);
					}
		}
		</style>
	</head>
	<body>
		<header>
			<nav>
				<input type="checkbox" id="mobilechk">
				<label for="mobilechk" id="mobilebtn">
					<span></span>
					<span></span>
					<span></span>
				</label>
				<ul id="menu">
					<li><a href="#">home</a></li>
					<li><a href="#">products</a></li>
					<li><a href="#">about</a></li>
					<li><a href="#">contact</a></li>
					<li><a href="#">search</a></li>
					<li><a href="#">cart</a></li>
				</ul>
			</nav>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
	</body>
</html>

All alternative method is to use a grid. The code #mobile_chkbox:checked ~ #nav { } detects when the checkbox is checked and then the CSS code in the brackets is applied to the DIV with its ID set to "nav".

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>CSS mobile navigation menu</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}

		/* DESKTOP CSS */

		#head {
			position: static;
			top: 0;
			width: 100%;
			height: 45px;
			padding-top: 5px;
			background-color: #00487d;
			color: #eee;
			display: grid;
			grid-template-columns: auto auto;
		}
		#mobile_button, #mobile_chkbox {
			display: none;
		}

		.logo {
			margin: 0 0 0 5px;
			padding: 0;
			float: left;
			grid-column-start: 1;
			grid-column-end: 2;
		}

		#nav {
			display: flex;
			justify-content: flex-end;
			grid-column-start: 2;
			grid-column-end: 3;
		}

			#nav ul {
				display: flex;
				margin: 7px 0 0 0;
				padding: 0;
				list-style: none;
			}

			#nav li {
				display: block;
				margin: 0;
				padding: 0;
				text-align: center;
				position: relative;
			}

			#nav a {
				display: block;
				color: #eee;
				line-height: 30px;
				font-size: small;
				text-decoration: none;
				width: 75px;
			}

				#nav a::after {
					content: "";
					display: block;
					position: absolute;
					left: 0;
					right: 0;
					height: 4px;
					background-color: #eee;
					transform: scale(0,1);
					transition: .2s;
				}

				#nav a:hover::after {
					transform: scale(1,1);
				}

		/* MOBILE CSS */

		@media screen and (max-width: 768px) {
			#head {
				display: block;
			}

			#mobile_button {
				display: block;
				padding: 10px;
				margin: 2px 15px 0 0;
				background-color: #0094ff;
				border: none;
				border-radius: 4px;
				cursor: pointer;
				float: right;
			}

				#mobile_button span {
					display: block;
					width: 22px;
					height: 2px;
					border-radius: 1px;
					background-color: #fff;
					margin-top: 4px;
				}

			#mobile_chkbox:checked ~ #nav {
				visibility: visible;
				transform: scale(1,1);
			}

				#mobile_chkbox:checked ~ #nav a {
					opacity: 1;
					transition: .25s ease-in-out .25s;
				}

			#nav {
				display: block;
				position: absolute;
				visibility: hidden;
				padding: 0;
				margin: 0;
				top: 50px;
				height: auto;
				background-color: #0094ff;
				width: 100%;
				transition: .25s ease-in-out .1s;
				transform: scale(1,0);
				transform-origin: top;
			}

				#nav ul {
					display: block;
				}

				#nav li {
					display: block;
					margin: 0;
					padding: 0;
					text-align: right;
				}

				#nav a {
					display: inline;
					opacity: 0;
					line-height: 40px;
					font-size: 20px;
					margin-right: 5px;
					transition: .1s ease-in-out;
				}

					#nav a::after {
						display: none;
					}
		}
	</style>
</head>
<body>
	<div id="head">
		<h3 class="logo">Acme</h3>
		<input type="checkbox" id="mobile_chkbox" />
		<label id="mobile_button" for="mobile_chkbox">
			<span></span>
			<span></span>
			<span></span>
		</label>
		<div id="nav">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Products</a></li>
				<li><a href="#">Cart</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Forum</a></li>
				<li><a href="#">Sitemap</a></li>
				<li><a href="#">Search</a></li>
			</ul>
		</div>
	</div>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec egestas imperdiet purus, sit amet aliquet sapien gravida quis. Curabitur sed velit eu est finibus malesuada et eu nisl. Curabitur vel sapien et massa suscipit rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque commodo, libero vitae tincidunt volutpat, felis elit lacinia nibh, id vehicula tellus erat ut ex. Vivamus vehicula arcu sit amet arcu tincidunt, nec ultricies arcu suscipit. Donec tempus metus nec faucibus gravida. Vivamus eu ligula feugiat, pharetra massa ac, efficitur tellus. Quisque faucibus nisi aliquet congue condimentum. Praesent tellus lectus, vestibulum sit amet lacus ac, sagittis rutrum velit. Morbi tempus accumsan cursus. Morbi egestas nisi quis neque lobortis interdum. Sed tristique augue nec dignissim condimentum.</p>
</body>
</html>

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE