ナビゲーション機能を持ったstickyメニューを実装する「Smint」

「Smint」はナビゲーション機能をあわせもった、画面スクロールしてもついてくるstickyメニューを実装するjQueryプラグインです。今流行りのフルスクリーンWebデザインにぴったりです。

Smint

screenshot227

この手のプラグインは既にあると思うのですが、2KBという軽量さ、スムーズなアニメーション、実装がとてもシンプルなところが気に入りました。

スクロールしてもこのようにメニューがついてきます。

screenshot228

メニューのボタンを押すと同じページ内のあらかじめ設定された箇所へスムーズなアニメーションで移動します。ぜひデモで試してみてください。

「Smint」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<script src="jquery.min.js"></script>
<script src="jquery.smint.js"></script>

 

HTMLは以下のようにマークアップします。まずはメニュー。idでナビゲーションさせたい箇所の指定をを行います。

<div class="subMenu" >
  <div class="inner">
    <a href="#" id="sTop">Home</a> 
    <a href="#" id="s1">Section 1</a>
    <a href="#" id="s2">Section 2</a>
    <a href="#" id="s3">Section 3</a>
  </div>
</div>

 

ナビゲーションさせる先はclassでsection名をつけていきます。この例ではs1,s2…とsection名をふっています。margin-topはサンプル用です。

<div class="section sTop">
  <div class="inner">
    <h1>Home</h1>
  </div>
</div>
<div class="section s1" style="margin-top:500px;">
  <div class="inner">
    <h1>Section 1</h1>
  </div>
</div>
  <div class="section s2" style="margin-top:500px;">
  <div class="inner">
    <h1>Section 2</h1>
  </div>
</div>
<div class="section s3" style="margin-top:500px;">
  <div class="inner">
    <h1>Section 3</h1>
  </div>
</div>

 

JavaScriptはたったのこれだけ。scrollSpeedでアニメーションの速度を指定できます。

$(document).ready( function() {
  $('.subMenu').smint({
    'scrollSpeed' : 1000
  });
});

 

するとこのように出来上がります。あとはCSSでデザインしていけば良いですね。

screenshot229

フルスクリーンWebデザインを試してみたい人にはうってつけなプラグインです。ぜひ参考にどうぞ。

 

Home > JavaScript > ナビゲーション機能を持ったstickyメニューを実装する「Smint」

Return to page top