Langsung ke konten utama

Jquery And CSS3 Menu Bar

Jquery And CSS3 Menu Bar - Postingan kali ini masih seputar tutorial dalam membuat sebuah menu blog untuk blogger . Pada beberapa waktu yang lalu [OBC] share tentang menu Cool CSS3 Navigation Menu dengan CSS3 . Kali ini menu yang dishare Jquery And CSS3 Menu Bar yang masih menggunakan CSS3 tapi ada penambahan kode Jquery didalamnya . Untuk lebih jelasnya silahkan brada lihat demonya dibawah ini . 

See Demo   

Komponen Menu

Kode Jquery
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
<script type="text/javascript">
  $(function() {
    //We initially hide the all dropdown menus
    $('#dropdown_nav li').find('.sub_nav').hide();
    //When hovering over the main nav link we find the dropdown menu to the corresponding link.
    $('#dropdown_nav li').hover(function() {
      //Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.
      $(this).find('.sub_nav').fadeIn(100);
    }
    , function() {
     //Do the same again, only fadeOut this time.
     $(this).find('.sub_nav').fadeOut(50);
     } )});
</script>
CSS3 
<style>
  #dropdown_nav a {
 font-family:Arial, Sans-Serif;
        font-size:15px;
        font-weight:bold;
        color:#525252;
        text-decoration:none;
      }
      #dropdown_nav {
        width:960px;
        padding:0px;
        display:inline-block;
        list-style:none;
        -moz-box-shadow:inset 0px 0px 1px #fff;
        -webkit-box-shadow:inset 0px 0px 1px #fff;
        border:1px solid #ccc;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        background:#e2e2e2;
        background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
      }
 
      #dropdown_nav li {
  padding:10px 0px 10px 0px;
  float:left;
  position:relative;
  display:inline-block;
      }
 
      #dropdown_nav li a {
        padding:10px 15px 10px 15px;
        text-shadow:-1px 1px 0px #f6f6f6;
        -moz-box-shadow:inset 0px 0px 1px #fff;
        -webkit-box-shadow:inset 0px 0px 1px #fff;
        border-right:1px solid #ccc;
      }
      #dropdown_nav li a:hover {
        background:#f9f9f9;
        background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
      }
      #dropdown_nav li a:active {
        background:#e2e2e2;
        background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
      }
 
      #dropdown_nav li a.first {
        -moz-border-radius:5px 0px 0px 5px;
        -webkit-border-radius:5px 0px 0px 5px;
      }
      /*#dropdown_nav li a.last {
      -moz-border-radius:0px 5px 5px 0px;
      -webkit-border-radius:0px 5px 5px 0px;
    }
      */
 
      /* Sub-Nav styling */
      #dropdown_nav .sub_nav {
        width:160px;
        padding:0px;
        position:absolute;
        top:38px;
        left:0px;
        border:1px solid #ccc;
        background:#e2e2e2;
      }
 
      #dropdown_nav .sub_nav li {
        width:160px;
        padding:0px;
      }
 
      #dropdown_nav .sub_nav li a {
        display:block;
        border-bottom:1px solid #ccc;
        background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
      }
      #dropdown_nav .sub_nav li a:hover {
        background:#f9f9f9;
        background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
      }
      #dropdown_nav .sub_nav li a:active {
        background:#e2e2e2;
        background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
      }
</style>
HTML 
<!-- Navigation Start -->
<ul id="dropdown_nav">
  <li><a class="first" href="http://duniaradioku.blogspot.com/">Home</a></li>
  <li><a href="#">Categories</a>
   <ul class="sub_nav">
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
   </ul>
  </li>
  <li><a href="#">Exchange</a>
   <ul class="sub_nav">
    <li><a href="#">Exchange</a></li>
    <li><a href="#">Exchange</a></li>
    <li><a href="#">Exchange</a></li>
    <li><a href="#">Exchange</a></li>
   </ul>
  </li>
  <li><a href="#">Freebies</a>
  </li>
  <li><a class="last" href="#">Other Stuff</a>
   <ul class="sub_nav">
    <li><a href="#">Other Stuff </a></li>
    <li><a href="#">Other Stuff </a></li>
    <li><a href="#">Other Stuff </a></li>
    <li><a href="#">Other Stuff </a></li>
   </ul>
  </li>
 </ul>

