Tutorial Tip dan Trik Blogger: Cara Membuat Bottom Slide Out Menu Dengan Jquery

Pada artikel sebelummnya saya pernah memposting tentang cara membuat fixed slide out menu (Baca disini),dimana menu akan muncul atau slide out dari atas kebawah/samping kiri ke kanan apabila anda mengarahkan kursor mouse anda ke arah menu tersebut.Masih tentang menu dengan jquery kali ini saya ingin berbagi tentang cara membuat Fresh bottom slide out menu (lihat demo disini ),dimana menu akan muncul atau slide out dari bawah keatas ketika anda mengarahkan kursor mouse anda kearah menu tersebut.

Screenshot Fresh Bottom Slide out Menu :

Dan adapun Cara pembuatanya adalah :

1. Kode css Letakan Kode Css dibawah ini diatas kode </head> html editor anda

2. Kode javascript (sebagai effect pada menu ini kita menggunakan jquery)letakan kode javascript dibawah ini pada bagian head html atau setelah kode </style>/sebelum kode </head>

3. Kode HTML Letakan kode di bawah ini pada bagian body atau <body> dan kode </body>

<div class="contener">             <ul id="menu">                 <li>                     <a class="ref" href="http://bambangpage.blogspot.com/">                         <i class="icon_about"></i>                         <span class="title">About</span>                         <span class="description">Learn about us and our services</span>                      </a>                 </li>                 <li>                     <a class="ref" href="http://bambangpage.blogspot.com/">                         <i class="icon_work"></i>                         <span class="title">Work</span>                         <span class="description">See our work and portfolio</span>                     </a>                  </li>                 <li>                     <a class="ref" href="http://bambangpage.blogspot.com/">                         <i class="icon_help"></i>                         <span class="title">Help</span>                         <span class="description">Talk to our support</span>                     </a>                 </li>                  <li>                     <a class="ref" href="http://bambangpage.blogspot.com/">                         <i class="icon_search"></i>                         <span class="title">Search</span>                         <span class="description">Search our website</span>                     </a>                 </li>             </ul>          </div>

Ganti alamat Url http://bambangpage.blogspot.com/ dengan alamat Url yang anda inginkan.

sekian dulu tutorial kali ini selamat mencoba dan semoga bermanfaat...

Sabtu, 13 Maret 2010

Cara Membuat Bottom Slide Out Menu Dengan Jquery

Tidak ada komentar:

Posting Komentar