position: fixed;でサイドに固定してjQueryでスライドして現れるメニュー

では、設置方法を説明してみます。

固定されたスライドメニューの作成

まず、head内でjQueryを読み込みます。もちろんjQueryは自分のサーバーにアップしてもかまいません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

メニュー自体は簡単なリストメニューで構成されています。#のところはそれぞれリンク先のアドレスに変更してください。

<ul id="navi">
	<li class="home"><a href="#"></a></li>
	<li class="rss"><a href="#"></a></li>
	<li class="facebook"><a href="#"></a></li>
	<li class="up"><a href="#"></a></li>
	<li class="down"><a href="#"></a></li>
</ul>

続いて、スライドするために必要なjavascriptの設定です。先ほどのメニューの直後に以下のコードを挿入します。

<script type="text/javascript">
  $(function() {

          // 画面が表示されたときの設定
    $('#navi a').stop().animate({'marginLeft':'0px'},500);

    $('#navi > li').hover(
      function () {
          // マウスを乗せたときの設定
        $('a',$(this)).stop().animate({'marginLeft':'83px'},200);
      },
      function () {
          // マウスを外したときの設定
        $('a',$(this)).stop().animate({'marginLeft':'0px'},200);
      }
    );
  });
</script>

緑の数字が最初に画面が表示されたときにアイコンが収まるまでの時間で、赤の数字はマウスを乗せたときや外したときの早さです。数字が大きいほどゆっくりになります。

また、'marginLeft':'83px'というのはマウスを乗せたときに83px右にスライドするということになります。ここら辺を変更すると最初に出ている部分の長さなど調整できます。

続いてCSSの設定です。

ul#navi {
    position: fixed;
    margin-left: 603px;
    padding: 0px;
    top: 30px;
    list-style: none;
    z-index:1;
}

/* IE6対策 -------------------------------------------------*/
* html ul#navi {
  position: absolute;
  top: expression(eval(document.documentElement.scrollTop+30));
 }

ul#navi li a {
    display: block;
    width: 120px;
    height: 80px;    
    background-color:#336699;
    background-repeat:no-repeat;
    background-position: center 0px;
    border:1px solid #225588;
}

/* メニュー内の画像設定 -------------------------------------*/
ul#navi .home a {
    background-image: url(naviHome.png);
}
ul#navi .rss a {
    background-image: url(naviFeed.png);
}
ul#navi .facebook a {
    background-image: url(naviFacebook.png);
}
ul#navi .up a {
    background-image: url(naviHeader.png);
}
ul#navi .down a {
    background-image: url(naviFooter.png);
}

position: fixed;でメニューの位置を固定します。ただし、IE6は非対応ですので、その後のコードで対応します。

z-index:1;は、メインコンテンツと重なった場合にメインコンテンツの表示を優先するため必要となります。

スライドメニューの設置方法

次に固定されたスライドメニューを挿入する場所について説明します。

<div id="main">
	<ul id="navi">
		<li class="home"><a href="#"></a></li>
		<li class="rss"><a href="#"></a></li>
		<li class="facebook"><a href="#"></a></li>
		<li class="up"><a href="#"></a></li>
		<li class="down"><a href="#"></a></li>
	</ul>

　　　　【先ほど説明したjavascript】

	<div id="box">

　　　　【メインコンテンツ】

	</div>
</div>

このように、先ほど説明したスライドメニューとメインコンテンツを同列に配置します。

#main {
	width:700px;
	margin:0 auto;
	line-height:200%;
	border-left:1px solid #336699;
	border-right:1px solid #336699;
}
#box {
	padding:10px 20px;
	position:relative;
	background-color:#fff;
	z-index:20;
}

z-index:20;で先ほどのスライドメニューと重なった場合に、このメインコンテンツが優先して表示され、z-indexを有効にするためにposition:relative;を入れておきます。

20という数値に特に意味はないです。スライドメニューのところで設定した数値より大きければ問題ありません。

今回のまとめ

今回設置するにあたりスライドメニュー自体は問題なかったのですが、メインコンテンツとの重なりの部分で若干苦労しました。

後はIE6ですね。position: fixed;が使えません。ほんと手のかかる子です。

ちなみにこのブログではCSS3のborder-radiusを使って角を丸くしています。以下のCSSを追加すると実装できます。

ul#navi li a {
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
}

ただ、IE非対応です。私は無視していますがどうしてもという場合は、CSS3 PIEあたりを使えばいいと思います。

コードもダウンロードできるようにしていますので、参考に色々試してみてください。