rcarmo · April 12, 2011 16:41
diff --git a/iPad-like CSS3 popup b/iPad-like CSS3 popup
 <!DOCTYPE html> 
 <html lang="en"> 
 <head> 
    <meta charset="utf-8" /> 
    <title>HTML5 iPad Popup Menu</title>
 <meta name="viewport" content="width=device-width, maximum-scale=1.0" />

 <style>

 body{
    font-family: sans-serif;
    padding: 10px;
 }

 a{
    text-decoration: none;
    color: inherit;
 }

 #page {
    text-align: center;
 }

 .shareme{
    display: inline-block;
    color: #fff;
    background-color: #333;
    padding: 10px;
 }

 #share_menu{
    position: absolute;
    left: -1000px;
    padding: 20px 0px 10px;
    background: -webkit-canvas(menu_background) no-repeat;
    -webkit-transition: opacity 300ms ease-out;
    -moz-transition: opacity 300ms ease-out;
 }

 #share_menu a{
    display: block;
    margin: 7px 16px;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    border-radius: 5px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#edeff3));
    background-image: -moz-linear-gradient(top, #fff, #edeff3);
 }

 #share_menu a:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#8ad), to(#26d));
    background-image: -moz-linear-gradient(top, #8ad, #26d);
    color: white;
 }

 .hide { 
    opacity: 0; 
 }

 .show {
    opacity: 1;  
 }

 #moz_background{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: -1;
 }

 </style>
 <script>

 function initMenu(){
    
    var menu = document.getElementById('share_menu');
    
    drawMenuBackground(menu.offsetWidth, menu.offsetHeight);

    menu.addEventListener('webkitTransitionEnd', function(e){
        if(menu.getAttribute('class') == 'hide'){
            menu.style.setProperty('left','-1000px','');
        }
    },true);

    menu.addEventListener('transitionend', function(e){
        if(menu.getAttribute('class') == 'hide'){
            menu.style.setProperty('left','-1000px','');
        }
    }, true);
 
    menu.setAttribute('class', 'hide');

 }

 function drawMenuBackground(rectWidth, rectHeight){
    var sb = 8;
    if(document.getCSSCanvasContext){
        var context = document.getCSSCanvasContext('2d', 'menu_background', rectWidth + sb * 2, rectHeight + sb * 2);    
    } else {
        var menu = document.getElementById('share_menu');
        var mycanvas = document.createElement('canvas');
        mycanvas.setAttribute('id','moz_background');
        mycanvas.setAttribute('width', rectWidth + sb * 2);
        mycanvas.setAttribute('height', rectHeight + sb * 2);

        menu.appendChild(mycanvas);

        var context = mycanvas.getContext('2d');
   }

    var arrowHeight = 20;
    var radius = 6;
    var lineWidth = 1;
    var pad = lineWidth/2;
    var xs = pad + sb;
    var ys = pad + arrowHeight;
    var xe = rectWidth - pad - sb; 
    var ye = rectHeight - pad - sb;
 

    var gradient = context.createLinearGradient(rectWidth/2, 0, rectWidth/2, arrowHeight * 2);
    gradient.addColorStop(0, '#eee'); 
    gradient.addColorStop(1, '#151d31'); 

    context.beginPath();

    context.lineJoin = 'miter';
    
    context.moveTo(xs + radius, ys);
    
    context.lineTo(rectWidth/2 - (arrowHeight + pad), ys);
    context.lineTo(rectWidth/2, pad);
    context.lineTo(rectWidth/2 + (arrowHeight + pad), ys);
    
    context.lineTo(xe - radius, ys);
    
    context.arcTo(xe, ys, xe, ys + radius, radius);
    
    context.lineTo(xe, ye - radius);
    context.arcTo(xe, ye, xe - radius, ye, radius);
    
    context.lineTo(xs + radius, ye);
    context.arcTo(xs, ye, xs, ye - radius, radius);
    
    context.lineTo(xs, ys + radius);
    context.arcTo(xs, ys, xs + radius, ys, radius);

    context.shadowBlur = sb;
    context.shadowColor = "black";
    
    context.fill();
    context.globalAlpha=0;
    context.shadowBlur = 0;
    context.fillstyle = "transparent";
    context.fill();

    
    context.fillStyle = gradient;
    
    context.globalAlpha = .95;
    context.fill();
    context.globalAlpha=1;
    context.strokeStyle = '#48484a';
    context.lineWidth = lineWidth;
    context.stroke();
 }



 function showMenu(el){
    var sb = 8;
    var menu = document.getElementById('share_menu');

    var targetLeft = el.offsetLeft;
    var targetBottom = el.offsetHeight;
    var targetWidth = el.offsetWidth;    
    var menuWidth = menu.offsetWidth;

    var menuLeft = targetLeft + (targetWidth/2) - (menuWidth/2);
    
    menu.style.setProperty('top', (targetBottom + 8) + 'px','');
    menu.style.setProperty('left', menuLeft + 'px','');

    menu.setAttribute('class', 'show');

    menu.onclick = function(e){
        if(e.target.tagName.toLowerCase() == 'a'){
            var type = e.target.innerHTML;
            var link = el.getAttribute('href');
            alert(type + 'ing ' + link);
            menu.setAttribute('class','hide');
        }
    }
 }


 </script>
 </head> 
 <body onload="initMenu();"> 
 <div id="page">
    <div>
    <a class="shareme" href="#" onclick="showMenu(this);return false">Share Me</a>
    </div>
    <p>
    This is a variation on Russell's iPad-like popup menu with a few gradient tweaks and a simple drop shadow (enlarging it to become a pixel-perfect copy to the iPad's is left as an exercise to the reader).
    </p>
 </div>

 <div id="share_menu">
    <a href="#">Tweet</a>
    <a href="#">Hey Russell!</a>
    <a href="#">Email</a>
 </div>
 
 </body>
 </html>