[:en]Lanjutan bagian terakhir membuat menu responsif menggunakan css. Buat file mobile.css lalu masukkan script dibawah ini pada baris 1

/*Responsive Styles*/

@media screen and (max-width : 1100px){
    nav{
        font-size: 1em;
    }

    li{
        width: 11%;
        min-width: 100px;
    }

    li a{
        height: 120px;
    }

}

Pada script di atas adalah penambahan responsive style dengan ukuran max 1100px misalnya pada bagian ini cuman ada beberapa penyesuaian ukuran pada tag list induk <li> lalu dilanjutkan untuk yang ukuran max 740px dengan memasukkan script di bawah ini pada baris selanjutnya.

@media screen and (max-width : 760px){
    nav{
        float: left;
        font-size: 1.2em;
    }

    #menu{
        display: none;
    }

    .mobilemenu{
        cursor: hand;
        display: inline-block;
        text-align: center;
        width: 100%;
        height: 40px;
        background: #C46261;
        background-image:url(../images/menu.png);
        background-repeat: no-repeat;
        background-position: 99% center;
        background-size: 32px;
    }

    input[type=checkbox]:checked ~ #menu{
        display: block;
    }   

    li{
        width: 100%;
    }

    li a{
        height: 40px;
        text-align: left;
        text-indent: 50px;
    }

    #icon-home, #icon-art, #icon-ayahasi, #icon-hobi, #icon-kuliah, #icon-nyeloteh, #icon-technoninja{
        display: block;
        background-position: 10px center;
        background-size: 24px;
        height: 30px;
        padding-top: 10px;
    }
}

Penjelasan script :

    #menu{
        display: none;
    }

    .mobilemenu{
        cursor: hand;
        display: inline-block;
        text-align: center;
        width: 100%;
        height: 40px;
        background: #C46261;
        background-image:url(../images/menu.png);
        background-repeat: no-repeat;
        background-position: 99% center;
        background-size: 32px;
    }

    input[type=checkbox]:checked ~ #menu{
        display: block;
    }

id menu diset displaynya none sehingga tidak akan terlihat atau disembunyikan pada kondisi awal. Kemudian class mobilemenu adalah class untuk menampilkan UI seperti berikut, display : inline-block untuk memblok label karena label tidak dapat di blok hanya menggunakan display : blok. Selebihnya properti untuk memberikan warna dan icon menu.

li{
        width: 100%;
    }

    li a{
        height: 40px;
        text-align: left;
        text-indent: 50px;
    }

    #icon-home, #icon-art, #icon-ayahasi, #icon-hobi, #icon-kuliah, #icon-nyeloteh, #icon-technoninja{
        display: block;
        background-position: 10px center;
        background-size: 24px;
        height: 30px;
        padding-top: 10px;
    }

karena pada tampilan mobile ukuran menu akan memenuhi horizontal area maka set lebarnya 100% pada tag <li>. Dan script bawahnya untuk memodifikasi ukuran posisi label menu dan icon menu. Penggunaan koma pada tag css adalah memberikan style yang sama pada kumpulan selector.

Sekian dulu tutorial sederhana dari saya, selamat mencoba dan memodifikasi

[:]