Membuat Navigasi Menu Fixed Full RotateX

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;}

.text-logo { 
   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;}

.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 li:last-child {border:0;}
.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 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/AVvXsEhqbPQJFTn4PjkxDR0jjZZSnMQnRM_5aqyBxGlGKQH91LR-6yWsO28nobIMLqDclFLf75g4XKycHa2oUwGpsQ77EOTc-HGv7oiVdVxutbVhQjVbMJiMyj4D6rESuwb-CQNf28aohQJE0eQ/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/AVvXsEhqbPQJFTn4PjkxDR0jjZZSnMQnRM_5aqyBxGlGKQH91LR-6yWsO28nobIMLqDclFLf75g4XKycHa2oUwGpsQ77EOTc-HGv7oiVdVxutbVhQjVbMJiMyj4D6rESuwb-CQNf28aohQJE0eQ/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);

.logo {
   text-align:left;position:absolute;
   position: fixed;top: 0;left: 5px;
   z-index: 999;overflow: hidden;}

<div id='menufixed'>
  <div class='menu3Dflip'>
    <ul class='nav'>
      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
      <li><a class='top-a' href='http://sahabatblogger77.blogspot.com'>Menu 1</a>
<div class='col3'>
    <ul class='colLeft'>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 1</a></li>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 2</a></li>
      //dan seterusnya.....
      <li>....</li>
      <li>....</li>
    </ul>
  <ul class='col'>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 1</a></li>
      //dan seterusnya.....
      <li>....</li>
      <li>....</li>
  </ul>
    <ul class='colRight'>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 10</a></li>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 11</a></li>
      //dan seterusnya.....
      <li>....</li>
      <li>....</li>
    </ul>
</div>
      </li>
      <li><a class='top-a' href='http://sahabatblogger77.blogspot.com'>Menu 2</a>
<div class='col2'>
    <ul class='colLeft'>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 1</a></li>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 2</a></li>
      //dan seterusnya.....
      <li>....</li>
      <li>....</li>
    </ul>
      <ul class='colRight'>
        <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 2</a></li>
      //dan seterusnya.....
      <li>....</li>
      <li>....</li>
    </ul>
</div>
      </li>
      <li><a class='top-a' href='http://sahabatblogger77.blogspot.com'>Menu 3</a>
<div class='col1'>
    <ul class='colSingle'>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 1</a></li>
      //dan seterusnya.....
      <li>....</li>
      <li>....</li>
    </ul>
</div>
      </li>
      <li><a class='top-a' href='http://sahabatblogger77.blogspot.com'>Menu 4</a>
<div class='col2 left'>
    <ul class='colLeft'>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 1</a></li>
      //dan seterusnya.....
      <li>....</li>
      <li>....</li>
    </ul>
    <ul class='colRight'>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 1</a></li>
      //dan seterusnya.....
      <li>....</li>
      <li>....</li>
    </ul>
</div>
      </li>
      <li><a class='top-a' href='http://sahabatblogger77.blogspot.com'>Menu 5</a>
    </ul>

<div class='logo'>
<img alt='Logo Blog' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl-5K1zWK6PMfQ8Lg1TfsSs8WTlKIzhN_xsmjnzLKSTyL-PAFlx2YX9R7avmOfs_nl4vva5feoiwyVJ6MqKrQu-nmPkHWA6TctmQcwBbXDa5L98WW54BSeUuSRmwKNHGvrrYOw6GAVUIM/s200/unduhan+(3).jpg' width='40'></div>

<div class='text-logo'>
SAHABAT BLOGGER 77
</div>
  </div><!!..ending to class='menu3Dflip'..!!>
</div><!!..ending to id='menufixed'..!!>

Keterangan -

1. Untuk CSS letakkan 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 Anda, maka hasilnya akan seperti ini:

DEMO SHOW



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 tag pembungkus elemen seperti ini:
<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.

Telah diperbaharui dan di Desain Ulang
Oleh: Devy Indriyani at "21 September 2014"

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Navigasi Menu Fixed Full RotateX
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

http://sahabatblogger77.blogspot.com/2014/01/membuat-vavigasi-menu-fixed-full-rotatex.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77