JQueryを使った最もシンプルなプルダウン型ハンバーガーメニューの実装方法
たーさん最終更新日時 : 2026.08.26
HTML
<div class="toggle-btn">
<span></span>
<span></span>
<span></span>
</div>
<nav class="toggle-menu close">
<ul>
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
<li><a href="">メニュー3</a></li>
</ul>
</nav>CSS
.toggle-btn {
display: block;
border-radius:2px;
position: fixed;
right: 13px;
top: 12px;
width: 42px;
height: 40px;
cursor: pointer;
z-index: 3;
}
.toggle-btn span {
display: block;
position: absolute;
width: 30px;
border-bottom: solid 5px #ccc;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
left: 6px;
}
.toggle-btn span:nth-child(1) {
top: 9px;
}
.toggle-btn span:nth-child(2) {
top: 18px;
}
.toggle-btn span:nth-child(3) {
top: 27px;
}
.toggle-btn.open span:nth-child(1) {
top: 18px;
left: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.toggle-btn.open span:nth-child(2),
.toggle-btn.open span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.toggle-menu {
background:#eee;
padding:15px;
}
.close {
display:none;
}JQuery
<script type="text/javascript">
$(function() {
$('.toggle-btn').click(function() {
$(this).toggleClass('open');
$(this).next().slideToggle();
$('.toggle-btn').not($(this)).next().slideUp();
$('.toggle-btn').not($(this)).removeClass('open');
});
});
</script>投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
