I’ve tried to replicate the large menu buttons used on the Nintendo Wii Menu using CSS3 and jQuery for the animation.
Demo:
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
To use it you need to have jQuery referenced in your page, for example:
<script type=”text/javascript” src=”jquery-1.5.min.js”></script>
You can optionally use cross browser CSS3 effects but this may slow things down or make text look distorted in some browsers.
Here’s the CSS:
#container
{
position:relative;
width:660px;
height:360px;
margin-left:auto;
margin-right:auto;
background-color:#eee;
}
.button
{
width:200px;
height:100px;
background-color:#ccc;
border:solid 1px #333;
text-align:center;
position:absolute;
font-size:2em;
line-height:3em; /* centers text vertically */
}
Here’s the jQuery code:
<script>
$(document).ready(function(){
$(“.button”).mouseover(function(){
$(this).animate({
width:’240′,
height:’140′,
top:’-=20′,
left:’-=20′,
fontSize:’2.8em’,
opacity:’1′
},200).css(“z-index”,”9″);
});
$(“.button”).mouseout(function(){
$(this).animate({
width:’200′,
height:’100′,
top:’+=20′,
left:’+=20′,
fontSize:’2em’,
opacity:’0.8′
},200).css(“z-index”,”0″);
});
});
</script>
The jQuery uses the mouseover and mouseout events. When the mouse hovers over a button the animate function increases the size of the button and simultaneously moves it upwards and left so that the growing appears to be equal in all directions rather than just down and to the right. The font size is also increased in proportion to the button dimensions and the opacity increased from 0.8 to 1.0 to give greater weighting to the hover button. Finally, the hover button is given a z-index higher than the non hover buttons so that it appears in front of them.
Finally, here’s the HTML:
<div id=”nintendo-container”>
<div class=”button border-radius20 opacity80″ style=”top:20px;left:20px”>Option 1</div>
<div class=”button border-radius20 opacity80″ style=”top:20px;left:230px”>Option 2</div>
<div class=”button border-radius20 opacity80″ style=”top:20px;left:440px”>Option 3</div>
<div class=”button border-radius20 opacity80″ style=”top:130px;left:20px”>Option 4</div>
<div class=”button border-radius20 opacity80″ style=”top:130px;left:230px”>Option 5</div>
<div class=”button border-radius20 opacity80″ style=”top:130px;left:440px”>Option 6</div>
<div class=”button border-radius20 opacity80″ style=”top:240px;left:20px”>Option 7</div>
<div class=”button border-radius20 opacity80″ style=”top:240px;left:230px”>Option 8</div>
<div class=”button border-radius20 opacity80″ style=”top:240px;left:440px”>Option 9</div>
</div>
The HTML uses the style attribute to position each button absolutely.
