ナビゲーションメニュー jQueryの実装方法

<nav class="nav">
  <div class="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.nav {
  position: relative;
}

.hamburger {
  width: 30px;
  height: 20px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #333;
  margin-bottom: 5px;
  transition: 0.3s;
}

.menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
}

.nav.open .hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav.open .hamburger span:nth-child(2) {
  opacity: 0;
}

.nav.open .hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.nav.open .menu {
  display: block;
}

$('.hamburger').on('click', function() {
  $(this).parent('.nav').toggleClass('open');
});

<ul class="menu">
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<section id="section1">
  <h2>Section 1</h2>
  <!-- コンテンツ -->
</section>

<section id="section2">
  <h2>Section 2</h2>
  <!-- コンテンツ -->
</section>

<section id="section3">
  <h2>Section 3</h2>
  <!-- コンテンツ -->
</section>

$('a[href^="#"]').on('click', function() {
  var href= $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top;
  $("html, body").animate({scrollTop:position}, 600, "swing");
  return false;
});

<ul class="accordion">
  <li>
    <h3 class="accordion-title">質問1</h3>
    <div class="accordion-content">
      <p>回答1</p>
    </div>
  </li>
  <li>
    <h3 class="accordion-title">質問2</h3>
    <div class="accordion-content">
      <p>回答2</p>
    </div>
  </li>
</ul>

.accordion-content {
  display: none;
}

$('.accordion-title').on('click', function() {
  $(this).next('.accordion-content').stop().slideToggle();
});

<button id="page-top">トップへ戻る</button>

#page-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
}

$(window).scroll(function() {
  if ($(this).scrollTop() > 300) {
    $('#page-top').fadeIn();
  } else {
    $('#page-top').fadeOut();
  }
});

$('#page-top').on('click', function() {
  $('html, body').animate({scrollTop: 0}, 600, 'swing');
  return false;
});

<ul class="menu">
  <li><a href="#">メニュー1</a>
    <ul class="submenu">
      <li><a href="#">サブメニュー1-1</a></li>
      <li><a href="#">サブメニュー1-2</a></li>
    </ul>
  </li>
  <li><a href="#">メニュー2</a>
    <ul class="submenu">
      <li><a href="#">サブメニュー2-1</a></li>
      <li><a href="#">サブメニュー2-2</a></li>
    </ul>
  </li>
</ul>

.submenu {
  display: none;
}

$('.menu > li').hover(
  function() {
    $(this).children('.submenu').stop().slideDown();
  },
  function() {
    $(this).children('.submenu').stop().slideUp();
  }
);

<section id="target-section">
  <h2>注目セクション</h2>
  <!-- コンテンツ -->
</section>

#target-section {
  opacity: 0;
  transition: opacity 0.5s;
}

#target-section.show {
  opacity: 1;
}

$(window).scroll(function() {
  var targetElement = $('#target-section');
  var scrollPosition = $(window).scrollTop();
  var windowHeight = $(window).height();
  var elementPosition = targetElement.offset().top;

  if (scrollPosition > elementPosition - windowHeight / 2) {
    targetElement.addClass('show');
  }
});

<div class="sprite-container">
  <img src="sprite.png" alt="" class="sprite">
</div>

.sprite-container {
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.sprite {
  display: block;
  width: 200px; /* スプライト画像の幅 */
  height: 100px;
  background-position: 0 0; /* 初期状態の表示位置 */
  transition: background-position 0.3s;
}

.sprite.active {
  background-position: -100px 0; /* クリック時の表示位置 */
}

$('.sprite').on('click', function() {
  $(this).toggleClass('active');
});

<ul class="tabs">
  <li class="tab active"><a href="#tab1">タブ1</a></li>
  <li class="tab"><a href="#tab2">タブ2</a></li>
  <li class="tab"><a href="#tab3">タブ3</a></li>
</ul>

<div id="tab1" class="content active">
  <!-- コンテンツ1 -->
</div>

<div id="tab2" class="content">
  <!-- コンテンツ2 -->
</div>

<div id="tab3" class="content">
  <!-- コンテンツ3 -->
</div>

.content {
  display: none;
}

.content.active {
  display: block;
}

.tabs .tab.active a {
  background-color: #ccc;
}

$('.tabs .tab a').on('click', function(e) {
  e.preventDefault();
  $('.tabs .tab').removeClass('active');
  $(this).parent('.tab').addClass('active');
  $('.content').hide();
  $($(this).attr('href')).show();
});

<ul class="categories">
  <li class="category active" data-category="all">すべて</li>
  <li class="category" data-category="news">ニュース</li>
  <li class="category" data-category="blog">ブログ</li>
</ul>

<div class="articles">
  <article class="article" data-category="news">ニュース記事1</article>
  <article class="article" data-category="blog">ブログ記事1</article>
  <article class="article" data-category="news">ニュース記事2</article>
  <article class="article" data-category="blog">ブログ記事2</article>
</div>

.categories .category.active {
  background-color: #ccc;
}

.article {
  display: none;
}

.article.show {
  display: block;
}

$('.categories .category').on('click', function() {
  var category = $(this).data('category');
  $('.categories .category').removeClass('active');
  $(this).addClass('active');

  if (category == 'all') {
    $('.article').addClass('show');
  } else {
    $('.article').removeClass('show');
    $('.article[data-category="' + category + '"]').addClass('show');
  }
});

<div id="loading">
  <p>Loading...</p>
</div>

<!-- コンテンツ -->

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

$(window).on('load', function() {
  $('#loading').fadeOut();
});