Meny iFrame with Function onload Event

Meny iFrame adalah sebuah aplikasi keren untuk membantu sobat blogger dalam belajar :D

HTML

<div class="meny">
            <h2>Usefully Links</h2>
            <ul>
                <li><a target="myIframe" href="http://www.wikipedia.org/">Wikipedia</a></li>
                <li><a target="myIframe" href="http://www.w3.org/">w3</a></li>
                <li><a target="myIframe" href="http://www.w3schools.com">w3schools</a></li>
                <li><a target="myIframe" href="http://www.bing.com">BING</a></li>
                <li><a target="myIframe" href="http://www.aol.com/">AOL</a></li>
                <li><a target="myIframe" href="http://www.bbc.co.uk/">BBC</a></li>
                <li><a target="myIframe" href="http://jquery.com/">jQuery</a></li>
                <li><a target="myIframe" href="http://www.microsoft.com/">Microsoft</a></li>
                <li><a target="myIframe" href="http://www.amazon.com/">Amazon</a></li>                
                <li><a target="myIframe" href="http://addictomatic.com/">Addictomatic</a></li>            
                <li><a target="myIframe" href="http://attackofthecute.com/">Attack of the cute</a></li>
                <li><a target="myIframe" href="http://lea.verou.me/ft2010/">CSS3 presentation</a></li>
                <li><a target="myIframe" href="http://lab.hakim.se/meny/">Meny</a></li>
            </ul>
        </div>
        <div class="meny-arrow"></div>
        <div class="contents">
<iframe src="" name="myIframe" class="frame" style="background:#fff...

CSS

/**
 * The CSS in this file is for styling the demo page, 
 * Meny's critical styles (such as transforms) are applied
 * via JavaScript.
 *
 * See the documentation here: https://github.com/hakimel/meny#meny
 *
 * @author Hakim El Hattab | http://hakim.se
 */

* {
    margin: 0;
    padding: 0;
}
html, 
body {
    height: 100%;
    overflow: hidden;
}
body {
    background-color: #222;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
    background-repeat: repeat;

    font-family: 'Lato', Helvetica, sans-serif;
    font-size: 16px;
    color: #222;
}
a {
    color: #c2575b;
    text-decoration: none;

    -webkit-transition: 0.15s color ease;
       -moz-transition: 0.15s color ease;
        -ms-transition: 0.15s color ease;
         -o-transition: 0.15s color ease;
            transition: 0.15s color ease;
}
    a:hover {
        color: #f76f76;
    }
h1, 
h2 {
    font-size: 24px;
}
.meny {
    display: none;
    padding: 20px;
    overflow: auto;
    background: #333;
    color: #eee;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
    .meny ul {
        margin-top: 10px;
    }
        .meny ul li {
            display: inline-block;
            width: 200px;
            list-style: none;
            font-size: 20px;
            padding: 3px 10px;
        }
            .meny ul li:before {
                content: '-';
                margin-right: 5px;
                color: rgba( 255, 255, 255, 0.2 );
            }
/**
 * Hint graphic that appears while menu is inactive
 */
.meny-arrow {
    position: absolute;
    z-index: 10;
    border: 10px solid transparent;
    -webkit-transition: opacity 0.4s ease 0.4s; 
       -moz-transition: opacity 0.4s ease 0.4s; 
        -ms-transition: opacity 0.4s ease 0.4s; 
         -o-transition: opacity 0.4s ease 0.4s; 
            transition:...

JavaScript

/*!
 * meny 1.1
 * http://lab.hakim.se/meny
 * MIT licensed
 *
 * Created by Hakim El Hattab (http://hakim.se, @hakimel)
 */
var Meny = {
    // Creates a new instance of Meny
    create: function( options ) {
        return (function(){

            // Make sure the required arguments are defined
            if( !options || !options.menuElement || !options.contentsElement ) {
                throw 'You need to specify which menu and contents elements to use.';
            }

            // Make sure the menu and contents have the same parent
            if( options.menuElement.parentNode !== options.contentsElement.parentNode ) {
                throw 'The menu and contents elements must have the same parent.';
            }

            // Constants
            var POSITION_T = 'top',
                POSITION_R = 'right',
                POSITION_B = 'bottom',
                POSITION_L = 'left';

            // Feature detection for 3D transforms
            var supports3DTransforms =  'WebkitPerspective' in document.body.style ||
                                        'MozPerspective' in document.body.style ||
                                        'msPerspective' in document.body.style ||
                                        'OPerspective' in document.body.style ||
                                        'perspective' in document.body.style;
            
            // Default options, gets extended by passed in arguments
            var config = {
                width: 300,
                height: 300,
                position: POSITION_L,
                threshold: 40,
                overlap: 6,
                transitionDuration: '0.5s',
                transitionEasing: 'ease'
            };

            // Cache references to DOM elements
            var dom = {
                menu: options.menuElement,
                contents: options.contentsElement,
                wrapper: options.menuElement.parentNode,
                cover: null
        ...