19.1.14
25
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 >>
= TERIMA KASIH =

25 komentar

  1. mantab banget mbak tapi saya gak paham cara ubahnya jadi saya hanya bisa bookmark

    BalasHapus
    Balasan
    1. tidak perlu di ubah, cukup kopi kodenya lalu pastekan pada widget HTM/Javascript, dan ganti http:..sahabatblogger77.blogspot.com dengan url blog mas sarofudin

      Hapus
  2. Keren Mba,,,,, ijin bookmark kapan-kapan bisa nyoba untuk belajar.

    Salam

    BalasHapus
  3. keren mbk
    tapi cantik juga cewek yang dsiamping yah

    BalasHapus
    Balasan
    1. hmmm..dasar bang ronny, tiap kali share posting dengan gambar saya pasti selalu gombal...hadewhh...hehehe.
      but, terimakasih bang sudah berkenan mampir

      Hapus
    2. kalau boleh sih, saya juga mau bawa pulang mbak devinya hehe

      Hapus
  4. sist devy memang cantik sekali yaa :D mas ronny

    BalasHapus
    Balasan
    1. terimakasih sist friska,,jadi GR neh..hehehe
      sist juga cantik ko,,kalu ganteng berarti bukan panggil sist donk tapi mas..hehe

      Hapus
  5. Itu judulnya vavigasi apa navigasi ya mbak.?

    Kebetulan saya lagi ngeblog via hp mbak devy. Jadi belum bisa mempraktekanya. Nanti kalau dah di rumah akan saya cobak menunya. Hehehe terimakasih ya mbak.?

    BalasHapus
    Balasan
    1. upsss... baru nyadar..terimakasih mas sudah di ingatkan,,ntar saya edit dech biar judulnya benar,,

      Hapus
  6. wah menarik juga ya kalau menu navigasinya dibuat kayak getu. jadi ada veriasinya dan juga ada seni nya ya di blog tersebut. Bisa dicoba nih tutorialnya :)

    BalasHapus
  7. wah, siap untuk otak atik dulu nih

    BalasHapus
  8. Mbak, saya udah memasangnya tapi ada kendala kenapa kok bisa naik turun ya ?

    Mohon pencerahannya

    BalasHapus
    Balasan
    1. tambahkan kode ini mas
      potition: fixed;

      Hapus
  9. Memang menarik menu navigasinya, kayak mega dropdown menu. Saya simpen dulu, mau saya coba dulu, ntar kalau hasilnya bagus bisa saya terapkan ke blog utama saya

    BalasHapus
  10. keren kak, kalo cara buat kategori file nya kayak punya kakak, ada gak tutorialnya? Terimakasih.

    BalasHapus
    Balasan
    1. suatu saat akan saya share mas,karena saat ini masih berperang mendesain menu navigasi dan efek pada gambar, sedangkan untuk tutorial widget belum merangkai kodenya,
      sabar ya mas, ditunggu,,hehe

      Hapus
  11. kuk gagal ya?? bagian Kode Html pas dipasang byk yg berwarna merah alias kesalahan kode, solusinya gan..

    BalasHapus
    Balasan
    1. penempatan atau ada beberapa tag kode yang tertinggal saat di copy, sehingga fungsi kode HTML tidak dapat diterima oleh template Anda.

      coba diperhatikan kembali,jika berhasil maka tampilannya akan terlihat seperti menu bar pada blog ini:
      tentang peletakan kode menu navigasi, Anda bisa pelajari di sini

      ► Peletakan Kode Menu Navigasi

      Hapus
  12. makasih mba atas tutornya....

    ijin sedot, hehehe

    BalasHapus
  13. (h) coba coba... eh berhasil... trimakasih mbak tips nya, tapi kalo mau buat biar agak jarang antara menunya gimana mbak..?

    BalasHapus
    Balasan
    1. Devy sudah lihat hasilnya mas, warna yang cukup keren disesuaikan dengan header background menu, agar terlihat lebih rapi atur nilai padding antara menu. lihat kode seperti ini:

      .menu3Dflip ul.nav li a.top-a b {
      display:block;
      padding:0 20px;
      font:bold 14px/30px arial, sans-serif;
      color:#fff;}


      silahkan sesuaikan nilai padding, misalnya padding:0 40px; lalu atur nilai teks center position menjadi seperti ini; font:bold 14px/40px arial,sans-serif;

      sebenarnya kode-kode diatas sudah terbentuk dengan rapi tanpa Anda harus merubah, tetapi karena Anda menggunakan tag body yang ganda dengan beberapa pengaturan yang berbeda, sehingga nilai kode CSS diatas tidak terbaca.

      Ada menu yang tertutupi karena menu ini. sekarang coba cari kode yang kurang lebih tampak seperti ini di template Anda:

      #header-wrapper{position:relative;background:#2c3e50;padding:0 15px;margin:0;border-top: 3px solid #1abc9c;overflow:hidden}

      ubah kode margin menjadi seperti ini:

      margin:45px auto;

      Hapus
    2. :d Trimakasih Penjelasanya mbak.... hehheheheh Sukses deh buat mu....!

      Hapus
  14. mba menu navigasi nya bagus banget tapi klo saya buka dari HP itu kok jd berantakan and ga bisa di clik yah mba, mohon info nya mba.. :)

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK