可変メニューの作成方法

BACK

サンプル
 ダウンロード

各ウィンドウの幅は190PX、高さ50PXに設定し、ロールオーバーすることでmenu.pngの位置が可変するように画像を作成します。

menu.css

メニューの各ウィンドウの幅と可変する時間を設定します。

 function main_menus(){
	$('.menus').menus({  
        maxWidth: 190,  ※ウィンドウの幅
		duration: 800, ※開きのスピード 
        easing: 'easeOutQuint'  
    });  
}

sample.html

#menu1 a {
	background-position:0px 0px;
}
#menu1 a:hover, #menu1 {　※「HOME」にマウスを乗せるとmenu.pngの位置が横0px、縦-50pxの位置へ移動
	background-position:0px -50px;
}
#menu2 a {
	background-position:-190px 0px;
}
#menu2 a:hover, #menu2 {　※「BLOG」にマウスを乗せるとmenu.pngの位置が横-190px、縦-50pxの位置へ移動
	background-position:-190px -50px;
}
#menu3 a {
	background-position:-380px 0px;
}
#menu3 a:hover, #menu3 {　※「ABOUT」にマウスを乗せるとmenu.pngの位置が横-380px、縦-50pxの位置へ移動
	background-position:-380px -50px;
}
#menu4 a {
	background-position:-570px 0px;
}
#menu4 a:hover, #menu4 {　※「INFORMATION」にマウスを乗せるとmenu.pngの位置が横-570px、縦-50pxの位置へ移動
	background-position:-570px -50px;
}
#menu5 a {
	background-position:-760px 0px;
}
#menu5 a:hover, #menu5 {　※「LINK」にマウスを乗せるとmenu.pngの位置が横-760px、縦-50pxの位置へ移動
	background-position:-760px -50px;
}
#menu6 a {
	background-position:-950px 0px;
}
#menu6 a:hover, #menu6 {　※「CONTACT」にマウスを乗せるとmenu.pngの位置が横-950px、縦-50pxの位置へ移動
	background-position:-950px -50px;
}

sample.htmlやmenu.cssを参考に自分の好みに設定してください。

BACK