Membuat Menu Wrapper Melayang Di Atas Blog

Membuat Navigasi Menu Fixed Full RotateX - Seperti yang terlihat pada umumnya di blog, Membuat Menu Navigasi akan dapat merangkum beberapa file atau tulisan anda yang tersusun dengan rapi dalam satu paket yaitu Menu Navigasi. Melanjutkan pembahasan sebelumnya tentang Membuat Menu Wrapper Melayang Di Atas Blog, saya menambahkan beberapa menu yang terletak diatas header dengan menggunakan Fixed Full RotateX seperti yang terlihat diatas header blog ini.

Kode Fixed bertujuan bilamana fungsi scroll mouse digeser menu tesebut akan tetap berada di posisi semestinya karena tidak akan ikut bergeser mengikuti arah scroll, sehingga walau pengunjung berada atau diposisi kolom komentar masih dapat melihat menu tersebut, sedangkan Full RotateX merupakan gaya untuk memanggil drop down menu apabila salah satu menu terlintas oleh scroll mouse.

Apabila ingin Membuat Navigasi Menu Fixed Full RotateX di blog, berikut kode CSS dan HTML yang dapat anda copy untuk keindahan blog anda :

#menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
.menu3Dflip {border-bottom:2px solid #cecece;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; }
.menu3Dflip ul.nav li {display:inline-block; display:inline;}
.menu3Dflip 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; }
.menu3Dflip ul.nav li {float:left; display:block; padding:0 4px;}
.menu3Dflip ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menu3Dflip ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menu3Dflip ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#fff;}
.menu3Dflip ul.nav li:hover a.top-a {background:red; 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); }
.menu3Dflip 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; }
.menu3Dflip ul.nav div.left {left:auto; right:4px;} .menu3Dflip 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); }
.menu3Dflip ul.nav div ul.colLeft {margin-left:10px;}
.menu3Dflip ul.nav div ul.colRight {margin-right:10px;}
.menu3Dflip ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menu3Dflip ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menu3Dflip ul.nav div ul li:last-child {border:0;}
.menu3Dflip 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMtJtpxETrzNYVraHYusB_NyZUc9Uy9np8w2-TwEpgbCjPlwkn7oowTn_1_BBkma6WFdLKmWwmDIZWNHwQhxaZ0LCxlmii7ad6_Vrr9Uc3AxYed4RKdg0wKDfAkAWpduEFRxtU25qCvuQ/h120/arrow.gif) no-repeat left center;}
.menu3Dflip ul.nav div ul li a:hover {color:red; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMtJtpxETrzNYVraHYusB_NyZUc9Uy9np8w2-TwEpgbCjPlwkn7oowTn_1_BBkma6WFdLKmWwmDIZWNHwQhxaZ0LCxlmii7ad6_Vrr9Uc3AxYed4RKdg0wKDfAkAWpduEFRxtU25qCvuQ/h120/arrow.gif) no-repeat 1px center;}
.menu3Dflip ul.nav div.col1 {width:160px;}
.menu3Dflip ul.nav div.col2 {width:310px;}
.menu3Dflip ul.nav div.col3 {width:460px;}
.menu3Dflip ul.nav li:hover div { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); }

<div id='menufixed'>
<div class='menu3Dflip'>
    <ul class='nav'>
        <li><a expr:href='data:blog.homepageUrl' target='_blank'><b>Home</b></a></li>
        <li><a class='top-a' href='http://sahabatblogger77.blogspot.com' target='_blank'><b>Menu 1</b></a>
        <div class='col3'>
            <ul class='colLeft'>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 1</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 2</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 3</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 4</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 5</a></li>
            </ul>
            <ul class='col'>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 6</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 7</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 8</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 9</a></li>
            </ul>
            <ul class='colRight'>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 10</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 11</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 12</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 13</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='href='http://sahabatblogger77.blogspot.com' target='_blank'><b>Menu 2</b></a>
        <div class='col2'>
            <ul class='colLeft'>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 1</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 2</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 3</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 4</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 5</a></li>
            </ul>
            <ul class='colRight'>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 6</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 7</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 8</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 9</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='href='http://sahabatblogger77.blogspot.com' target='_blank'><b>Menu 3</b></a>
        <div class='col1'>
            <ul class='colSingle'>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 1</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 2</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 3</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 4</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 5</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='href='http://sahabatblogger77.blogspot.com' target='_blank'><b>Menu 4</b></a>
        <div class='col2 left'>
            <ul class='colLeft'>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 1</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 2</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 3</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 4</a></li>
            </ul>
            <ul class='colRight'>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 5</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 6</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 7</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 8</a></li>
                <li><a href='href='http://sahabatblogger77.blogspot.com' target='_blank'>Sub Menu 9</a></li>
            </ul>
        </div>
        </li>
        <li><a class='top-a' href='href='http://sahabatblogger77.blogspot.com' target='_blank'><b>Menu 5</b></a></li>
    </ul>
  <div style='text-align:left;position:absolute;position: fixed;top: 0;left: 5px;z-index: 999;overflow: hidden;'><img alt='Logo Blog' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzXgJU-3a_RHRZ5_NSthjZlKk1UItxxSfldO2MTfvPL4rrHC4x7jc0owaSEe-f7QMUoiioDiT6aApNbCLzhp_7dT2C-gtf6ctn-fRY3voTfvYGgs45nXJAStucFCkloQGDd-BooH8JG3Y/s200/unduhan+(3).jpg' width='40'/></div><div style='text-align:center;position:absolute;position: fixed;left: 52px;z-index: 999;overflow: hidden;color:white;font-weight:bold;margin-top:-34px;border-bottom:3px solid red;'>SAHABAT BLOGGER 77</div>
</div>
</div>

Keterangan -

1. Letakkan Kode CSS diatas atau sebelum kode ]]></b:skin>
2. Copy Kode HTML, lalu Paste dibawah kode pembuka <body>
3. Pratinjau Template, jika terlihat Ok, lalu Simpan Template dan lihat hasilnya
4. Jika ada posisi blog yang tertutupi, cari kode #header{...} lalu sesuaikan margin topnya dengan menambahkan kode ( ;margin-top:30px; ), simpan kembali template dan lihat hasilnya

Namun apabila anda mengalami kesulitan dalam meng-Edit Template, hapus semua kode tadi yang sebelumnya sudah terpasang, dan simpan Kode CSS dan HTML pada widget HTML/Javascript. Caranya satukan kode CSS dan HTML diatas lalu tambahkan script <style type="text/css">Kode CSS</style>Kode HTML.

Contoh -

<style type="text/css">

#menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
.menu3Dflip {border-bottom:2px solid #cecece;..................;}

</style>

 <div id='menufixed'>
<div class='menu3Dflip'>
    <ul class='nav'>
        <li><a class='top-a' href='http://sahabatblogger77.blogspot.com' target='_blank'><b>Home</b></a>
        <li><a class='top-a' href='http://sahabatblogger77.blogspot.com' target='_blank'><b>Menu 1</b></a>
        <div class='col3'>
            <ul class='colLeft'>

Terakhir simpan perubahan.
Demikian akhir Membuat Navigasi Menu Fixed Full RotateX, semoga bermanfaat.

Artikel Terkait: