jQuery CSS Menu Drop Down

Friday, May 11, 2012 CSS Tuts+ | Posted by : | 1 comment
Home » CSS » CSS Navigation » jQuery » Menu Navigation » jQuery CSS Menu Drop Down
jQuery CSS Menu Drop Down
Inspirasi UNDER88 dari webtoolkit.info

jQuery CSS Menu Drop Down

UNDER88 - jQuery ini berdasarkan basic css menu drop down adalah ilustrasi sangat sederhana yang tidak memerlukan coding dramatis untuk mencapai sederhana 2 menu tingkat.
Css menu drop down hanya didasarkan pada fungsi Cascading style sheet (CSS), tetapi pada beberapa tidak lama Sebuah browser kelas mereka kekurangan beberapa fitur.
Dalam contoh ini saya menggunakan jQuery plugin yang sangat sederhana hanya dengan mengarahkan "mouse" , dan menambahkan / menghapus beberapa kelas dari beberapa elemen.
Silahkan merekomendasikan hal ini jika Anda suka!


Contoh Penempatan pada HTML template .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Webtoolkit.info jQuery menu</title>
  <style type="text/css">
   #navigation {
    font-family: georgia;
    font-size: 18px;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
   }
    #navigation li {
     position: relative;
     float: left;
     margin: 0px 1px 0px 0px;
    }
     #navigation li a {
      display: block;
      padding: 5px 35px;
      -moz-border-radius-topleft: 5px;
      -webkit-border-top-left-radius: 5px;
      -moz-border-radius-topright: 5px;
      -webkit-border-top-left-right: 5px;
      background: #cc0000;
      color: #ffffff;
      text-decoration: none;
     }
 
    #navigation li ul {
     position: absolute;
     left: 0px;
     top: 0px;
     display: none;
     padding: 0px;
     margin: 0px;
     list-style-type: none;
    }
 
    #navigation li.over {
     top: 1px;
    }
 
     #navigation li.over a {
      background: #009bcc;
     }
 
    #navigation li.over ul {
     padding: 5px!important;
     display: block;
     background: #009bcc;
     -moz-border-radius-bottomleft: 5px;
     -webkit-border-bottom-left-radius: 5px;
     -moz-border-radius-bottomright: 5px;
     -webkit-border-bottom-left-right: 5px;
     -moz-border-radius-topright: 5px;
     -webkit-border-bottom-top-right: 5px;
    }
     #navigation li.over ul li {
      float: none;
      margin: 0px!important;
      top: 0px;
     }
     #navigation li.over ul li a {
      font-size: 14px;
      padding: 3px 30px;
      background: none;
      white-space: nowrap;
     }
     #navigation li.over ul li a:hover {
      background: #00bbf7;
      color: #000000;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
     }
 
  </style>
 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
   (function($){
    $.fn.extend({
     //plugin name - animatemenu
     webtoolkitMenu: function(options) {
      return this.each(function() {
 
       //Assign current element to variable, in this case is UL element
       var obj = $(this);
 
       $("li ul", obj).each(function(i) {
        $(this).css('top', $(this).parent().outerHeight());
       })
 
       $("li", obj).hover(
        function () { $(this).addClass('over'); },
        function () { $(this).removeClass('over'); }
       );
 
      });
     }
    });
   })(jQuery);
 
   $(document).ready(function() {
     $('#navigation').webtoolkitMenu();
   });
  </script>
    </head>
    <body>
 
  <ul id="navigation"><!--
   --><li><a href="">Sign up</a></li><!--
   --><li><a href="">Orders</a><!--
    --><ul><!--
     --><li><a href="">Dashboard</a></li><!--
     --><li><a href="">Order list</a></li><!--
    --></ul><!--
   --></li><!--
   --><li><a href=""><span><span>My account</span></span></a><!--
    --><ul><!--
     --><li><a href="">Dashboard</a></li><!--
     --><li><a href="">Profile</a></li><!--
     --><li><a href="">Change password</a></li><!--
    --></ul><!--
   --></li><!--
  --></ul>
 
 </body>
