Cara Membuat Horizontal Roll Menu

Roll Menu ini merupakan menu yang tersembunyi di atas navbar. Sebuah controll yang bertuliskan "Menu" dibuat dibagian atas-kanan halaman dan berfungsi untuk membuat menu yang tersembunyi meluncur ke bawah. Sebuah controll yang lain berfungsi membuat menu kembali meluncur menghilang. Contoll yang satu ini dibuat tak terlihat akan tetapi didesain mudah tersentuh cursor secara tak sengaja. Posisinya tepat di bawah garis terluar menu bagian bawah dengan ketinggian controll sebesar 30px. Untuk membuat roll menu diperlukan javascript, kode css, css3 dan xHTML.

Cara pembuatan Roll Menu

1. Login ke Blogger.
2. Klik "Design (Rancangan)"
3. Klik "Edit HTML"
4. Lakukan "Backup template".
5. Cari kode ]]></b:skin>.
6. Letakkan kode css di atas ]]></b:skin> dan javascript di bawah ]]></b:skin>
7. Klik "Simpan Template (Save Template)".
8. Lanjutkan dengan membuka page elements (Elemen Laman) untuk menyimpan xHTML. Silahkan klik "Design (Rancangan)".
9. Klik "Add a Gadget (Tambah Gadget)" yang terletak dalam box dengan garis putus-putus. Tunggu hingga sebuah window berisi halaman Tambah Gadget terlihat.
10. Cari dan klik "HTML/Javascript".
11. Copy dan paste-kan xHTML di dalam box HTML/Javascript.
12. Klik "SIMPAN (SAVE)".
13. Buka blog dan lihat hasilnya.

KOde CSS :

#menu_holder{ 
       height:48px;
       width:90%;
       display:block;
       position:fixed;
       top: -158px;
       left:10px;
       border-radius:0 0 8px 8px;             
}
#hit_area,#menu_holder{z-index:10;}
#nav{
       height:47px; 
       width:885px;
       margin:0 auto;
       padding:0 2px 0 2px;
       background: #28343b;
       border-radius:0 0 10px 10px; 
}
#nav,#hit_area{
       background:linear-gradient(top, #28343b 0%,#b5bdc8 11%,#28343b 100%);
       background:-o-linear-gradient(top, #28343b 0%,#b5bdc8 11%,#28343b 100%);
       background:-ms-linear-gradient(top, #28343b 0%,#b5bdc8 11%,#28343b 100%);
       background:-moz-linear-gradient(top, #28343b 0%, #b5bdc8 11%, #28343b 100%);
       background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#28343b), color-stop(11%,#b5bdc8), color-stop(100%,#28343b));
       background:-webkit-linear-gradient(top, #28343b 0%,#b5bdc8 11%,#28343b 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28343b', endColorstr='#28343b',GradientType=0 ); 
}
#hit_area,#hit_area2{
       position:fixed;
       top:0;
       right:0;
       height:38px;
       width:100px;
       font-size:14px;
       font-weight:bold;
       font-family:Arial;
       text-align:center;
       color:red;
       opacity:0.8;
       filter:alpha(opacity=80);
       text-align:center;
       padding-top:6px;
       text-shadow:1px 1px 1px #000;
}
#hit_area2{
       width:100%;
       height:60px;
       background:transparent;
}
#nav ul{
       margin: 0px;
       padding: 0px 0px 0px 21px;
       height: 42px;
       list-style-type: none;
       background:rgba(255,255,255,0.2);
       border:2px solid #fff;
       border-top:0 solid;
       border-radius:0 0 8px 8px;
}
#nav li{
       margin:0px; 
       padding:0px;
       float:left;
}
#nav li a:link, #nav li a:active, #nav li a:visited{
       height:35px;
       width:auto;
       padding:0 5px ;
       display:block;
       line-height:45px;
       font-weight: bold;
       color:#fff;
       text-shadow:1px 1px 1px #000;
       text-decoration: none;
       font-family: Arial, Helvetica, sans-serif;
       text-align: center;
       font-size: 105%;
       border-bottom:3px solid transparent;
       transition:1.6s ease;
       -o-transition:1.6s ease;
       -moz-transition:1.6s ease;
       -webkit-transition:1.6s ease;
       -ms-transition:1.6s ease;
}
#nav li a:focus, #nav li a:hover{
       text-decoration : none;
       outline:0;
       background:rgba(0,0,0,0.4);
       color:orange;
       border-bottom:3px double red;
}

Javascript :

<script src="http://gubhugreyotprojects.googlecode.com/svn/menu/GRtop-menu.js" type="text/javascript"></script>

xHTML :

<div id="hit_area" onmouseover="toggleDown();">Show/Hide<br />M E N U</div>
<div id="hit_area2" onmouseover="toggleUp();"></div>
<div id="menu_holder">
<div id="nav">
<ul>

<li><a href="http://gubhugreyot.blogspot.com">Tutorial Blogger |</a></li>
<li><a href="http://gubhugreyot.blogspot.com">Tips-Trik Blogger |</a></li>
<li><a href="http://gubhugreyot.blogspot.com">Javacsript |</a></li>
<li><a href="http://gubhugreyot.blogspot.com">CSS |</a></li>
<li><a href="http://gubhugreyot.blogspot.com">Horizontal-Menu |</a></li>
<li><a href="http://gubhugreyot.blogspot.com">Vertical-Menu |</a></li>
<li><a href="http://gubhugreyot.blogspot.com">Image Gallery</a></li>
</ul>
</div>
</div>
</div>

Catatan/Keterangan :

1. Karena roll menu dibuat dalam posision fixed maka sekalipun halaman digulung hingga ujung terbawah dia akan selalu dapat dibuka.
2. Ukuran lebar roll menu dapat diatur dengan merubah ukuran width pada kode css.

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

Update » Setu LEGI, January, 28, 2012

» Happy Blogging - gubhugreyot «