Drop Down Menu Biru dengan Efek Bounce

Drop Down Menu Biru

Pada artikel-artikel sebelumnya saya telah memberikan beberapa post mengenai pemanis-pemanis blog. Kali ini saya akan coba memberikan sedikit pemanis lagi, yaitu berupa Menu Dropwdown Biru dengan Efek Bounce. Tidak usah banyak basa basi lagi langkah pertama masuk ke
Rancangan
lalu masuk ke
Edit HTML
lalu cari kode
]]></b:skin>
dan letakkan kode di bawah ini dan letakkan di atas kode
]]></b:skin>
lalu save template dan jangan lupa back up template terlebih dahulu.
#nav {
  z-index:999;
  background:#38f;
  width:98.5%;
  color:white;
  font:normal 10px Arial,Sans-Serif;
  text-transform:uppercase;
  -webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.5);
  -moz-box-shadow:1px 1px 3px rgba(0,0,0,0.5);
  -ms-box-shadow:1px 1px 3px rgba(0,0,0,0.5);
  -o-box-shadow:1px 1px 3px rgba(0,0,0,0.5);
  box-shadow:1px 1px 3px rgba(0,0,0,0.5);
  border-top:2px solid #39f;
  border-bottom:2px solid #37f;
}
#nav:after {
content:"";
width:0px;
height:0px;
border-width:18.2px;
border-style:solid;
border-color: transparent transparent  transparent #38f;
position:absolute;
top:0px;
left:98.5%;
}
#nav ul {
  margin:0px 0px;
  padding:0px 0px;
  height:30px;
}
#nav li {
  margin:0px 0px;
  padding:0px 0px;
  float:left;
  display:inline;
  list-style:none;
  position:relative;
  border-top:1px solid #39f;
  -webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.5);
  -moz-box-shadow:1px 1px 5px rgba(0,0,0,0.5);
  -ms-box-shadow:1px 1px 5px rgba(0,0,0,0.5);
  -o-box-shadow:1px 1px 5px rgba(0,0,0,0.5);
  box-shadow:1px 1px 5px rgba(0,0,0,0.5);
  
}
#nav a { 
  display:block;
  padding:0px 15px;
  line-height:30px;
  text-decoration:none;
  background-color:#38f;
  color:white;
  border-bottom:1px solid #37f;
 
}
#nav a:hover {
  background-color:#a0fe0d;
  -webkit-transition:all 1s ease-Out;
  -moz-transition:all 1s ease-Out;
  -ms-transition:all 1s ease-Out;
  -o-transition:all 1s ease-Out;
  transition:all 1s ease-Out;
}
#nav a:active {
  background-color:#11d;
}
#nav li ul {
  width:180px;
  height:auto;
  position:absolute;
  top:100%;
  left:0px;
  z-index:10;
  background-color:#38f;
  display:none;
  -webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.5);
  -moz-box-shadow:1px 1px 3px rgba(0,0,0,0.5);
  -ms-box-shadow:1px 1px 3px rgba(0,0,0,0.5);
  -o-box-shadow:1px 1px 3px rgba(0,0,0,0.5);
  box-shadow:1px 1px 3px rgba(0,0,0,0.5);
}
#nav li li:after{
content:"";
width:0px;
height:0px;
border-width:15.8px;
border-style:solid;
border-color: transparent transparent  transparent #38f;
position:absolute;
top:0.1px;
left:100%;
}
#nav li li:before{
content:"";
width:0px;
height:0px;
border-width:15.8px;
border-style:solid;
border-color: transparent #38f transparent  transparent ;
position:absolute;
top:0.1px;
right:100%;
}
#nav li li {
  display:block;
  float:none;
}

Setelah itu cari kode
</head>
dan letakkan kode berikut di atas kode
</head>
<script type="text/javascript">
$(function() {
            $('#nav li').hover(function() {
                $(this).children('ul').slideDown(500, "easeOutBounce");
            }, function() {
                $(this).children('ul').slideUp(500, "easeOutExpo");
            });
        });​
</script>

Kemudian letakkan kode ini di atas kode
</head>
, tapi jika ada kode serupa dan versi JQuerynya lebih baru maka jangan dimasukkan.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js' type='text/javascript'/>
Namun jika source JQuery di atas telah di hapus oleh pemiliknya makan tidak bisa jalan itu resikonya :p.

Setelah itu salin kode di bawah ini dan letakkan di widget atau bisa juga diletakkan di tempat yang anda inginkan.
<nav id="nav">
    <ul>
        <li><a href="#">Beranda</a></li>
        <li><a href="#">Profil</a>
            <ul>
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
                <li><a href="#">Submenu 4</a></li>
            </ul>
        </li>
        <li><a href="#">Jurnal</a>
            <ul>
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
                <li><a href="#">Submenu 4</a></li>
            </ul>
        </li>
        <li><a href="#">Komentar</a>
            <ul>
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
                <li><a href="#">Submenu 4</a></li>
            </ul>
        </li>

    </ul>
</nav>​

Lalu simpan dan demonya di bawah ini

30 komentar:

  1. Pada artikel-artikel sebelumnya saya telah memberikan beberapa post mengenai pemanis-pemanis blog
    Pantesan blognya terasa manis waktu saya jilat, hahaa... Nice post friend, terus posting yg bermanfaat, biar bisa diikutin sm temen yg lain. Te Oo Pe Be Ge Te dah....

    BalasHapus
    Balasan
    1. wkwkwk. thanks telah berkunjung :D

      Hapus
    2. kalau rajin rajin kesini, blog kita bisa jadi menarik nie. hehheh. tenkyu gan.

      Hapus
  2. ini sangat bermanfaat jika dicoba.:)saya izin untuk menyimak dulu sob.:)

    BalasHapus
  3. keren tutorialnya masbroo,, jago mainin css nih :-bd

    BalasHapus
  4. wwwiihhh mantap kawan.... selalu ada kode nih...

    jadi bertambah ilmu ane nih sobat.....

    BalasHapus
  5. wah bisa efek gitu ya. ane tau nya standard aja, ternyata bisa lebih menarik. ok gan, tenkyu nei. di simpen dah dulu dalam memori

    BalasHapus
  6. #nav li li:before:hover,#nav li li:after:hover {background:#a0fe0d}

    biar sama kayak hover sub menunya :)

    BalasHapus
    Balasan
    1. jadi numpuk dong klo gitu jadinya =p*

      Hapus
  7. ahh pengen coba ahh..
    di coba ya sob :)

    BalasHapus
  8. berkunjung malam sambil nyimak postingan.....

    BalasHapus
  9. Mempelajari dengan seksama...
    Mengaplikasikan dengan seksama...

    Salam kenal,
    Adipradana

    BalasHapus
  10. Wahh keren menunya cocok buat menu pada posting blogazine tinggal dibuat transparan :-d

    BalasHapus
  11. hemmm demonya seperti apa yaa sobb

    BalasHapus
  12. hem boleh di coba niee sobbb

    BalasHapus
  13. wah mantap nih..ijin nyoba sob..

    BalasHapus
  14. Mantef bang langsung aku coba nih.

    BalasHapus

Silahkan berkomentar dengan bahasa yang baik sesuai dengan isi artikel :)