キャラクターがぴょこんと飛び出すメニューの作り方

解決済

質問者：rossi46mail
質問日時：2012/06/22 14:37
回答数：2件

http://www.chikinramen.jp/chikirars/character01. …

上記のサイトの様に、マウスオーバーでキャラクターがぴょこんと飛び出してくるメニューを作りたいのですが、そういったJavaScriptが掲載されているサイトはありますでしょうか。
それに近い
FreshBottomSlideOutMenuというのは見つけたのですが、メニュー自体が上に飛び出すのではなくて、メニューからイラストが飛び出すのを探しています。

知っている方いらっしゃれば教えて下さい。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.2

回答者： whiteRaven
回答日時：2012/06/22 17:53

飛び出す画像がそれぞれ違うとなると使えないですが…

それっぽい事が出来ると思います。

easing プラグインを使用すると、飛び出た感を出しやすいと思います。
#menuBg の背景を画像にすれば良い感じかと。

アニメーションの時間の微調節や、位置など、非常に適当にやってます。

こんな感じでどうでしょう。

--header ------
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7. …
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#mainMenu ul li').hover(function(){
var posiY = $(this).index('li');
var posi = ((posiY+1)*100)-70; //ここで、左右位置を微調節
$('#menuBg').text(posi)
$('#menuBg').css({
left:posi,
});
$('#menuBg').animate({
top:'50px' //ここで、縦位置調整飛び出したときの位置
},'fast','easeOutBounce')
},function(){
$('#menuBg').animate({
top:'100px' //ここで、縦位置調整引っ込んだときの位置（メニューバーで隠れるように）
},'fast','easeOutBounce')
});
});
</script>

<style>

*{margin:0px; padding:0px;}
img{border:none;}
ul,li{list-style:none;}

#menuBg{
position:absolute;
background:#09F;
width:30px;
height:30px;
top:100px;
}
#mainMenu{
}
#mainMenu ul:after{
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}
#mainMenu ul li a{
display:block;
padding:30px auto;
background:#aaa;
height:30px;
}
#mainMenu ul li{
position:relative;
float:left;
width:100px;
top:100px;
z-index:100;　/* 横メニューで、飛び出す前の画像を隠すために z-indexを調整 */
}

</style>

--header ------
--body---------

<div id="mainMenu">
<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
</ul>
<div id="menuBg"></div>
</div>

--body---------