</html>

Langkah Pemasangan Menu Dropdown Blogger


1. Masuk Pada Edit HTML template.cari code ]]></b:skin> dan masukan code CSS di bawah ini tepat di atas code tersebut :

#navigation {font-family: georgia;font-size: 18px;padding: 0px;margin: 0px;list-style-type: none;}
#navigation li {position: relative;float: left;margin: 0px 1px 0px 0px;}
#navigation li a {display: block;padding: 5px 35px;-moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px;-moz-border-radius-topright: 5px;-webkit-border-top-left-right: 5px;background: #cc0000;color: #ffffff;text-decoration: none;}
#navigation li ul {position: absolute;left: 0px;top: 0px;display: none;padding: 0px;margin: 0px;list-style-type: none;}
#navigation li.over {top: 1px;}
#navigation li.over a {background: #009bcc;}
#navigation li.over ul {padding: 5px!important;display: block;background: #009bcc;-moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-left-right: 5px;-moz-border-radius-topright: 5px;-webkit-border-bottom-top-right: 5px;}
#navigation li.over ul li {float: none;margin: 0px!important;top: 0px;}
#navigation li.over ul li a {font-size: 14px;padding: 3px 30px;background: none;white-space: nowrap;}
#navigation li.over ul li a:hover {background: #00bbf7;color: #000000;-moz-border-radius: 5px;-webkit-border-radius: 5px;}

2. Cari Code </head> dan simpan Script di bawah ini tepat di atas code tersebut :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
   (function($){
    $.fn.extend({
     //plugin name - animatemenu
     webtoolkitMenu: function(options) {
      return this.each(function() {
 
       //Assign current element to variable, in this case is UL element
       var obj = $(this);
 
       $("li ul", obj).each(function(i) {
        $(this).css('top', $(this).parent().outerHeight());
       })
 
       $("li", obj).hover(
        function () { $(this).addClass('over'); },
        function () { $(this).removeClass('over'); }
       );
 
      });
     }
    });
   })(jQuery);
 
   $(document).ready(function() {
     $('#navigation').webtoolkitMenu();
   });
  </script>
Catatan :
Jika pada template anda sudah ada jQuery seperti Script di atas yang di garis bawahi,Anda tidak perlu memasukan Script tersebut lagi.

3. Ini langkah terakhir dimana menu yang anda ingin tampilkan.
jika ingin menyimpannya di atas Postingan atau di bawah Header maka ini langkah penempatannya :

cari code <div id="header"/> atau <div id="main-wrapper"/> setiap template berbeda-beda dan andapun bisa menyimpannya pada widget HTML/javascript pada edit Layout  jika sudah mengerti langkah penyimpanannya. anda tinggal masukan code HTML di bawah ini :

<ul id="navigation"><!--
   --><li><a href="">Sign up</a></li><!--
   --><li><a href="">Orders</a><!--
    --><ul><!--
     --><li><a href="">Dashboard</a></li><!--
     --><li><a href="">Order list</a></li><!--
    --></ul><!--
   --></li><!--
   --><li><a href=""><span><span>My account</span></span></a><!--
    --><ul><!--
     --><li><a href="">Dashboard</a></li><!--
     --><li><a href="">Profile</a></li><!--
     --><li><a href="">Change password</a></li><!--
    --></ul><!--
   --></li><!--
  --></ul>

Selesai, dan simpan template anda lalu lihat hasilnya...
Jika ada kesalahan silahkan tinggalkan komentar anda untuk menemukan solusinya

sumber dalam bahasa inggis : www.webtoolkit.info
Wasallamualaikum Wr.Wb
DMCA.com

1 comments:

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

Subscribe to: Post Comments (RSS)
 
loading...
Top