Cara Membuat Menu Sidebar

Ardi21_ansyah

Blogger, Tips N' Trick Blogger

Jumat, 13 Februari 2015

Belum ada komentar

Kali ini saya telah membuat Menu Sidebar

Menu Sidebar ini adalah Navigasi atau Menu yang

muncul dari pinggir seperti pada gambar dibawah ini:

Untuk Demonya bisa kalian lihat

→SILAHKAN LIHAT DEMONYA DISINI←

Kalau begitu mari kita mulai membuat Tips N' Trick Cara Membuat Menu Sidebar

First, Masukkan kode CSS berikut di atas ]]></b:skin> atau </style>

#menu {
    position: fixed;
    top: 0;
    left: -300px;

    width: 300px;
    height: 100%;
    padding: 50px 30px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-transition: all .3s ease-in;
       -moz-transition: all .3s ease-in;
         -o-transition: all .3s ease-in;
            transition: all .3s ease-in;
    text-align: center;

    background-color: #fff;
}
#menu .brand {
    height: 51px;

    font-size: 70px;
    font-weight: 900;
    line-height: .6;

    color: #ddd;
}
#menu ul {
    color: #fff;
    padding: 0;
    margin-top: 30px;
}

#menu ul li a {
    display: block;

    font-weight: 900;
    line-height: 50px;

    -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
         -o-transition: all .3s ease;
            transition: all .3s ease;
    text-decoration: none;
    text-transform: uppercase;

    color: #232629;
    border-top: 1px solid #eee;
}
#menu ul li:last-child a {
    border-bottom: 1px solid #eee;
}
#menu ul li a:hover {
    letter-spacing: 1px;
}
body.open #menu {
    left: 0;
}
button:focus {
    outline: none;
}
#menu-toggle {
    position: relative;

    width: 51px;
    height: 51px;

    cursor: pointer;

    border: none;
    -webkit-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;
    background: #fff;
}
#menu-toggle:before,
#menu-toggle:after {
    position: absolute;

    content: "";
    content: "";
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;

    background-color: #232629;
}

#menu-toggle:before {
    top: 12px;
    left: 25px;

    width: 1px;
    height: 27px;
}
#menu-toggle:after {
    top: 25px;
    left: 12px;

    width: 27px;
    height: 1px;
}

body.open button#menu-toggle:before,
body.open button#menu-toggle:after {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}

Second kalian letakan kode ini dibawah </header>

<nav id="menu" role="navigation">
<div class="brand">21</div>
 <ul>
  <li><a href="URL YANG DITUJU">NAMA</a></li>
  <li><a href="URL YANG DITUJU">NAMA</a></li>
  <li><a href="URL YANG DITUJU">NAMA</a></li>
 </ul>
</nav>
<button id="menu-toggle"></button>

Last kalian masuka kode ini di atas kode </body> atau </head>

<script>
//Exelent little functions to use any time when class modification is needed
function hasClass(ele, cls) {
    return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

//Add event from js the keep the marup clean
function init() {
    document.getElementById("menu-toggle").addEventListener("click", toggleMenu);
}

//The actual fuction
function toggleMenu() {
    var ele = document.getElementsByTagName('body')[0];
    if (!hasClass(ele, "open")) {
        addClass(ele, "open");
    } else {
        removeClass(ele, "open");
    }
}

//Prevent the function to run before the document is loaded
document.addEventListener('readystatechange', function() {
    if (document.readyState === "complete") {
        init();
    }
});
</script>