Tutorial#16 : Buat menu dan sub menu

by - September 15, 2012

ok..tengok gambar dah ada idea tak..(maksud menu dan sub menu)

serius,aku sangat excited untuk buat tuto ini,kerana tuto ini walaupun agak complicated..namun hasilnya sangat berpuas hati.Baiklah,tanpa keraguan lagi marilah kita memulakan tuto yang cool ini.^___________^

  • Dashboard >> Design >> Edit Html >Expand tick widget
  • Ctrl +F cari ]]></b:skin> 
  • copy kod dibawah dan pastekan DIATAS KOD yang korang cari tadi
#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}
warna MERAH itu korang ubahlah mengikut citarasa:D
  • kemudian,CTRL +F cari kod ini pulak <head>
  • copy kod dibawah dan paste SEBELUM KOD tadi <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible');} function jsddm_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function jsddm_timer() { closetimer = window.setTimeout(jsddm_close, timeout);} function jsddm_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}} $(document).ready(function() { $('#jsddm > li').bind('mouseover', jsddm_open) $('#jsddm > li').bind('mouseout', jsddm_timer)}); document.onclick = jsddm_close; //]]> </script>

  • SAVE LAJU2.. KEMUDIAN,BUKAK PAGE ELEMENT DAN BUKA NEW ADD HTML/JAVASCRIPT
  • COPY KOD DIBAWAH DAN PASTEKAN 
<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">AllBlogTools</a></li>
  </li></ul>

  • Dan klik SAVE.
INGATAN:
korang isi lah apa-apa yang berkaitan
semoga berjaya semua!!!>_____________< senang kan tuto ini..

You May Also Like

5 comments

  1. thanks for sharing.. tengah cari macamana nak buat.. tapi takutlah nak buat..takut lari..

    ReplyDelete
  2. @muhammad asyraftak lari mane pun..^^backup dulu template,if tak ambik risiko kan..hihihi

    ReplyDelete
  3. Assalamualaikum Najiah.. Thanks for sharing
    Akak baru nak try..Tapi tak jumpa expand tick widget tu

    ReplyDelete