GO Blog

Menu navigasi adalah hal yang di perlukan sebuah blog untuk mengarahkan seorang pengunjung ke halaman tertentu, buat sobat yang belum memasang ini di blog milik sendiri sekarang saya share caranya dengan tampilan responsive yang bisa menyesuaikan di semua resolusi tampilan. menu ini sederhana, hanya sebagai dasar saja jika ingin lebih menarik silahkan sobat modifikasi atau permak sendiri sesuai dengan keinginan.

untuk memasang menu ini silahkan ikuti langkah yang saya jelaskan di bawah ini dengan teliti agar tidak terjadi kesahan.



Pertama tentunya sobat harus masuk ke editor template blogger
sesuah itu pilih pengaturan template dan letakkan css di bawah ini bersama css yang lain atau di atas kode </style>

/* --DB Menu Navigation -- */
.db-art-menu {
 width:100%;
 padding:0 auto;
 margin:0 auto;
}
#nav span {
    display: none;
}
#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background-color: #F5F5F5;
    border-bottom: 5px solid #333333;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    position: relative;
    width: 98%;
}
#nav ul.subs {
    background-color: #333;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #222;
    display: none;
    left: 0;
    padding: 2%;
    position: absolute;
    top: 54px;
    width: 96%;
}
#nav > li {
    border-bottom: 5px solid transparent;
    float: left;list-style:none;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
#nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}
#nav > li > a {
    color: #333333;
    display: block;
    font-size: 1.3em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #F55856;
    color: #FFFFFF;
}
#nav li.active > a {
    background-color: #333333;
    color: #FFFFFF;
}

/* submenu */
#nav li:hover ul.subs {
    display: block;
}
#nav ul.subs > li {
    display: inline-block;
    float: none;list-style:none;
    padding: 10px 1%;
    vertical-align: top;
    width: 33%;
}
#nav ul.subs > li a {
    color: #777777;
    line-height: 20px;
}
#nav ul li a:hover {
    color: #F55856;
}
#nav ul.subs > li > a {
    font-size: 1.3em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
#nav ul.subs > li li {
    float: none;
    padding-left: 8px;
    -moz-transition: padding 150ms ease-out 0s;
    -ms-transition: padding 150ms ease-out 0s;
    -o-transition: padding 150ms ease-out 0s;
    -webkit-transition: padding 150ms ease-out 0s;
    transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
    padding-left: 15px;
}

/* db responsive rules */
@media all and (max-width : 1024px) {
    #nav > li {
        float: none;
        border-bottom: 0;
        margin-bottom: 0;
    }
    #nav ul.subs {
        position: relative;
        top: 0;
    }
    #nav li:hover ul.subs {
        display: none;
    }
    #nav li #s1:target + ul.subs,
    #nav li #s2:target + ul.subs {
        display: block;
    }

    #nav ul.subs > li {
        display: block;
        width: auto;
    }
}

untuk memasang menunya silahkan copy dan letakkan kode di bawah ini di mana saja yang sobat inginkan, tapi biasanya menu navigasi seperti ini bisa di area header di atas kode </header> atau di bawahnya.

<div class='db-art-menu'>
            <ul id="nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="#">menu1</a>
                    <span id="s1"></span>
                    <ul class="subs">
                        <li><a href="#">SUB1</a>
                            <ul>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                            </ul>
                        </li>
                        <li><a href="">SUB2</a>
                            <ul>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#s2">menu2</a>
                    <span id="s2"></span>
                    <ul class="subs">
                        <li><a href="#">SUB1</a>
                            <ul>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">SUb2</a>
                            <ul>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">menu3</a></li>
                <li><a href="#">menu4</a></li>
            </ul>
</div>

untuk sobat yang ingin menu ini tampil melayang tambahkan saja position:fixed; pada css menu ini sehingga menjadi seperti berikut:

.db-art-menu {
 width:100%;
 position:fixed;
}

dan letakkan kode html menunya di bawah tag pembuka body yaitu <body> jangan lupa untuk merubah seluruh link menunya dan simpan hasil perubahan template lalu lihat hasilnya, jika kurang pas di permak lagi sampai srek di hati.