STINGER7：スマホ用ナビゲーションを横スクロールメニューに変える方法

1. <!-- アコーディオン -->
2. <nav id="s-navi" class="pcnone">
3. <dl class="acordion">
4. <dt class="trigger">
5. <p><span class="op"><i class="fa fa-bars"></i></span></p>
6. </dt>
7. <dd class="acordion_tree">
8. <?php
9. $defaults = array(
10. 'theme_location' => 'primary-menu',
11. );
12. ?>
13. <?php wp_nav_menu( $defaults ); ?>
14. <div class="clear"></div>
15. </dd>
16. </dl>
17. </nav>
18. <!-- /アコーディオン -->

<!-- アコーディオン -->
<nav id="s-navi" class="pcnone">
<dl class="acordion">
<dt class="trigger">
<p><span class="op"><i class="fa fa-bars"></i></span></p>
</dt>
<dd class="acordion_tree">
<?php
$defaults = array(
'theme_location' => 'primary-menu',
);
?>
<?php wp_nav_menu( $defaults ); ?>
<div class="clear"></div>
</dd>
</dl>
</nav>
<!-- /アコーディオン -->

1. <div class="nav-wrap">
2. <div class="scroll-nav">
3. <ul>
4. <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー1</a></li>
5. <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー2</a></li>
6. <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー3</a></li>
7. <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー4</a></li>
8. <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー5</a></li>
9. </ul>
10. </div>
11. <div class="next-btn">＞</div>
12. </div>

<div class="nav-wrap">
  <div class="scroll-nav">
    <ul>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー1</a></li>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー2</a></li>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー3</a></li>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー4</a></li>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー5</a></li>
    </ul>
  </div>
  <div class="next-btn">＞</div>
</div>

1. <li><a href="<?php echo esc_url( home_url( '/archives/category/wordpress' ) ); ?>">WordPress</a></li>

<li><a href="<?php echo esc_url( home_url( '/archives/category/wordpress' ) ); ?>">WordPress</a></li>

1. .nav-wrap {
2. position: relative;
3. }
4. .scroll-nav {
5. width: 100%;
6. background: #555; /* メニューの背景色 */
7. overflow-x: auto;
8. -webkit-overflow-scrolling: touch; /* 慣性スクロール */
9. }
10. .scroll-nav ul {
11. max-width: 1060px; /* メニューの最大幅 */
12. min-width: 750px; /* メニューの最小幅 */
13. height: 40px;
14. line-height: 40px;
15. margin: 0 auto;
16. list-style: none;
17. padding-right: 25px; /* 右側の固定分余白を空ける */
18. }
19. .scroll-nav ul li {
20. float: left;
21. width: 150px; /* メニューの個別の幅 */
22. text-align: center;
23. }
24. .scroll-nav ul li:hover {
25. background: #222; /* マウスホバー時の背景色 */
26. }
27. .scroll-nav ul li a {
28. display: inline-block;
29. color: #fff; /* メニューの文字色 */
30. text-decoration: none;
31. }
32. .next-btn { /* 右側に固定する部分 */
33. position: absolute;
34. top: 0;
35. right: 0;
36. width: 25px; /* 固定部分の幅 */
37. height: 40px; /* メニューの高さに合わせる */
38. line-height: 40px;
39. background: #fff;
40. color: #555;
41. }
42. @media only screen and (min-width: 771px) { /* PCサイズでの指定 */
43. .scroll-nav ul {
44. padding: 0;
45. }
46. .scroll-nav ul li {
47. width: 20%; /* メニューの個別の幅 */
48. }
49. .next-btn {
50. display: none; /* 右側の固定部分を非表示 */
51. }
52. }

.nav-wrap {
  position: relative;
}
.scroll-nav {
  width: 100%;
  background: #555; /* メニューの背景色 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* 慣性スクロール */
}
.scroll-nav ul {
  max-width: 1060px; /* メニューの最大幅 */
  min-width: 750px; /* メニューの最小幅 */
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  list-style: none;
  padding-right: 25px; /* 右側の固定分余白を空ける */
}
.scroll-nav ul li {
  float: left;
  width: 150px; /* メニューの個別の幅 */
  text-align: center;
}
.scroll-nav ul li:hover {
  background: #222; /* マウスホバー時の背景色 */
}
.scroll-nav ul li a {
  display: inline-block;
  color: #fff; /* メニューの文字色 */
  text-decoration: none;
}
.next-btn { /* 右側に固定する部分 */
  position: absolute;
  top: 0;
  right: 0;
  width: 25px; /* 固定部分の幅 */
  height: 40px; /* メニューの高さに合わせる */
  line-height: 40px;
  background: #fff;
  color: #555;
}
@media only screen and (min-width: 771px) { /* PCサイズでの指定 */
.scroll-nav ul {
  padding: 0;
}
.scroll-nav ul li {
  width: 20%; /* メニューの個別の幅 */
}
.next-btn {
  display: none; /* 右側の固定部分を非表示 */
}
}