マウスオン時にアニメーションで大きくなったり小さくなったりするjQueryメニューです。
思わず触りたくなるフラットなメニューで閲覧者の遊び心を誘います。
マウスオンで広がる文字だけの丸型メニュー
HTMLサンプル
<div id="sample1">
<div class="wrap">
<ul>
<li><a href="#top"><span>メニュー</span></a></li>
<li><a href="#top"><span>メニュー</span></a></li>
<li><a href="#top"><span>メニュー</span></a></li>
<li><a href="#top"><span>メニュー</span></a></li>
<li><a href="#top"><span>メニュー</span></a></li>
</ul>
</div>
</div>
CSSサンプル
#sample1 ul{margin: 0; text-align: center;}
#sample1 ul li{
display: inline-block;
list-style: none;
width: 100px;
margin: 20px;
}
#sample1 ul li a{
display: block;
margin: 10px;
padding: 0;
width: 100px;
height: 100px;
line-height: 100px;
background-color: #ffb0bd;
border: 5px solid #ff8095;
color: #fff;
font-weight: bold;
text-decoration: none;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#sample1 ul li a:hover{background-color: #ff8095}
jQueryサンプル
$(function(){
// mouseOver時のスタイルを定義
var mouse_on = {
paddingTop: 20,
paddingBottom: 20,
paddingLeft: 20,
paddingRight: 20,
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
marginRight: 0,
}
// mouseOut時のスタイルを定義
var mouse_off = {
paddingTop: 0,
paddingBottom: 0,
paddingLeft: 0,
paddingRight: 0,
marginTop: 20,
marginBottom: 20,
marginLeft: 20,
marginRight: 20,
}
//メニューの設定
$('#sample1 ul li a').hover(function(){
$(this).animate(mouse_on, 100);
},
function(){
$(this).animate(mouse_off, 100);
});
});
スタイルシートの#sample1 ul li aの margin値、jQueryのmargin値及びpadding値を調整すると、丸型の大きさを調整することができます。
マウスオンで広がって画像も拡大される丸型メニュー
HTMLサンプル
<div id="sample2">
<div class="wrap">
<ul>
<li><a href="#top"><img src="./sample.png" alt="メニュー" title="メニュー" /></a></li>
<li><a href="#top"><img src="./sample.png" alt="メニュー" title="メニュー" /></a></li>
<li><a href="#top"><img src="./sample.png" alt="メニュー" title="メニュー" /></a></li>
<li><a href="#top"><img src="./sample.png" alt="メニュー" title="メニュー" /></a></li>
<li><a href="#top"><img src="./sample.png" alt="メニュー" title="メニュー" /></a></li>
</ul>
</div>
</div>
CSSサンプル
#sample2 ul{margin: 0; text-align: center;}
#sample2 ul li{
display: inline-block;
list-style: none;
width: 100px;
margin: 20px;
}
#sample2 ul li a{
display: block;
margin: 20px;
padding: 0;
width: 100px;
height: 100px;
line-height: 100px;
background-color: #ffb0bd;
border: 5px solid #ff8095;
color: #fff;
font-weight: bold;
text-decoration: none;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#sample2 ul li a img{width: 50%; height: 50%; margin: 25%;}
#sample2 ul li a:hover{background-color: #ff8095}
#sample2 ul li a:hover img{width: 100%; height: 100%; margin: 0;}
jQueryサンプル
$(function(){
// mouseOver時のスタイルを定義
var mouse_on = {
paddingTop: 20,
paddingBottom: 20,
paddingLeft: 20,
paddingRight: 20,
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
marginRight: 0,
}
// mouseOut時のスタイルを定義
var mouse_off = {
paddingTop: 0,
paddingBottom: 0,
paddingLeft: 0,
paddingRight: 0,
marginTop: 20,
marginBottom: 20,
marginLeft: 20,
marginRight: 20,
}
//メニューの設定
$('#sample2 ul li a').hover(function(){
$(this).animate(mouse_on, 100);
},
function(){
$(this).animate(mouse_off, 100);
});
});
スタイルシートの#sample2 ul li aの margin値、jQueryのmargin値及びpadding値を調整すると、丸型の大きさを調整することができます。
また、#sample2 ul li a imgのwidth値・height値・margin値、#sample2 ul li a:hover imgのwidth値・height値・margin値で拡大率を調整できます。
#sample2 ul li a imgのwidth値（またはheight値）プラスmargin値、#sample2 ul li a imgのwidth値（またはheight値）プラスmargin値が同じになるように調整してください。
マウスオンで広がって画像の上に文字が表示される丸型メニュー
HTMLサンプル
<div id="sample3">
<div class="wrap">
<ul>
<li><a href="#top"><img src="./home.png" alt="メニュー" /><span>メニュー</span></a></li>
<li><a href="#top"><img src="./home.png" alt="メニュー" /><span>メニュー</span></a></li>
<li><a href="#top"><img src="./home.png" alt="メニュー" /><span>メニュー</span></a></li>
<li><a href="#top"><img src="./home.png" alt="メニュー" /><span>メニュー</span></a></li>
<li><a href="#top"><img src="./home.png" alt="メニュー" /><span>メニュー</span></a></li>
</ul>
</div>
</div>
CSSサンプル
#sample3 ul{margin: 0; text-align: center;}
#sample3 ul li{
display: inline-block;
list-style: none;
width: 100px;
margin: 20px;
}
#sample3 ul li a{
display: block;
margin: 20px;
padding: 0;
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
background-color: #ffb0bd;
border: 5px solid #ff8095;
color: #fff;
font-weight: bold;
text-decoration: none;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#sample3 ul li a:hover{background-color: #ff8095}
#sample3 ul li a:hover img{opacity: 0.3;}
#sample3 ul li span {
color: #fff;
position: absolute;
opacity: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
#sample3 ul li a:hover span{opacity: 1; line-height: 140px;}
jQueryサンプル
$(function(){
// mouseOver時のスタイルを定義
var mouse_on = {
paddingTop: 20,
paddingBottom: 20,
paddingLeft: 20,
paddingRight: 20,
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
marginRight: 0,
}
// mouseOut時のスタイルを定義
var mouse_off = {
paddingTop: 0,
paddingBottom: 0,
paddingLeft: 0,
paddingRight: 0,
marginTop: 20,
marginBottom: 20,
marginLeft: 20,
marginRight: 20,
}
//メニューの設定
$('#sample3 ul li a').hover(function(){
$(this).animate(mouse_on, 100);
},
function(){
$(this).animate(mouse_off, 100);
});
});
スタイルシートの#sample3 ul li a spanの opacity値で表示・非表示を調整しています。
#sample3 ul li a:hover spanのline-height値はマウスオン時のサイズで調整してください。
