Hidden Menu Tab Menu - Menu Tersembunyi

Meskipun Hidden Tab Menu ini hanya menggunakan KODE CSS dan CSS3, namun ternyata bisa memberikan penampilan yang sangat memuaskan. Sangat kompatible untuk semua browser dan dapat dengan cepat aplikasikan disetiap blog.

D E M O

Kode CSS Hidden menu :

.GRflymenu{
        position:fixed;
        font-family:Arial;
        font-size:12px;
        width:30px;
        overflow:hidden;
        left:-10px; /* original code by: gubhugreyot */
        padding:4px;
        border:6px solid transparent;
        bottom:0;
        height:158px;
        background: url(https://lh6.googleusercontent.com/-6fVY8bKNwTo/T1-qfqIQskI/AAAAAAAAAXo/kR_kOLjimp0/s170/gubhugreyot-more-info.gif) bottom right no-repeat;
        transition:width 0.5s ease-out 0.8s, background 0.4s linear;
        -o-transition:1s ease-outwidth 0.5s ease-out 0.8s, background 0.4s linear;
        -moz-transition:width 0.5s ease-out 0.8s, background 0.4s linear;
        -webkit-transition:width 0.5s ease-out 0.8s, background 0.4s linear;
        -ms-transition:width 0.5s ease-out 0.8s, background 0.4s linear;
}
.GRflymenu:hover{
        z-index:11;
        width:390px;
        left:0;/* original code by: http://gubhugreyot.blogspot.com */
        height:425px;
        background:#666;
        border-color:#aaa;
}
.GRflymenu:hover,.GRflymenu .flymenu ul li{
        transition:0.5s ease-out;
        -o-transition:0.5s ease-out;
        -moz-transition:0.5s ease-out;
        -webkit-transition:0.5s ease-out;
        -ms-transition:0.5s ease-out;  
}
.GRflymenu .flymenu{
        float:left;
        padding:5px;
        background:transparent;
        opacity:0;
        margin:3px;
        border-radius:8px; 
}
.GRflymenu:hover .flymenu{
        opacity:1.0;
        background:#aaa; 
}
.GRflymenu .flymenu ul{
        margin:0;
        padding:0 3px 0 3px;
        width:368px;
        height:380px;
        list-style:none;
        float:left;
        background:#eee;
        overflow:auto; 
}
.GRflymenu .flymenu ul li{
        padding:5px 6px 5px 30px;
        background:#888 url(https://lh4.googleusercontent.com/-u0XPRqFBfNU/T1uNTOOsV-I/AAAAAAAAAVQ/t1rX8b1tAwU/s128/gubhugreyot-bullet.png) 6px 7px no-repeat;
        line-height:18px;
        border-bottom:1px dotted #999;
        margin:0;
}
.GRflymenu .flymenu ul li:hover{
        background-color:#aaa;
        border-left:6px solid red;
}
.GRflymenu .flymenu ul li a{
        text-decoration:none;
        color:#000;
        text-shadow:#888 2px 2px 2px;
}
.GRflymenu .flymenu ul li a:hover{
        color:#C30;
}
.GRlink{display:inline-block;padding:5px 15px;width:91%;text-align:right;font-size:14px;text-shadow:3px 3px 3px #000;color:#09F;margin:2px;background:#555;text-decoration:none;}
.GRlink:hover{color:red;}

xHTML :

<div class="GRflymenu">
<div class="flymenu">
   <ul>
      <li><a href="http://gubhugreyot.blogdetik.com" title="gubhugreyot blogdetik">H O M E</a></li>
      <li><a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/search/label/Javascript" title="All Posts under Javascript">Javascript</a></li>
      <li><a href="URL menu3" title="Title Link Menu3">CSS Code</a></li>
      <li><a href="URL menu4" title="Title Link Menu4">CSS3</a></li>
      <li><a href="URL menu5" title="Title Link Menu5">Tutorial Blogger</a></li>
      <li><a href="URL menu6" title="Title Link Menu6">Adobe Photoshop</a></li>
      <li><a href="URL menu7" title="Title Link Menu7">Widget</a></li>
      <li><a href="URL menu8" title="Title Link Menu8">Download Template</a></li>
      <li><a href="URL menu9" title="Title Link Menu9">Sownload mp3</a></li>
      <li><a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/search/label/jQuery" title="All Posts under jQuery">jQuery</a></li>
      <li><a href="URL menu11" title="Title Link Menu11">Link Menu11</a></li>
      <li><a href="URL menu12" title="Title Link Menu12">Link Menu12</a></li>
      <li><a href="URL menu13" title="Title Link Menu13">Link Menu13</a></li>
      <li><a href="URL menu14" title="Title Link Menu14">Link Menu14</a></li>
      <li><a href="URL menu15" title="Title Link Menu15">Link Menu15</a></li>
      <li><a href="URL menu16" title="Title Link Menu16">Link Menu16</a></li>
      <li><a href="URL menu17" title="Title Link Menu17">Link Menu17</a></li>
      <li><a href="URL menu18" title="Title Link Menu18">Link Menu18</a></li> 
   </ul>
</div>
<a class="GRlink" target="_blank" href="http://gubhugreyot.blogspot.com">gubhugreyot</a>
</div>

Cara membuat hidden menu :

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard) :
   Klik "Rancangan (Design)"
3. Setelah halaman baru terbuka, klik "Edit HTML".
4. Lakukan "Backup Template".
5. Cari kode ]]></b:skin> , kemudian letakkan kode css di atasnya.
6. Klik "Simpan Template (Save Template)".
7. Lanjutkan dengan menyimpan xHTML melalui "Add a Gadget":
   
   • Klik "Rancangan (Design)".
   • Halaman Rancangan | Elemen Laman :
     Anda akan melihat beberapa box dan sebagian diantaranya terdapat yang bergaris putus-putus. Gunakan (klik) salah satu "Add a Gadget (jangan yang di atas "Blog Posts").
   • Jika sudah terbuka halaman baru, pilih dan klik gadget "HTML/Javascript".
   • Copy dan paste-kan xHTML dalam box yang tersedia.
   • Klik "SAVE/SIMPAN".
8. Buka blog dan lihat hasilnya.
9. Setelah pembuatan hidden menu berhasil dengan baik, rubah setiap link menu dengan menu anda!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Kemis    PON, Maret, 15, 2012

» Happy Blogging - gubhugreyot «