Tutorial#16 : Buat menu dan sub menu

by - 7:49:00 PM

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..

Share
Tweet
Pin
Share
Tags :

You May Also Like

5 comments

  1. muhammad asyrafSeptember 14, 2012 at 7:57 PM

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

    ReplyDelete
  2. Najiah ShaharainSeptember 14, 2012 at 7:58 PM

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

    ReplyDelete
  3. surianah UTKDecember 18, 2013 at 10:45 PM

    TERIMA KASIH SAYA BERJAYA :)

    ReplyDelete
  4. Ismi MASTURAOctober 10, 2014 at 7:40 PM

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

    ReplyDelete