スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

先日このブログの右サイドに設置したオンマウスでスライドして現れるメニューの設置方法を紹介します。サンプルもダウンロードできますのでぜひご活用ください。
fixedmenu.png

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

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

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

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

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

html
<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の設定です。先ほどのメニューの直後に以下のコードを挿入します。

js
<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の設定です。

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;は、メインコンテンツと重なった場合にメインコンテンツの表示を優先するため必要となります。

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

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

html
<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>

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

CSS
#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を追加すると実装できます。

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あたりを使えばいいと思います。

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
こんにちは。はじめまして
今現在実装されているアドセンスとソーシャルボタンもこの原理なんでしょうか?途中からボワッと出てくる感じのやつです。
長文記事を書くと横が寂しくなってしまって、是非まねをしたいのですが・・・

いつか記事ネタに困ったときが来たら記事にして教えて下さい。

では、失礼します。
【2012/06/15 20:06】 | ちか #- | [edit]
ちかさん

コメントありがとうございます。

これとはちょっと違うのですが
jQueryを使えばそんなに難しいものではないと思います。

ちょうどネタに困っていたので検討してみます!
【2012/06/18 07:51】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。