jquery - 对制作移动友好的导航有点困惑

Question

所以本周早些时候，我决定给自己一个元素，我会很自豪地把它放在我的投资组合中。我决定为我创建的虚拟公司制作一个摄影网站。我正在使用 Flexbox，并且在大多数情况下，它是移动响应的。然而，我无法弄清楚的一件事是如何制作一个无需使用 Bootstrap 即可折叠的响应式菜单。我意识到 Bootstrap 非常有用，但我希望能够在不使用框架的情况下创建这些东西。我有我的汉堡包图标和汉堡包类，一切都已经到位。以及一些媒体查询。谁能帮助指导我完成整个过程？这是网站: https://jorgeg1105.github.io/JG-Photography/

//When the page loads, Fade in all divs with class hidden.
//Then Remove hidden class.
$(document).ready(function () {
    $('div.hidden').fadeIn(2000).removeClass('hidden');
});

//Fade In all h3 with class hidden.
//Remove hidden class.
$('h3.hidden').fadeIn(3000).removeClass('hidden');

//Image Filter
$(document).ready(function () {
	$("#mainnav ul li a").click(function (){
		var category = $(this).attr("class");

		if (category == "all" ){
			$("#imgcontainer img").addClass("hidden");
			setTimeout(function (){
				$("#imgcontainer img").removeClass("hidden");
			});
		}
		else {
			$("#imgcontainer img").addClass("hidden");
			setTimeout(function(){
				$("."+category).removeClass("hidden");
			});
		}
	});
});

body {
	margin: 0;
	padding: 0;
  	display: flex;
  	height: 100vh;
  	overflow: hidden;
  	font-family: 'Raleway', sans-serif;
}

ul {
	list-style-type: none;
}

#container {
 flex: 1 0 0;
 overflow-y: auto;
}

/*------------------------Classes to be added to the current active link on a page----------*/
.active {
	color: #766E6B;
}


/*-------------------------Top Navigation items---------------*/

/*--------------Side Navigation Styles--------------------*/
#sidenav {
	background-color: black;
	color: white;
	width: 60px;
	text-align: center;
	border-right: 6px solid #766E6B;
  	overflow-y: auto;
}

#sidenav ul {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
  	justify-content: center;
}

#sidenav ul li:first-child {
  margin-bottom: auto;
}
#sidenav ul li:last-child {
  margin-top: auto;
  }

#sidenav a {
	padding: 20px;
	display: block;
}

#sidenav a:visited {
	color: white;
}

#sidenav a:hover {
	color: black;
	background-color: white;
}



/*-------------Header Styles-------------------------------*/
header {
	padding: 40px 30px;
	background-color: #F7F6F2;
}

header h1, h3 {
	font-family: 'Tangerine', cursive;
}

header h1 {
	font-size: 90px;
}

header h3 {
	font-size: 40px;
}

header a {
	text-decoration: none;
	color: black;
	padding: 0 0 12px 0;
	line-height: 1.5em;
}

header a:hover {
	transition: color 1s;
	color: #766E6B;
}


.smalltxt {
	font-size: 12px;
}

.topnavitems {
	padding: 20px;
	position: relative;
}

/*------------------Main Navigation-----------------------*/

#mainnav {
	display: flex;
	justify-content: center;
	background-color: black;
}


#mainnav li {
	margin-right: 5px;

}

#mainnav a {
	color: white;
	text-decoration: none;
	letter-spacing: 1px;
	padding: 10px;
}

#mainnav a:hover {
	font-size: 20px;
	color: grey;
}

/*--------------------ImgContainer Area------------------------*/

#imgcontainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 30px 20px;
	justify-content: center;
	background-color: #F7F6F2;
}

#imgcontainer img {
	flex: 1;
	width: 40vh;
	padding: 10px;
}

#imgcontainer img:hover {
	border: 2px solid black;
}
/*-----------------------Footer Styles---------------------*/

footer {
	background-color: #F7F6F2;
	padding: 10px 20px;
	border-top: 1px solid grey;

}

footer ul {
	justify-content: center;
}

footer li {
	margin-right: 10px;
}

.developer {
	text-decoration: none;
	color: black;
}

/*-------------------Js Fade In class-------------------*/
.hidden {
	display: none;
}

/*-------------------Flexbox-----------------------*/
.col {
	flex: 1;
}

.row {
	display: flex;
}

/*----------------------Mobile Navigation------------------------*/

.mobilenav {
	background-color: black;
	justify-content: center;
	display: none;
}

.mobilenav ul {
	display: flex;
	flex-direction: row;
	margin: 0;
}

.mobilenav li {
	margin-right: 10px;

}

.mobilenav a {
	color: white;
	text-decoration: none;
	display: block;
	padding: 20px;
}

.mobilenav a:hover {
	background-color: grey;
}

/*-----------------Mobile Footer------------------------------*/
.mobilefooter {
	display: none;
}

.mobilefooter a {
	color: black;
}

/*-----------Media Queries----------------------------*/

@media screen and (max-width: 1024px){
	#sidenav {
		display: none;
	}

	nav.mobilenav.row {

		display: none;
	}

	.mobilefooter {
		display: flex;
	}

}

@media screen and (max-width: 930px){
	#imgcontainer img {
		width: 80vh;
	}
}

@media screen and (max-width: 740px){
	header a {
		display: none;
	}

	.mobilenav {
		display: flex;
	}
}

@media screen and (max-width: 592px){
	header h1 {
		font-size: 70px;
	}

	header h3 {
		font-size: 40px;
	}

	#imgcontainer img {
		width: 95%;
	}

	.mobilenav {
		flex-direction: column;
	}
}

<!DOCTYPE html>
<html>
<head>
	<title>| J&amp;D |</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--Custom CSS-->
	<link rel="stylesheet" type="text/css" href="Styles/styles.css">
	<!--Google Fonts-->
	<link href="https://fonts.googleapis.com/css?family=Raleway:400i|Tangerine:700" rel="stylesheet">
