Jumat, 16 Juli 2010

Large Drop Down Menu

Tadinya mau meng-convert template yang masih pakai kode klasik ke kode blogspot sekarang, eh malah puyeung kepalanya ~X( gak jadi deh :D Banting setir BW ke web-web developer menemukan kembali menu yg gaya punya nih sob b-) Oh iyah sekedar ngasih tau aja nih, kalo mau search tentang artikel yg dicari diblog aku ini tinggal masukkan kata yg bersangkutan dengan artikel yg dicarinya ya sob ;) Pasti gak ada deh =)) kidding... :D Seperti keyword menu, maka akan terbuka deh kata-kata yg ada kata menunya sob :)

Artikel gaya hasil BW juga mengenai menu nih. Tidak tanggung-tanggung menu yg diciptakan ini diberi nama Large Drop Down Menu :-bd Cek ge dot brooo...

Bagaimana setelah melihat live demonya :-? ah pasti pada mau kan dg menu yg kayak itu :x Sikaaat mang...ayeh
  1. Kode CSS letakkan diatas/sebelum kode ]]></b:skin>
    2. ul.ldd_menu{
    margin:0px;
    padding:0;
    display:block;
    height:35px;
    background-color:#09689F;
    list-style:none;
    font-family:"Trebuchet MS", sans-serif;
    border-top:1px solid #10608E;
    border-bottom:1px solid #10608E;
    border-left:10px solid #09689F;
    -moz-box-shadow:0px 3px 4px #591E12;
    -webkit-box-shadow:0px 3px 4px #591E12;
    -box-shadow:0px 3px 4px #591E12;
    }
    ul.ldd_menu a{
    text-decoration:none;
    }
    ul.ldd_menu > li{
    float:left;
    position:relative;
    }
    ul.ldd_menu > li > span{
    float:left;
    color:#fff;
    background-color:#09689F;
    height:35px;
    line-height:35px;
    cursor:default;
    padding:0px 10px;
    text-shadow:0px 0px 1px #fff;
    border-right:1px solid #0E5A85;
    border-left:1px solid #0E5A85;
    }
    ul.ldd_menu .ldd_submenu{
    position:absolute;
    top:35px;
    width:550px;
    display:none;
    opacity:0.95;
    left:0px;
    font-size:10px;
    background: #09689F;
    border-top:1px solid #10608E;
    -moz-box-shadow:0px 3px 4px #591E12 inset;
    -webkit-box-shadow:0px 3px 4px #591E12 inset;
    -box-shadow:0px 3px 4px #591E12 inset;
    }
    a.ldd_subfoot{
    background-color:#1C5E7E;
    color:#fff;
    display:block;
    clear:both;
    padding:5px 10px;
    text-transform:uppercase;
    text-align:center;
    font-family: Arial, serif;
    font-size:12px;
    text-shadow:0px 0px 1px #0f0;
    -moz-box-shadow:0px 0px 2px #999 inset;
    -webkit-box-shadow:0px 0px 2px #999 inset;
    -box-shadow:0px 0px 2px #999 inset;
    }
    ul.ldd_menu ul{
    list-style:none;
    float:left;
    border-left:1px solid #09f;
    margin:20px 0px 10px 30px;
    padding:10px;
    }
    li.ldd_heading{
    font-family: Georgia, serif;
    font-size: 13px;
    text-decoration:underline;
    color:#F72B25;
    text-shadow:0px 0px 1px #B03E23;
    padding:0px 0px 10px 0px;
    }
    ul.ldd_menu ul li a{
    font-family: Arial, serif;
    font-size:10px;
    line-height:20px;
    color:#fff;
    padding:1px 3px;
    }
    ul.ldd_menu ul li a:hover{
    -moz-box-shadow:0px 0px 2px #333;
    -webkit-box-shadow:0px 0px 2px #333;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0px 0px 2px #333;
    background:#4096EE;
    }
  2. Kode HTML letakkan didalam tag <body>
    3. <ul id="ldd_menu" class="ldd_menu">
    <li>
    <span>TITLE1</span><!-- Increases to 510px in width-->
    <div class="ldd_submenu">
    <ul>
    <li class="ldd_heading">Your-Title</li>
    <li><a href="#">Your Title1</a></li>
    <li><a href="#">Your Title2</a></li>
    <li><a href="#">Your Title3</a></li>
    <li><a href="#">Your Title4</a></li>
    <li><a href="#">Your Title5</a></li>
    </ul>
    <ul>
    <li class="ldd_heading">Your-Title</li>
    <li><a href="#">Your Title1</a></li>
    <li><a href="#">Your Title2</a></li>
    <li><a href="#">Your Title3</a></li>
    <li><a href="#">Your Title4</a></li>
    <li><a href="#">Your Title5</a></li>
    <li><a href="#">Your Title6</a></li>
    </ul>
    <ul>
    <li class="ldd_heading">Your-Title</li>
    <li><a href="#">Your Title1</a></li>
    <li><a href="#">Your Title2</a></li>
    <li><a href="#">Your Title3</a></li>
    <li><a href="#">Your Title4</a></li>
    <li><a href="#">Your Title5</a></li>
    <li><a href="#">Your Title6</a></li>
    </ul>
    <a class="ldd_subfoot" href="#"> + New Title</a>
    </div>
    </li>
    <li>
    <span>TITLE2</span>
    <div class="ldd_submenu">
    <ul>
    <li class="ldd_heading">Your-Title</li>
    <li><a href="#">Your Title1</a></li>
    <li><a href="#">Your Title2</a></li>
    <li><a href="#">Your Title3</a></li>
    <li><a href="#">Your Title4</a></li>
    <li><a href="#">Your Title5</a></li>
    </ul>
    <ul>
    <li class="ldd_heading">Your-Title</li>
    <li><a href="#">Your Title1</a></li>
    <li><a href="#">Your Title2</a></li>
    <li><a href="#">Your Title3</a></li>
    <li><a href="#">Your Title4</a></li>
    <li><a href="#">Your Title5</a></li>
    <li><a href="#">Your Title6</a></li>
    </ul>
    <ul>
    <li class="ldd_heading">Your-Title</li>
    <li><a href="#">Your Title1</a></li>
    <li><a href="#">Your Title2</a></li>
    <li><a href="#">Your Title3</a></li>
    <li><a href="#">Your Title4</a></li>
    <li><a href="#">Your Title5</a></li>
    <li><a href="#">Your Title6</a></li>
    </ul>
    <a class="ldd_subfoot" href="#"> + New Title</a>
    </div>
    </li>
    <li>
    <span>TITLE3</span>
    <div class="ldd_submenu">
    <ul>
    <li class="ldd_heading">Your-Title</li>
    <li><a href="#">Your Title1</a></li>
    <li><a href="#">Your Title2</a></li>
    <li><a href="#">Your Title3</a></li>
    <li><a href="#">Your Title4</a></li>
    <li><a href="#">Your Title5</a></li>
    </ul>
    <ul>
    <li class="ldd_heading">Your-Title</li>
    <li><a href="#">Your Title1</a></li>
    <li><a href="#">Your Title2</a></li>
    <li><a href="#">Your Title3</a></li>
    <li><a href="#">Your Title4</a></li>
    <li><a href="#">Your Title5</a></li>
    <li><a href="#">Your Title6</a></li>
    </ul>
    <ul>
    <li class="ldd_heading">Your-Title</li>
    <li><a href="#">Your Title1</a></li>
    <li><a href="#">Your Title2</a></li>
    <li><a href="#">Your Title3</a></li>
    <li><a href="#">Your Title4</a></li>
    <li><a href="#">Your Title5</a></li>
    <li><a href="#">Your Title6</a></li>
    </ul>
    <a class="ldd_subfoot" href="#"> + New Title</a>
    </div>
    </li>
    </ul>
  3. Letakkan script berikut!!!
    4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
    /*** the menu  */
     var $menu = $('#ldd_menu');
    /**
    * for each list element,
    * we show the submenu when hovering and
    * expand the span element (title) to 510px
    */
     $menu.children('li').each(function(){
     var $this = $(this);
     var $span = $this.children('span');
     $span.data('width',$span.width());
     $this.bind('mouseenter',function(){
          $menu.find('.ldd_submenu').stop(true,true).hide();
          $span.stop().animate({'width':'510px'},300,function(){
           $this.find('.ldd_submenu').slideDown(300);
     });
    }).bind('mouseleave',function(){
          $this.find('.ldd_submenu').stop(true,true).hide();
          $span.stop().animate({'width':$span.data('width')+'px'},300);
      });
     });
    });
    </script>
  4. Save.
Pada langkah ke-3 ada script yg Beben beri warna biru. Itu script plug-in sob, jadi jika sobat sudah memiliki script yg tidak Beben birukan tinggal memasukkan saja script plug-innya :-/ Penempatannya bisa sama seperti contoh diatas, kalau tidak berhasil letakkanlah script plugin diatas/sebelum tag </body> Screenshot for my modification coded of CSS and HTML :D

Bye bye...see you, WassaLam :-h :)

Diposting oleh di
Label: , , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)