Kustomisasi :

Untuk mempermudah dalam pemasangannya brada gabungkan ketiga kompenen menunya sehingga menjadi seperti ini 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
<script type="text/javascript">
  $(function() {
    //We initially hide the all dropdown menus
    $('#dropdown_nav li').find('.sub_nav').hide();

    //When hovering over the main nav link we find the dropdown menu to the corresponding link.
    $('#dropdown_nav li').hover(function() {
      //Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.
      $(this).find('.sub_nav').fadeIn(100);
    }
                                , function() {
                                  //Do the same again, only fadeOut this time.
                                  $(this).find('.sub_nav').fadeOut(50);
                                }
                               );
  }
   );
</script>
<style>
  #dropdown_nav a {
 font-family:Arial, Sans-Serif;
        font-size:15px;
        font-weight:bold;
        color:#525252;
        text-decoration:none;
      }
      #dropdown_nav {
        width:960px;
        padding:0px;
        display:inline-block;
        list-style:none;
        -moz-box-shadow:inset 0px 0px 1px #fff;
        -webkit-box-shadow:inset 0px 0px 1px #fff;
        border:1px solid #ccc;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        background:#e2e2e2;
        background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
      }
 
      #dropdown_nav li {
  padding:10px 0px 10px 0px;
  float:left;
  position:relative;
  display:inline-block;
      }
 
      #dropdown_nav li a {
        padding:10px 15px 10px 15px;
        text-shadow:-1px 1px 0px #f6f6f6;
        -moz-box-shadow:inset 0px 0px 1px #fff;
        -webkit-box-shadow:inset 0px 0px 1px #fff;
        border-right:1px solid #ccc;
      }
      #dropdown_nav li a:hover {
        background:#f9f9f9;
        background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
      }
      #dropdown_nav li a:active {
        background:#e2e2e2;
        background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
      }
 
      #dropdown_nav li a.first {
        -moz-border-radius:5px 0px 0px 5px;
        -webkit-border-radius:5px 0px 0px 5px;
      }
      /*#dropdown_nav li a.last {
      -moz-border-radius:0px 5px 5px 0px;
      -webkit-border-radius:0px 5px 5px 0px;
    }
      */
 
      /* Sub-Nav styling */
      #dropdown_nav .sub_nav {
        width:160px;
        padding:0px;
        position:absolute;
        top:38px;
        left:0px;
        border:1px solid #ccc;
        background:#e2e2e2;
      }
 
      #dropdown_nav .sub_nav li {
        width:160px;
        padding:0px;
      }
 
      #dropdown_nav .sub_nav li a {
        display:block;
        border-bottom:1px solid #ccc;
        background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
      }
      #dropdown_nav .sub_nav li a:hover {
        background:#f9f9f9;
        background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
      }
      #dropdown_nav .sub_nav li a:active {
        background:#e2e2e2;
        background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
      }
</style>
<!-- Navigation Start -->
<ul id="dropdown_nav">
  <li><a class="first" href="http://duniaradioku.blogspot.com/">Home</a></li>
  <li><a href="#">Categories</a>
   <ul class="sub_nav">
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Categories</a></li>
   </ul>
  </li>
  <li><a href="#">Exchange</a>
   <ul class="sub_nav">
    <li><a href="#">Exchange</a></li>
    <li><a href="#">Exchange</a></li>
    <li><a href="#">Exchange</a></li>
    <li><a href="#">Exchange</a></li>
   </ul>
  </li>
  <li><a href="#">Freebies</a>
  </li>
  <li><a class="last" href="#">Other Stuff</a>
   <ul class="sub_nav">
    <li><a href="#">Other Stuff </a></li>
    <li><a href="#">Other Stuff</a></li>
    <li><a href="#">Other Stuff </a></li>
    <li><a href="#">Other Stuff </a></li>
   </ul>
  </li>
 </ul>

  • Klik Tataletak 
  • Add Gadget / HTML Javascript 
  • Masukan kode diatas 
  • Save dan lihat hasilnya  
Catatan : 
Kalau pada template brada sudah terpasang kode Jquery hilangkan kode dibawah ini . 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
"#" Ganti dengan link sobat

