CS: Membuat Navigasi Menu Fixed Full RotateX

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/AVvXsEjq2Ln19WcZqmF2irY5EksdYy2sFUaZN_oA1w-BUovUr6ZTEo-MHZZJQ_k_7_NE_1XJwyN5zKxvs1jBPLaKsg2aM0SwtpnfR2kMen08n9KM8H8cMU-BKIP10jutebaz28jg12VFyclgHCw/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/AVvXsEjq2Ln19WcZqmF2irY5EksdYy2sFUaZN_oA1w-BUovUr6ZTEo-MHZZJQ_k_7_NE_1XJwyN5zKxvs1jBPLaKsg2aM0SwtpnfR2kMen08n9KM8H8cMU-BKIP10jutebaz28jg12VFyclgHCw/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/AVvXsEjGRPyb-wFos2Rufg1YqRGEITba2xn98SHdczdIWqDmLMBQRtq0Ujx4l2iFXfmTeu3z2K7qupDbceS03eKUXoNmz-YrORk_QBH75PSGR_ukr-S1VQTpDzHdVKgt-GGQavYy472hZpYUbCQ/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 -

Untuk CSS letakkan diatas atau sebelum kode ]]></b:skin>
Copy Kode HTML, lalu Paste dibawah kode pembuka <body>
Pratinjau Template, jika terlihat Ok, lalu Simpan Template dan lihat hasilnya
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:

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 -

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

Menu

Senin, 23 November 2015

Membuat Navigasi Menu Fixed Full RotateX

Tidak ada komentar:

Posting Komentar