</head>
<body>
	<nav id="sidenav" class="row">
		<ul class>
			<li><a href="index.html"><i class="fa fa-home" aria-hidden="true"></i></a></li>
			<li><a href="https://www.facebook.com" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
			<li><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
			<li><a href="https://www.pinterest.com/" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
			<li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
			<li><a href="#"><i class="fa fa-arrow-up" aria-hidden="true"></i></a></li>
		</ul>
	</nav>
 	<div id="container">
 		<nav class="mobilenav">
			<ul>
				<li><a href="index.html">Gallery</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Questions</a></li>
				<li><a href="#">Rates</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#" class="hamburger"><i class="fa fa-bars" aria-hidden="true"></i></a></li>
			</ul>
		</nav>
		<header>
			<div class="row">
				<div class="col">
					<ul>
						<li>
							<div class="topnavitems hidden">
								<a href="index.html">
									<strong class="active">Gallery</strong>
									<br>
									<span class="smalltxt">Our Work</span>
								</a>
							</div>
						</li>
						<li>
							<div class="topnavitems hidden">
								<a href="#">
									<strong>About</strong>
									<br>
									<span class="smalltxt">D&amp;J Photography</span>
								</a>
							</div>
						</li>
						<li>
							<div class="topnavitems hidden">
								<a href="#">
									<strong>Questions</strong>
									<br>
									<span class="smalltxt">Facts</span>
								</a>
							</div>
						</li>
					</ul>
				</div>
				<div class="col">
					<h1>D&amp;J Photography</h1>
					<h3 class="hidden"><em>"Explore. Create. Inspire."</em></h3>
				</div>
				<div class="col">
					<ul>
						<li>
							<div class="topnavitems hidden">
								<a href="#">
									<strong>Rates</strong>
									<br>
									<span class="smalltxt">Your Investment</span>
								</a>
							</div>
						</li>
						<li>
							<div class="topnavitems hidden">
								<a href="#">
									<strong>Contact</strong>
									<br>
									<span class="smalltxt">Get In Touch</span>
								</a>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</header>
  		<nav id="mainnav">
			<ul class="row">
				<li><a href="#" class="all">All</a></li>
				<li><a href="#" class="food">Food</a></li>
				<li><a href="#" class="people">People</a></li>
				<li><a href="#" class="landmark">Landmarks</a></li>
				<li><a href="#" class="nature">Nature</a></li>
				<li><a href="#" class="sneakers">Sneakers</a></li>
				<li><a href="#" class="hamburger"><i class="fa fa-bars" aria-hidden="true"></i></a></li>
			</ul>
		</nav>
		<div id="imgcontainer">
			<a href="Images/Food/FriedChicken.jpg"><img src="Images/Food/FriedChicken.jpg" class="food"></a>
			<a href="Images/Nature/IcyMountains.jpg"><img src="Images/Nature/IcyMountains.jpg" class="nature"></a>
			<a href="Images/Landmarks/EiffelTower.jpg"><img src="Images/Landmarks/EiffelTower.jpg" class="landmark"></a>
			<a href="Images/People/Girl.jpg"><img src="Images/People/GuyInTrees.jpg" class="people"></a>
			<a href="Images/Sneakers/GoldAndWhite.jpg"><img src="Images/Sneakers/GoldAndWhite.jpg" class="sneakers"></a>
			<a href="Images/Food/ExoticDish.jpg"><img src="Images/Food/ExoticDish.jpg" class="food"></a>
			<a href="Images/Nature/VastLandscape.jpg"><img src="Images/Nature/VastLandscape.jpg" class="nature"></a>
			<a href="Images/Landmarks/LondonBridge.jpg"><img src="Images/Landmarks/LondonBridge.jpg" class="landmark"></a>
			<a href="Images/People/GuyWithCap.jpg"><img src="Images/People/GuyWithCap.jpg" class="people"></a>
			<a href="Images/Sneakers/Nike.jpg"><img src="Images/Sneakers/Nike.jpg" class="sneakers"></a>
			<a href="Images/Food/ShrimpRice.jpg"><img src="Images/Food/ShrimpRice.jpg" class="food"></a>
			<a href="Images/Nature/VeryGreenForest.jpg"><img src="Images/Nature/VeryGreenForest.jpg" class="nature"></a>
			<a href="Images/Landmarks/RomanColosseum.jpg"><img src="Images/Landmarks/RomanColosseum.jpg" class="landmark"></a>
			<a href="Images/People/OlderMan.jpg"><img src="Images/People/OlderMan.jpg" class="people"></a>
			<a href="Images/Sneakers/Vans.jpg"><img src="Images/Sneakers/Vans.jpg" class="sneakers"></a>
			<a href="Images/Sneakers/Yeezy.jpg"><img src="Images/Sneakers/Yeezy.jpg" class="sneakers"></a>
			<a href="Images/Food/SteakTacos.jpg"><img src="Images/Food/SteakTacos.jpg" class="food"></a>
			<a href="Images/Nature/MistyForest.jpg"><img src="Images/Nature/MistyForest.jpg" class="nature"></a>
			<a href="Images/Landmarks/GermanyCastle.jpg"><img src="Images/Landmarks/GermanyCastle.jpg" class="landmark"></a>
			<a href="Images/People/LittleGirl.jpg"><img src="Images/People/LittleGirl.jpg" class="people"></a>
		</div>
		<footer>
			<ul class="row">
				<li><p class="smalltxt">J&amp;G Photography all rights reserved &copy; 2017</p></li>
				<li><p class="smalltxt">Designed and Developed by <strong><a href="http://jorgegoris.com/" class="developer">Jorge Goris</a></strong></p></li>
			</ul>
			<ul class="mobilefooter row">
				<li><a href="https://www.facebook.com" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
				<li><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
				<li><a href="https://www.pinterest.com/" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
				<li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
			</ul>
		</footer>
	</div>
	<!--jQuery-->
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  	<!--Font Awesome-->
	<script src="https://use.fontawesome.com/d579f311e9.js"></script>
  	<!--Custom Js-->
  	<script src="js/custom.js"></script>
