Cara Membuat Floating (Fixed) Menu di Blog

Cara Membuat Floating (Fixed) Menu di Blog - Secara singkatnya floating atau fixed menu merupakan sebuah navigasi menu yang terdapat pada sebuah blog dan letaknya biasanya di taruh pada bagian atas header bilamana fungsi scroll pada mouse di geser menu tersebut akan tetap nampak pada posisi seperti semula karena menu tersebut tidak bergeser mengikuti arah scroll mouse.

Tidak sedikit blogger yang menggunakan floating atau fixed menu untuk mempercantik desain blog mereka dan memudahkan visitor dalam menemukan artikel yang mereka cari didalam menu navigasi yang sudah tersusun. Yang lebih menarik lagi pada floating menu ini memiliki style hover 3D pada saat akan menampilkan drop down menu.

Cara pemasangan floating menu atau fixed menu ini juga cukup mudah, sama seperti cara memasang navigasi menu biasanya. Apabila ingin menerapkan ke dalam blog, berikut langkah-langkah Cara Membuat Floating (Fixed) Menu di Blog pada blog.

live demo

1. Login terlebih dahulu ke akun blogger.
2. Kemudian pada template pilih Edit HTML.
3. Lalu copy kode CSS berikut ini lalu taruh di atas kode ]]></b:skin>

#menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
.SemuaTutorialku {margin:0 auto; text-align:center; position:relative; height:40px; z-index:999; background:#0091d6; -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; }
.SemuaTutorialku ul.nav li {display:inline-block; display:inline;}
.SemuaTutorialku ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }
.SemuaTutorialku ul.nav li {float:left; display:block; padding:0 4px;}
.SemuaTutorialku ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.SemuaTutorialku ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.SemuaTutorialku ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#fff;}
.SemuaTutorialku ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }
.SemuaTutorialku ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; border-radius:0 0 15px 15px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; }
.SemuaTutorialku ul.nav div.left {left:auto; right:4px;} .SemuaTutorialku ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }
.SemuaTutorialku ul.nav div ul.colLeft {margin-left:10px;}
.SemuaTutorialku ul.nav div ul.colRight {margin-right:10px;}
.SemuaTutorialku ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.SemuaTutorialku ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.SemuaTutorialku ul.nav div ul li:last-child {border:0;}
.SemuaTutorialku ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(https://lh3.googleusercontent.com/-obvJZHCanbY/UkxkGd717_I/AAAAAAAAGQA/bjih8_q74Ws/h120/arrow.gif) no-repeat left center;}
.SemuaTutorialku ul.nav div ul li a:hover {color:#09c; background:transparent url(https://lh3.googleusercontent.com/-obvJZHCanbY/UkxkGd717_I/AAAAAAAAGQA/bjih8_q74Ws/h120/arrow.gif) no-repeat 1px center;}
.SemuaTutorialku ul.nav div.col1 {width:160px;}
.SemuaTutorialku ul.nav div.col2 {width:310px;}
.SemuaTutorialku ul.nav div.col3 {width:460px;}
.SemuaTutorialku ul.nav li:hover div { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } 

4. Selanjutnya copy kode HTML berikut ini lalu taruh di bawah kode <body> atau bisa juga ke dalam widget HTML/Javascript.

<div id='menufixed'>
<div class='SemuaTutorialku'>
    <ul class='nav'>
        <li><a class='top-a' href='http://semua-tutorialku.blogspot.com'><b>Home</b></a></li>
        <li><a class='top-a' href='http://semua-tutorialku.blogspot.com'><b>Menu 1</b></a>
        <div class='col3'>
            <ul class='colLeft'>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 4</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 5</a></li>
            </ul>
            <ul class='col'>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 6</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 7</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 8</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 9</a></li>
            </ul>
            <ul class='colRight'>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 10</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 11</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 12</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 13</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://semua-tutorialku.blogspot.com'><b>Menu 2</b></a>
        <div class='col2'>
            <ul class='colLeft'>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 4</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 5</a></li>
            </ul>
            <ul class='colRight'>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 6</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 7</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 8</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 9</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://semua-tutorialku.blogspot.com'><b>Menu 3</b></a>
        <div class='col1'>
            <ul class='colSingle'>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 4</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 5</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://semua-tutorialku.blogspot.com'><b>Menu 4</b></a>
        <div class='col2 left'>
            <ul class='colLeft'>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 4</a></li>
            </ul>
            <ul class='colRight'>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 5</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 6</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 7</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 8</a></li>
                <li><a href='http://semua-tutorialku.blogspot.com'>Sub Menu 9</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='http://semua-tutorialku.blogspot.com'><b>Menu 5</b></a></li>
    </ul>
</div>
</div> 

5. Langkah terakhir Simpan template dan selesai sudah bisa di lihat hasilnya.

Tips: Bagi sobat yang ingin memasang fixed menu ini, tetapi malas untuk edit HTML template. Maka Sobat bisa langsung menaruh seluruh kode diatas kedalam widget HTML/Javascript.

Caranya gabungkan antara CSS dan HTML namun sebelumnya jangan lupa untuk menambahkan kode <style type="text/css"> pada awal CSS dan tambahkan juga kode </style> pada akhir CSS.
Selanjutnya kode HTML yang terdapat pada point 4 taruh dibawahnya kode </style> langkah terakhir klik Simpan.