JavaScript + Ajax 実践サンプル集

水平方向にスライドするメニュー(2)

説明補足説明コード分割コードコメント投稿

このサンプルはメニューを水平方向にスライドさせて表示します。サブメニューを表示するには「MENU」をクリックします。サブメニューが表示されている状態で「MENU」をクリックすると閉じます。

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

外部スクリプトCSS部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
var menu, intShow, intHide;
var i = -135, speed = 3, bshow = true;

window.onload = function() {
  menu = document.getElementById("menu");
  menu.onclick = showHideMenu;
}

function showHideMenu() {
  if (bshow) {
    bshow = false;
    clearInterval(intHide);
    intShow=setInterval("show()",10);
  }
  else {
    bshow = true;
    clearInterval(intShow);
    intHide=setInterval("hide()",10);
  }
}

function show() {
  if (i < -12) {
    i = i + speed;
    menu.style.left = i;
  }
}

function hide() {
  if (i > -135) {
   i = i - speed;
   menu.style.left = i;
  }
}

このサンプルを編集して試してみる!

このサンプルは、メニューを左右にスライドさせるのにsetInterval()関数を使用しています。スライドの速度を調整するには変数「speed」を書き換えます。

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

水平方向にスライドするメニュー(2)