Good Luck ...!!!
Source : Bloggeryard
Label:

Komentar

  1. Kang IsmetMinggu, Agustus 18, 2013

    Ngiring nongkrong ah.. bari ngadon ngopi :)

    BalasHapus
    Balasan
    1. Sopala MultapaMinggu, Agustus 18, 2013

      Walah aya tamu agung yeuhhh
      Mangga kang .. sakantenan ieu aya goreng cau hehe

      Hapus
    2. dedetea66Minggu, Agustus 18, 2013

      ngiluaan ach ngopi jeung aya goreng cau deuih euyy

      Hapus
    3. Sopala MultapaSenin, Agustus 19, 2013

      sok atuh kang beleum sampena kadiekeun ....hha

      Hapus
  2. AnonimMinggu, Agustus 18, 2013

    keren banget kang Ruly artikel Jquery And CSS3 Menu Barnya, makasih udah share ijin save yah :)

    BalasHapus
  3. abang ichalMinggu, Agustus 18, 2013

    mantap mantap.. keknya ada di situs luar

    BalasHapus
    Balasan
    1. Sopala MultapaMinggu, Agustus 18, 2013

      iya sob .. itu ada di info sourcenya

      Hapus
    2. abang ichalSenin, Agustus 19, 2013

      oo iyo dihh kecil nya tulisannya sampe" sy nda lihat tadi

      Hapus
  4. AnonimMinggu, Agustus 18, 2013

    kalau ada yang bagus bagus jadi pengen masang jadinya... suruput kopi hola ah

    BalasHapus
    Balasan
    1. dedetea66Minggu, Agustus 18, 2013

      mangga Mang langsung disuruput waelah ,,,

      Hapus
    2. Sopala MultapaSenin, Agustus 19, 2013

      silahkan pasang mang ... mumpung gratis wkwkwkwk

      Hapus
  5. dedetea66Minggu, Agustus 18, 2013

    Parantos aya nu enggal deui pemirsa sadaya,mangga bilih hoyong nyobian Tutor nu pang enggalna sumpingan waee blogna Kang Ruli anu pangkasepna sa Cianjur kidul heuheu

    BalasHapus
  6. AnonimSenin, Agustus 19, 2013

    waw kodenya banyak banget.
    thx ^_^

    BalasHapus
    Balasan
    1. Sopala MultapaSenin, Agustus 19, 2013

      it kalau dipisahkan sob .. tapi cukup ringan ko

      Hapus
  7. Mang LembuSenin, Agustus 19, 2013

    udah lama pisan saya teh ngga ngutak ngatik jeroan blog, pengen mah pengen...tapinya bakal jlimet dan butuh waktu nyantai euy.
    udah diklik demonya...keren banget tuh...cuman lodingnya bakal berat ngga yah?

    BalasHapus
    Balasan
    1. Sopala MultapaSenin, Agustus 19, 2013

      ya kalau ada waktu aja sob...
      lumayan ringan

      Hapus
  8. M. Alex JoenaediSenin, Agustus 19, 2013

    wahhhhh mantap,,,,,,,
    tadinamah rek make link aktif tapi sieun Ko'OD euyyyy wkwkkwkkwkkw

    BalasHapus
  9. AnonimSenin, Agustus 19, 2013

    aduhh.. kodenya banyak sekali,, kepala saya pusing gan :D

    BalasHapus
    Balasan
    1. Sopala MultapaSelasa, Agustus 20, 2013

      jangan dibikn pusing sob .. toh tinggal masukin doang ko !!!...

      Hapus
  10. ulimayangSelasa, Agustus 20, 2013

    Pengen ini penhen itu semua dipasang jd berat gak ya? Nice tar utik2 kalo dah luang

    BalasHapus
  11. Eka IkhsanudinSelasa, Agustus 20, 2013

    ngronda tengah malam sambil baca2 artikel tutorialnya Kang Ruly hehehe..
    Met mlm kang, maaf baru bisa hadir lagi ... :)

    BalasHapus
  12. AnonimRabu, Agustus 21, 2013

    mantap pisan atuh kang menunya top markotop ajip ajipp..

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya