縦ナビゲーション（横スライド）

BACK

---

■　縦ナビゲーション（横スライド）

---

★　メニューを画面全体の左横端につけて、マウスオーバー（カーソルを乗せる）すると
　　右に画像が、スライドします。

　　（左横端でなくても、ＯＫです。）

---

①　設置例画像（下記画像のプロフィールは、カーソルを乗せたときの状態です）

---

②　用意する画像（例）・・・画像の横幅 160px 縦幅30px

・ホーム
・プロフィール
・メッセージ
・プレゼント
・ペタ
・読者
・アメンバー
・なう

---

③　ボタンは下記で作成しました。

http://box.aflat.com/buttonmaker/

---

④　フリースペースまたは、フリープラグインに追加。

<div id="menu_000">
<div id="menu_001"><a href="http://ameblo.jp/アメーバＩＤ/" target="_blank"></a></div>
<div id="menu_002"><a href="http://ameblo.jp/アメーバＩＤ/" target="_blank"></a></div>
<div id="menu_003"><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=アメーバＩＤ" target="_blank"></a></div>
<div id="menu_004"><a href="http://present-shop.ameba.jp/shop/top?toAmebaId=アメーバＩＤ" target="_blank"></a></div>
<div id="menu_005"><a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=アメーバＩＤ&service=blog" target="_blank"></a></div>
<div id="menu_006"><a href="http://blog.ameba.jp/reader.do?bnm=アメーバＩＤ" target="_blank"></a></div>
<div id="menu_007"><a href="http://amember.ameba.jp/amemberRequest.do?oAid=アメーバＩＤ" target="_blank"></a></div>
<div id="menu_008"><a href="http://now.ameba.jp/アメーバＩＤ/" target="_blank"></a></div>
</div>

　◆　下記で自分の各ＵＲＬを得られます
　　　http://ameblo.jp/new-bulue9/entry-10659290062.html#Top

---

★　下記に間違えがあったので修正しました。 */ が抜けていました


⑤　ＣＳＳへ追加

#frame{/* 画面の大きさを変えても位置を変化させない(position:absoluteで有効) */
position:relative;
}
#menu_001 a,#menu_002 a,#menu_003 a,#menu_004 a,#menu_005 a,#menu_006 a,#menu_007 a,#menu_008 a{
position:fixed;/* fixed←ついてくる absolute←ついてこない */
left:0px;/* 右からの位置 */
z-index:100;
display:block;
background-position:-120px 0px;/* (画像の横px-40px)×-1 */
background-repeat:no-repeat;/* 繰り返ししない */
width:160px;/* 画像の横幅 */
height:30px;/* 画像の縦幅 */
}
#menu_001 a{
background-image:url(画像のＵＲＬ①);
top:100px;/* 上からの位置 */
}
#menu_002 a{
background-image:url(画像のＵＲＬ②);
top:140px;/* 上からの位置 */
}
#menu_003 a{
background-image:url(画像のＵＲＬ③);
top:180px;/* 上からの位置 */
}
#menu_004 a{
background-image:url(画像のＵＲＬ④);
top:220px;/* 上からの位置 */
}
#menu_005 a{
background-image:url(画像のＵＲＬ⑤);
top:260px;/* 上からの位置 */
}
#menu_006 a{
background-image:url(画像のＵＲＬ⑥);
top:300px;/* 上からの位置 */
}
#menu_007 a{
background-image:url(画像のＵＲＬ⑦);
top:340px;/* 上からの位置 */
}
#menu_008 a{
background-image:url(画像のＵＲＬ⑧);
top:380px;/* 上からの位置 */
}

　◆　説明

・position:fixed; は、スクロールしても一緒についてきません。
　ついていくようにしたい場合や、左端に以外に設置する場合は
　position:absolute; にします。
・background-position:-120px 0px; の -120pxは、画像の横幅の
　160px の左側が見えるようにするため、横幅マイナス40pxにして
　値をマイナスにします
　160px-40px=120px → -120px
　下記⑥の-120pxも同じです。
・width:160px;　と　height:30px;　は画像の横と縦のpx を指定します。
・/* 上からの位置 */　は、画像と画像の縦位置を考えて指定してください。

---

⑥　フリープラグインへ追加

<script language="JavaScript">
$(function() {
$('#menu_000 a').hover(
function(){
$(this).stop()
.animate({backgroundPosition : '0px 0px'},1000)
},function(){
$(this).stop()
.animate({backgroundPosition : '-120px 0px'},100)
});});
</script>

◆　説明

・1000 は１秒の意味です。（単位はミリ秒）・・・横にスライドするまでの時間を指定します。
・100　は、0.1秒の意味です。（単位はミリ秒）・・・カーソルが離れたときに戻るまでの
　時間を指定します。




◆　少し変化をさせたい場合は、下記です

<script language="JavaScript">
$(function() {
$('#menu_000 a').hover(
function(){
$(this).stop()
.animate({backgroundPosition : '0px 0px'},1000)
.animate({backgroundPosition : '-30px 0px'},100)
.animate({backgroundPosition : '0px 0px'},100)
},function(){
$(this).stop()
.animate({backgroundPosition : '-130px 0px'},100)
});});
</script>

---

BACK