jqueryを使ってナビバーを作りたい。

http://pas-pol.jp/

このサイトのナビバーをjqueryで作りたいのですが、調べてみてもよくわかりませんでした。
コードをおしえてくださるとありがたいです。
携帯サイズで見た場合のナビバーで、クリックすると上げ下げできるものです。

行動規範の内容に同意します

回答1件

ベストアンサー

jQueryプラグインのMeanMenuが一番近いと思います。

・jQueryプラグインMeanMenu
https://github.com/meanthemes/meanMenu

・参考にしたサイト
https://morobrand.net/mororeco/jquery/meanmenu/

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>MeanMenu Demo</title>

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <link rel="stylesheet" href="meanmenu_js/meanmenu.css">
  <script src="meanmenu_js/jquery.js" type="text/javascript"></script>
  <script src="meanmenu_js/jquery.meanmenu.min.js" type="text/javascript"></script>

 </head>
 <body>

<header>

  <style type="text/css">
/* Basic CSS */
body {
	margin: 0;
	padding: 0;
	font: 16px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
h1 {
	font-size: 28px;
	font-weight: 100;
	text-align: center;
}
header{
	height:44px;
margin-bottom:10px;
}
header nav {
	background: #24885a;
}
header nav ul {
	margin: 0;
	list-style-type: none;
	width:100%;
}
header nav ul li {
	float:left;
	width:25%;
	margin: 0;
	text-align: center;
}
header nav ul li a{
	display: block;
	margin:0;
	padding:10px 20px;
	border-right:1px solid #666;
	border-left: 1px solid #fff;
 	box-sizing:border-box;
	text-decoration: none;
}
header nav ul li a:hover {
	background:#60d7a0;
}
header nav ul li ul {
	display: none;
}
a {
	color: #269663;
}
a:hover {
	color: #333;
}
a, a:hover {
	-o-transition: color 0.25s ease-in;
	-webkit-transition: color 0.25s ease-in;
	-moz-transition: color 0.25s ease-in;
	transition: color 0.25s ease-in;
}

article {
	width: 100%;
	margin:0px auto;
	background:#FFF;
	text-align:center;
	font-size:80%;
}
.txt2 {
	display: none;
	color:#f00;
}

/* ウィンドウサイズが480px以下になった場合 */
@media screen and (max-width: 480px) {
	.txt1{
		display: none;
	}
	.txt2{
		display: block;
	}
}
</style>

<header>
	<nav>
		<ul class="clearfix">
			<li><a href="#">ナビ1</a>
				<ul>
					<li><a href="#">ナビ1-1</a>
						<ul>
							<li><a href="#">ナビ1-1-1</a></li>
							<li><a href="#">ナビ1-1-2</a></li>
							<li><a href="#">ナビ1-1-3</a>
								<ul>
									<li><a href="#">ナビ1-1-1-1</a></li>
									<li><a href="#">ナビ1-1-1-2</a></li>
									<li><a href="#">ナビ1-1-1-3</a>
										<ul>
											<li><a href="#">ナビ1-1-1-1</a></li>
											<li><a href="#">ナビ1-1-1-2</a></li>
											<li><a href="#">ナビ1-1-1-3</a></li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">ナビ1-2</a></li>
					<li><a href="#">ナビ1-3</a></li>
				</ul>
			</li>
			<li><a href="#">ナビ2</a></li>
			<li><a href="#">ナビ3</a></li>
			<li><a href="#">ナビ4</a></li>
		</ul>
	</nav>
</header>

<article>
	<p class="txt1">ウィンドウサイズを480px以下にしてご確認ください。</p>
	<p class="txt2">メニュー表示が変わりましたか？</p>
</article>

<script>
jQuery(document).ready(function () {
    jQuery('header nav').meanmenu();
});
</script>
</script>

</body>
</html>