Membuat Slide Menu Simpel Responsive di Blog

Membuat Slide Menu Simpel Responsive di Blog

Codepelajar.com - Tidak ada habisnya dalam berkarya membuat desain website dengan HTML dan CSS, dipadukan dengan trik Javascript yang sekarang saya buat ini. Membuat menu samping atau side menu yang bisa menyesuaiakan layar device tidak begitu sulit. Cukup tahu cara meletakan kode-kode berikut sobat bisa membuat menu samping di situs blog sobat. Walaupun sudah banyak situs tutorial yang menyediakan membuat menu navigasi ini tapi kali ini saya akan mencoba membagikannya ke sobat yang penasaran cara membuatnya.


Cara Membuat Side Menu Simpel Responsive

Sebelum kelangkah-langkah, sobat bisa melihat demonstrasinya pada tombol berikut ini.


Memasang Side Menu Resposive di Blog

Langkah awal sobat hanya perlu menyalin kode HTML berikut tepat di bawah <body> pada template sobat.

<!-- CODEPELAJAR.COM | HTML -->>
<aside id='side-nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
    <a class='menu-close' onclick='closeMenu()'>
        <div></div>
    </a>
    <div class='site-title'>
<span><a href='https://www.codepelajar.com' title='Kumpulan Tutorial Blogger'>Codepelajar</a></span>
    </div>
    <div class='navigasi'>
        <ul>
            <li><a href='#'>Sidemenu 1</a>
            </li>
            <li><a href='#'>Sidemenu 2</a>
            </li>
            <li><a href='#'>Sidemenu 3</a>
            </li>
            <li><a href='#'>Sidemenu 4</a>
            </li>
            <li><a href='#'>Sidemenu 5</a>
            </li>
            <li><a href='#'>Sidemenu 6</a>
            </li>
            <li><a href='#'>Sidemenu 7</a>
            </li>
        </ul>
    </div>
</aside>

Ganti kode yang tandai dengan properti situs sobat dan sesuiakan. Jika sudah selesai memasang kode HTML-nya, maka selanjutnya sobat mengcopas kode CSS berikut, tempelkan dia tas kode </b:skin> atau </style> pada tempatlate sobat.

/*== CODEPELAJAR.COM | CSS ==*/
/*Navigasi Samping*/
aside#side-nav {
    position: fixed;
    background: #15161b; /*== SESUAIKAN WARNA BACKGROUND =*/
    top: 0;
    left: 0;
    width: 25%;
    color: #fff;
    transition: .5s;
    transform: translate(-100%);
    z-index: 99;
    height: 100%;
    overflow-y: auto
}
aside#side-nav ul {
    margin: 0;
    padding: 0;
}
aside#side-nav ul li {
    list-style: none;
    text-decoration: none;
}
aside#side-nav a {
    color: #fff;
    text-decoration:none;
}
aside#side-nav.active {
    transform: translate(0%)
}
#side-nav .widget-content,
#side-nav .post-summary,
#side-nav .contact-form-widget {
    padding: 3px
}
.navigasi {
    padding: 3px
}
.navigasi li a {
    color: #fff;
    font-size: 14px;
    padding: 15px;
    display: inline-block;
    width: 100%;
    transition: .3s;
    margin-bottom: 3px;
    background: rgba(255, 255, 255, .015);
    border-radius: 3px;
    position: relative
}
.navigasi li a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    background: #fff
}
.navigasi li a:hover {
    background: rgba(255, 255, 255, .05)
}

/* TOMBOL CLOSE MENU */

a.menu-close {
    position: absolute;
    right: 0;
    top: 0;
    height: 86px;
    width: 50px;
}
a.menu-close div {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30px;
    width: 30px;
    background: #fff;
    transform: translate(-50%, -50%);
    border-radius: 50px
}
a.menu-close::before {
    background: #fff;
    height: 5px;
    width: 70%;
    top: 50%;
    right: 50%;
    position: absolute;
    transform: translate(50%, -50%) rotate(45deg)
}
a.menu-close::after {
    height: 5px;
    width: 70%;
    position: absolute;
    top: 50%;
    right: 50%;
    background: #fff;
    transform: translate(50%, -50%) rotate(135deg)
}

/* JUDUL DI MENU */
.site-title {
    padding: 25px 15px;
    background: #15161b;
}
.site-title span a {
    font-size: 150%;
    text-decoration: none;
    color: #fff;
    font-weight: 700
}

/* LAYER SEMI TRANSPARANT */
.aside-mask {
    position: fixed;
    top: 0;
    display: none;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 98;
    overflow: hidden
}
.aside-mask.active {
    display: block
}

a.menu-btn {
    height: 64px;
    width: 64px;
    position: absolute;
    display: inline-block;
    left: 0;
}
a.menu-btn:hover {
    transition: .3s;
    background: rgba(0, 0, 0, 0.5)
}
a.menu-btn div {
    height: 30px;
    width: 30px;
    position: absolute;
    top: 50%;
    background: #222;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    border-radius: 50px;
    box-shadow: 0 0 5px
}
a.menu-btn div::before {
    height: 4px;
    width: 100%;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
/* RESPONSIVE SIDE NAV */
@media (max-width: 768px) {
    aside#side-nav {
        width: 50%
    }
}
@media (max-width: 480px) {
    aside#side-nav {
        width: 70%
    }
}

Warna Background dan Jenis Huruf bisa di sesuaikan dengan keinginan sobat.

CSS pun sudah di pasang maka langkah yang ke-tiga yaitu menempelkan kode javascript berikut tepat di bawah kode </body>

<script>//<![CDATA[
/*== CODEPELAJAR.COM | JAVASCRIPT ==*/
function openMenu() {
    document.getElementById('side-nav').setAttribute('class', 'active')
    document.getElementsByClassName('aside-mask')[0].setAttribute('class', 'aside-mask active')
}
function closeMenu() {
    document.getElementsByClassName('aside-mask')[0].setAttribute('class', 'aside-mask')
    document.getElementById('side-nav').setAttribute('class', '')
}
//]]></script>

Langkah terakhir cara membuat Menu navigasi yaitu dengan memasangkan tombol pemicunya dengan menambakan atribute openMenu() atau sobat bisa menyalin kode berikut dan tempelkan di bawah kode </header> atau diatas kode navigasi situs sobat <nav>


<a class='menu-btn' onclick='openMenu()'>
<div></div>
</a>

Itulah cara simpel bagaimana memasang side menu navigations / menu samping di blog sobat. Caranya cukup simpel karena ini hanya menggunakan trik penambahhan class HTML dengan Javascript dan di atur di CSS. Sobat bisa menerapkannya di blog sekarang juga, dan jika ada kesulitan atau error jangan sungkan untuk bertanya setelah tutorial ini selesai. Nantikan artikel Codepelajar lainnya

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel