RR Blog: 2011

Diposting oleh TangerangBlogs

Simple Animated Collapsible Menu menggunakan jQuery-1.3.2.js dan CSS3 merupakan perpaduan menarik yang menggabungkan kesederhanaan script yang berbasis kinerja jQuery dan kemampuan penciptaan animasi dari CSS3. Perpaduan di antara keduanya mampu memberikan suguhan menu vertical yang sangat menarik, atraktif dan memberikan kemampuan fungsi secara maksimal. Kemampuan prima menu ini telah terbukti dengan uji coba yang dilakukan di template blogger dengan hasil cukup menakjubkan baik dari animasi yang tercipta ataupun fungsi dasarnya sebagai sebuah wadah menu. JQuery-1.3.2.js dapat anda ganti pula dengan jQuery-1.3.2.min.js atau jQuery-1.4.2.js dan jQuery-1.4.2.min.js.

Bentuk dasar Animated jQuery-CSS3 Vertical Colapsing Menu berbentuk sederhana dengan kode dasar seperti di bawah ini :

<div>
<ul>
    <li><a href="javascript:;">Menu-1</a>
       <ul>
          <li><a href="">Isi Menu-1</a></li>
       </ul>
    </li>
    <li><a href="javascript:;">Menu-2</a>
       <ul>
          <li><a href="">Isi Menu-2</a></li>
       </ul>
    </li> 
    <li><a href="javascript:;">Menu-3</a>
       <ul>
          <li><a href="">Isi Menu-3</a></li>
       </ul>
    </li>
</ul> 
</div>

Untuk menggunakan menu ini, silahkan jQuery dan javascript collapsible menu disimpan di atas kode <head> secara berurutan dengan bentuk seperti di bawah ini :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
  Javascript Collapsible Menu
</script>

<head>

Kode CSS diletakkan dan disimpan di atas kode ]]></b:skin> seperti berikut:

Kode CSS Animated Collapsible Menu

]]></b:skin>

xHTML simpan melalui penambahan widget. Setelah nantinya semua kode dan script terpasang dengan benar, maka sampeyan tinggal menikmati cantiknya si collapsible menu dan mengisinya dengan menu-menu atau link-link yang diperlukan untuk di wadahi di sini.

Kode CSS Collapsible Menu

.boxong {
      background: #1c86fe url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgCollapseV38H73.gif) top left repeat;
      padding: 8px 3px 3px; 
      float: left;
      margin: 20px 5px 0;
      border: 2px solid #666;
      border-radius: 12px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
      box-shadow: 1px 4px 15px #000;
      -moz-box-shadow: 1px 4px 15px #000;
      -webkit-box-shadow: 1px 4px 15px #000;
      }
.boxong span {
      font: 16px Droid Serif; 
      font-weight: bold; 
      color: #FFFF99; 
      padding: 5px;
      text-shadow: 1px 4px 2px #000; 
      } 
.bokongku {  
      font-family: Arial;
      font-size: 11px;
      }
ul#GRcollaps { 
      background: #996600;
      }
ul#GRcollaps, ul#GRcollaps ul {
      list-style-type:none;
      margin: 0;
      padding: 0;
      width: 200px;  
      }
ul#GRcollaps a {
      font: 12px Helvetica;
      display: block;
      text-decoration: none; 
      }
ul#GRcollaps li {
      margin-top: 1px;
      }
ul#GRcollaps li a {
      background: #333; 
      border: 2px solid #6e3502;
      color: #fff; 
      padding: 0.5em;
      -o-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -webkit-transition: all 1s ease-in-out;   
      }
ul#GRcollaps li a:hover { 
      border-color: #fff; 
      border-radius: 8px; 
      -moz-border-radius: 8px; 
      -webkitborder-radius: 8px;
      background: #000;
      }
ul#GRcollaps li ul li a { 
      background: #ccc; 
      padding: 0.2em 0.5em;
      color: #000;
      padding-left: 20px;
      -o-transition: all 1s ease-out;
      -moz-transition: all 1s ease-out;
      -webkit-transition: all 1s ease-out;
      border-left: 5px #777 solid; 
      border-right: 3px #ccc solid;
      border-top: 3px #ccc solid; 
      border-bottom: 3px #ccc solid; 
      opacity: 0.8;
      }
ul#GRcollaps li ul li a:hover {
      background: #666;
      border-left: 15px #000 solid; 
      border-right: 3px #000 solid;
      border-top: 3px #000 solid; 
      border-bottom: 3px #000 solid; 
      padding-left: 15px;
      opacity:  1.0;
      color: #fff;
      text-shadow: 1px 1px 1px #000;
      }

Javascript Collapsible Menu

<script type="text/javascript">
function initMenu() {
$('#GRcollaps ul').hide();
$('#GRcollaps li a').click(
function() {
$(this).next().slideToggle('slow');});}
$(document).ready(function() {initMenu();});
</script>

xHTML Collapsible Menu

<div class="boxong"><span>Daftar Menu</span>
<div class="bokongku">
<ul id="GRcollaps">
    <li>
    <a href="javascript:;">Nasi Goreng</a>
        <ul>
            <li><a href="http://gubhugreyot.blogspot.com">Telor Gajah</a></li>
            <li><a href="http://gubhugreyot.blogdetik.com">Daging Ayam Kampung</a></li>
            <li><a href="http://gubhugreyot.wordpress.com">Jerohan Kuda</a></li>
        </ul>
    </li>

    <li>
    <a href="javascript:;">Mie</a>

        <ul>
            <li><a href="http://gubhugreyot.blogdetik.com">Mie Goreng</a></li>
            <li><a href="http://gubhugreyot.blogspot.com">Mie Rebus</a></li>
            <li><a href="http://tantytm.blogspot.com">Mie Re Do</a></li>
            <li><a href="http://bloggerstuars.blogspot.com">Mie Ring Otak</a></li>
            <li><a href="http://gubhugreyot.blogspot.com">Mie Ongklok</a></li>
        </ul>
    </li>

    <li>
    <a href="javascript:;">Bakso</a>

        <ul>
            <li><a href="http://gubhugreyot.blogspot.com">Bakso Lombok Uleg</a></li>
            <li><a href="http://tantytm.blogspot.com">Kepala Sapi</a></li>
            <li><a href="http://bloggerstuars.blogspot.com">Urat</a></li>
            <li><a href="http://gubhugreyot.blogspot.com">Sepak Takrow</a></li>
        </ul>
    </li>
 
   <li>
   <a href="javascript:;">Soto</a>

        <ul>
            <li><a href="http://gubhugreyot.blogspot.com">Ayam</a></li>
            <li><a href="http://tantytm.blogspot.com">Daging Sapi</a></li>
            <li><a href="http://bloggerstuars.blogspot.com">Kudus</a></li>
            <li><a href="http://gubhugreyot.blogspot.com">mBangkong</a></li>
            <li><a href="http://bloggerstuars.blogspot.com">Kuda Nil</a></li>
            <li><a href="http://gubhugreyot.blogspot.com">Madura</a></li> 
        </ul>
    </li>

    <li>
    <a href="javascript:;">Sate</a>
        <ul>
            <li><a href="http://gubhugreyot.blogspot.com">Kerbau</a></li>
            <li><a href="http://tantytm.blogspot.com">Kuda</a></li>
            <li><a href="http://bloggerstuars.blogspot.com">Ular</a></li>
            <li><a href="http://gubhugreyot.blogspot.com">Kucing</a></li>
            <li><a href="http://bloggerstuars.blogspot.com">Sapi</a></li>
            <li><a href="http://gubhugreyot.blogspot.com">Madura</a></li> 
        </ul>
    </li>

    <li>
    <a href="javascript:;">Minuman</a>
        <ul>
            <li><a href="http://gubhugreyot.blogspot.com">Es Cendol</a></li>
            <li><a href="http://tantytm.blogspot.com">Es Buah</a></li>
            <li><a href="http://bloggerstuars.blogspot.com">Kopi Tubruk</a></li>
            <li><a href="http://gubhugreyot.blogspot.com">Teh Cencem</a></li>
            <li><a href="http://bloggerstuars.blogspot.com">Wedang Jahe</a></li>
            <li><a href="http://gubhugreyot.blogspot.com">Kolak Apotas</a></li> 
        </ul>
    </li>
</ul> 
</div>
</div>

D E M O

Langkah Pengerjaan

Login to BloGGeR
KLIK Design (Rancangan).
KLIK Edit HTML.
Cari kode <head>, kemudian simpan jQuery-1.3.2.min.js dan javascript Collapsible Menu di atasnya.
Cari kode ]]></b:skin> , kemudian letakkan kode CSS Collapsible Menu di atasnya.
KLIK SAVE/Simpan Template.
Lanjutkan dengan menyimpan xHTML melalui penambahan widget.
Setelah login dan sampai pada Page Elements (Elemen Laman),KLIK Add Gadget (Tambah Gadget) yang berada di sidebar atau yang lain (bebas), kemudian lanjutkan dengan copy-paste xHTMLuntk disimpan di box penambahan widget, setelah sampeyanKLIK HTML/Javascript.

KLIK

Ganti setiap link dan nama menu dengan milik sampeyan sendiri.
Lebar box collapsible dapat diatur dengan merubah lebar (width) pada syntax ul#GRcollaps, ul#GRcollaps ul {width: 200px;}.

.boxong {margin: 20px 5px 0;}

Kode CSS dapat juga disimpan di widget bersamaan dengan xHTML dengan menambahkan kode seperti di bawah ini.

<style="text/css">

Letakkan kode CSS di sini !

</stye>

Letakkan xHTML di sini!

04.24 | 0 Comments

Cara Membuat Animated Vertical Menu Dengan jQuery

Diposting oleh TangerangBlogs

Diposting oleh TangerangBlogs Label: Tutorial Blog - Java Scirpt

Sampeyan pasti tak akan menyangka javascript yang tak seberapa banyak ini mampu menghasilkan sebuah menu vertikal dengan bentuk animasi dan dilengkapi fade effects. Script kurang dari 10 deret ini mampu membuat setiap link title pada menu bergoyang ke kanan dan ke kiri saat mouse menyentuh setiap link. Apabila blog sudah menggunakan jquery-1.3.2.js atau jquery-1.3.2.min.js, tinggal tambahkan javascript di bawahnya maka sebuah menu cantik yang sangat indah akan hadir dihalaman blog sampeyan. Boleh percaya atau tidak, tetapi silahkan lihat dulu scripnya yang hanya beberapa baris ini.

Javascript Animated Vertical Menu

<script type="text/javascript">  
/* gubhug reyot - Vertical Animated Menu */ 
$(document).ready(function() {  
$(".bgsGRVMnu li").hover(function(){  
$(this).find('span').animate({ opacity: 0 }, 800);        
$(this).find('a').animate({paddingLeft:"50px"}, 800); },
function(){  
$(this).find('span').animate({ opacity: 1 }, 800);  
$(this).find('a').animate({paddingLeft: "28px"}, 800);  
});
});  
</script>

Script di atas inilah yang akan menghadirkan menu vertical indah dengan animasi menarik. Untuk memberikan hasil maksimal pada bentuk tampilan menu, kita juga manfaatkan rounded corners effects, opacity effects dan text shadow sehingga nilai lebih menu animasi ini semakin terasakan.

Bentuk Animated Vertical Menu Menggunakan jQuery-1.3.2.min.js

Kode CSS Animated Vertical Menu

.bgsGRVMnu{
       list-style:none;
       padding:0;
       margin:0;
       width:220px;
       background:#333 url(http://i27.tinypic.com/2lstsex/bgsGR/bgVmenu.jpg) top center no-repeat;
       padding:5px 3px;
       border:2px solid #555;
       border-top-left-radius: 12px;
       border-top-right-radius: 12px;
       -moz-border-radius-topleft: 12px;
       -moz-border-radius-topright: 12px;
       -webkit-border-top-left-radius: 12px;
       -webkit-bordertop-right-radius: 12px;
       border-radius: 12px;
       -moz-border-radius: 12px;
       -webkit-border-radius: 12px;
       }
.bgsGRVMnu li{
       margin:0;
       padding:0;
       margin-bottom:1px;
       border-radius: 3px;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       position:relative;
       background:#888 url(http://i49.tinypic.com/28cj9r5.jpg) bottom left repeat-x;
       }
.bgsGRVMnu li:hover{
       opacity:0.6;
       -moz-opacity:0.6;
       filter:alpha(opacity=60);
       }
.bgsGRVMnu li a{
       font-size:11px;
       font-family:Arial !important;
       display:block;
       border:1px solid #ccc;
       background:url(http://i44.tinypic.com/chrv9.gif) no-repeat 6px 9px ;
       border-radius: 5px;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       padding:7px 0 7px 30px;
       color: #fff;
       text-decoration:none;
       text-shadow:0px 1px 1px #5bc8fb;
       filter: Shadow(Color=#222, Direction=135, Strength=1);
       }
.bgsGRVMnu li a:hover{
       color:red;
       }
.bgsGRVMnu li:hover{
       background:url(http://i25.tinypic.com/new45k/bgsGR/images/bgbluelight.png);
       background-repeat: repeat-x;
       background-position:0 60%;
       }
.bgsGRVMnu li span{
       position:absolute;
       top:9px;
       left:7px;
       background: url(http://i26.tinypic.com/1zl7nf6/bgsGR/images/bgblue.png) center left no-repeat;
       width:13px;
       height:12px;
       }

Dalam kode css di atas disertakan sebuah background image sebagai latar belakang (background) menu, sehingga ketika mouse menyentuh setiap link akan memperlihatkan gambar backgroundnya. Karena yang terlihat hanya secuil gambar pada setiap link terasentuh cursor, pastilah hal ini akan membuat penasaran siapapun untuk menggoyangkan cursor di semua link yang kita isikan. Efek seperti ini kita ciptakan melalui bantuan opacity effects pada kode css. Sampeyan juga bisa mengganti background ini dengan foto pribadi atau bintang idola sampeyan. He ... he ... pokoknya coba saja dan aku tanggung pasti puas.

Cara Memasang dan Menggunakan Animated Vertical Menu dengan jQuery

Login to BloGGeR (Login ke BloGGeR)
KLIK link Design (Rancangan).
KLIK link Edit HTML.

BackUp Template

KLIK

simpan file template

Tetap di Edit HTML, kemudian cari kode <head>. Letakkan jquery-1.3.2.min.js dan javascript di atasnya..

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">  
/* gubhug reyot - Vertical Animated Menu */ 
$(document).ready(function() {  
$(".bgsGRVMnu li").hover(function(){  
$(this).find('span').animate({ opacity: 0 }, 800);        
$(this).find('a').animate({paddingLeft:"50px"}, 800); },
function(){  
$(this).find('span').animate({ opacity: 1 }, 800);  
$(this).find('a').animate({paddingLeft: "28px"}, 800);  
});
});  
</script>
<head>

Lanjutkan dengan mencari kode ]]></b:skin>, kemudian letakkan kode css Animated Vertical Menu tepat di atasnya. Lihat bentuk pemasangannya seperti di bawah ini :

.bgsGRVMnu{
        list-style:none;
        padding:0;
        margin:0;
        ....
        ....
        }
        .... dst ...

.bgsGRVMnu li span{
        position:absolute;
        ....
        ....
        height:12px;
        }
]]></b:skin>

SAVE Template (Simpan Template) : KLIK "SAVE Template/Simpan Template".

Cara Menggunakan atau Memasang Kode HTML Animated Vertical Menu

Kode HTMLnya adalah sebagai berikut :

<ul class="bgsGRVMnu">
      <li><a href="Link-1">Link Title-1</a><span></span></li>
      <li><a href="Link-2">Link Title-2</a><span></span></li>
      <li><a href="Link-3">Link Title-3</a><span></span></li>
      <li><a href="Link-4">Link Title-4</a><span></span></li>
      <li><a href="Link-5">Link Title-5</a><span></span></li>
      <li><a href="Link-6">Link Title-6</a><span></span></li>
      <li><a href="Link-7">Link Title-7</a><span></span></li>
      <li><a href="Link-8">Link Title-8</a><span></span></li> 
      <li><a href="Link-9">Link Title-9</a><span></span></li>
      <li><a href="Link-10">Link Title-10</a><span></span></li>
      <li><a href="Link-11">Link Title-11</a><span></span></li>
      <li><a href="Link-12">Link Title-12</a><span></span></li> 
</ul>

Copy dan simpan kode HTML di atas di widget blog dengan caraKLIK link "Page Elements (Elemen Laman)"
Lanjutkan dengan KLIK "Add Gadget/Tambah Gadget" baru kemudian KLIK "HTML/Javascript".
Copy-Paste Kode HTMl dan letakkan di box yang tersedia.
KLIK SAVE/Simpan.

Catatan/Keterangan :

Ganti Link-1 s/d Link-12 dengan link menu yang dikehendaki sesuai dengan kebutuhan blog sampeyan.
Ganti Link Title-1 s/d Link Title-12 dengan Judul/Nama link yang akan dipasang di blog.
Untuk mengganti background Animated Vertical Menu, ganti background di bawah ini:

http://i27.tinypic.com/2lstsex/bgsGR/bgVmenu.jpg

Background image ini berukuran :

- lebar (width) = 220px (sesuai lebar menu).
- tinggi (height = sesuai banyaknya link yang digunakan.

Link Download

Apabila ingin menggunakan javascript dan kode css yang sudah dalam bentuk link sekaligus sudah di kompres, silahkan KLIK link download di bawah ini. Semua tinggal pasang dan sudah ada petunjuk pemasangan di dalamnya.

04.03 | 0 Comments

Mengenai Saya

RR Blog

Cara Membuat Animated Vertical Menu Dengan jQuery

Categories

Archives

Random Post

Live Traffic Feed