jQuery

【jQuery】メニューリストをスライダーメニューに変換するjQuery Slider Menu

April 3, 2017
Slider Menu

jQuery Slider Menuはメニューリストをスムーズスライダーメニューに変換するjQueryプラグイン。

HTML

  <div class="slider">

    <ul class="my-menu">
      <li><a href="#">Home</a>
      <li><a href="#">Blog</a>
        <ul>
          <li data-vertical="true"><a href="#">Featured Stories</a>
            <ul>
              <li><a href="#">The Tale of The Slider Menu</a>
              <li><a href="#">Slider Menu - On Fire!</a>
              <li><a href="#">Do you slide?!</a>
            </ul>
          <li><a href="#">Tags</a>
            <ul>
              <li><a href="#">Tag 1</a>
              <li><a href="#">Tag 2</a>
              <li><a href="#">Tag 3</a>
            </ul>
          <li><a href="#">Categories</a>
            <ul>
              <li><a href="#">Category 1</a>
              <li><a href="#">Category 2</a>
              <li><a href="#">Category 3</a>
            </ul>
        </ul>
      <li data-vertical="true"><a href="#">About<span class="slider-menu__desc">I'm a little&hellip; special!</span></a>
        <ul>
          <li><a href="#">Who We Are</a>
          <li><a href="#">What We Do</a>
          <li><a href="#">How to Help</a>
        </ul>
      <li><a href="#">Contact</a>
    </ul><!-- .my-menu -->

  </div><!-- .slider -->

JS

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="slider-menu.jquery.js"></script>

<script>
( function( $ ) {
  $( function() {
    $( '.my-menu' ).sliderMenu();
  });
})( jQuery );
</script>

MIT