</body>
</html>

Answer 1

希望对你有帮助:

$(document).ready(function() {
	"use strict";
	var myNav = {
		init: function() {
			this.cacheDOM();
			this.browserWidth();
			this.bindEvents();
		},
		cacheDOM: function() {
			this.navBars = $(".navBars");
			this.xBxHack = $("#xBxHack");
			this.navMenu = $("#menu");
		},
		browserWidth: function() {
			$(window).resize(this.bindEvents.bind(this));
		},
		bindEvents: function() {
			var width = window.innerWidth;

			if (width < 600) {
				this.navBars.click(this.animate.bind(this));
				this.navMenu.hide();
				this.xBxHack[0].checked = false;
			} else {
				this.resetNav();
			}
		},
		animate: function(e) {
			var checkbox = this.xBxHack[0];
			!checkbox.checked ?
				this.navMenu.slideDown() :
				this.navMenu.slideUp();

		},
		resetNav: function() {
			this.navMenu.show();
		}
	};
	myNav.init();
});

body {
  background: #3e3e54;
}

.mainNav {
  background: #efefef;
  color: #1a1b18;
  max-height: 70px;
  position: relative;
}
.mainNav a {
  text-decoration: none;
}
.mainNav .logo {
  display: inline-block;
  color: #fff;
  font-size: 1.7em;
  height: 40px;
  line-height: 1.55em;
  letter-spacing: -2px;
  text-transform: uppercase;
  padding: 0 10px;
  z-index: 0;
  /*POSITION*/
  position: relative;
}
.mainNav .logo:hover:before {
  background: #292938;
}
.mainNav .logo:before {
  content: "";
  background: #3C91E6;
  z-index: -1;
  /*POSITION*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.mainNav .logo a {
  color: #efefef;
}
.mainNav .menu {
  background: #efefef;
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #d9d9d9;
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  /*POSITION*/
  position: absolute;
  top: 60px;
  right: 0;
  left: 0;
}
.mainNav .menu a {
  color: #292938;
  border-bottom: 1px solid #d9d9d9;
  font-weight: bold;
  display: block;
  padding: 15px;
}
.mainNav .menu a:hover {
  background: #292938;
  color: #efefef;
}
.mainNav .navBars {
  display: inline-block;
  font-size: 1.7em;
  line-height: 1.5em;
  float: right;
  cursor: pointer;
  /*USER SELECTION*/
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

#xBxHack {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -99999px;
}
#xBxHack:checked ~ nav .menu {
  display: block;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px;
}

@media screen and (min-width: 600px) {
  .mainNav {
    overflow: hidden;
  }
  .mainNav .navBars {
    display: none;
  }
  .mainNav .container {
    padding-top: 0;
    padding-bottom: 0;
  }
  .mainNav .logo {
    margin: 10px 0;
  }
  .mainNav .menu {
    display: block;
    box-shadow: none;
    border: none;
    float: right;
    /*POSITION*/
    position: static;
  }
  .mainNav .menu li {
    display: inline-block;
  }
  .mainNav .menu a {
    border: none;
    padding: 20px 10px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>
<!--PEN CODE-->
<input type="checkbox" id="xBxHack" />
<nav id="mainNav" class="mainNav">
	<div class="container">
		<div class="logo"><a href="#">my<strong>Nav</strong></a></div>
		<label class="navBars" for="xBxHack">
			<i class="fa fa-bars"></i>
		</label>
		<ul id="menu" class="menu">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Profolio</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
</nav>