Membuat menu dengan JSCookMenu

Berikut adalah cara untuk membuat menu dengan JSCookMenu :

1. Pertama-tama download dahulu library jscookmenu yang terbaru dan ThemeOffice2003 silahkan download disini
2. Setelah library dan theme sudah didownload, buatlah folder dengan nama DEMO
3. Extract library jscookmenu, Extract Here
   
   
   setelah diextract terdapat 2 file yaitu effect.js, JSCookMenu.js.
   
   
   Copy dua file tersebut dan taruh didalam folder DEMO
4. Setelah itu Extract Theme yang sudah didownload ThemeOffice2003 Extract Here
   
   
   Setelah diextract taruh hasil extract didalam folder DEMO
   
5. Buatlah folder images didalam folder DEMO, dan simpan icon dibawah ini didalam folder images.
   
   
6. kira-kira isi dari folder DEMO seperti gambar dibawah ini, silahkan dicocokkan dengan punya anda.
   
   
7. Buatlah file dengan nama menu.html
   Copy kode dibawah ini
   

   <!--- menu js cook sesuaikan dengan folder anda--->
   <script type="text/javascript" src="effect.js"></script>
   <script type="text/javascript" src="JSCookMenu.js"></script>
   <link rel="stylesheet" href="ThemeOffice2003/theme.css" type="text/css">
   <script type="text/javascript" src="ThemeOffice2003/theme.js"></script>
   
   <table border="0" width="100%">
       <tr>
           <td valign="middle" style="background-color:<?php echo BGMN;?>; height:30px;">
               <div id="myMenuID">
                   <script type="text/javascript"><!--
                   var myMenu =
                   [
                       ['<img src="images/icon.png" width="16" height="16" />', ' Home', '?menu=home', '_self', ' Home'],
                       _cmSplit,
                       ['<img src="images/icon.png" width="16" height="16" />', ' System Setting', '', '_self', ' System Setting',
                           ['<img src="images/icon.png" width="16" height="16" />', ' Setting Banner', '?menu=setting_banner', '_self', ' Setting Banner'],
                           ['<img src="images/icon.png" width="16" height="16" />', ' Setting Text Banner', '?menu=setting_text_banner', '_self', ' Setting Text Banner',
                               ['<img src="images/icon.png" width="16" height="16" />', ' Setting Text Footer', '?menu=setting_text_footer', '_self', ' Setting Text Footer'],
                               ['<img src="images/icon.png" width="16" height="16" />', ' Setting Text Footer', '?menu=setting_text_footer', '_self', ' Setting Text Footer'],
                               ['<img src="images/icon.png" width="16" height="16" />', ' Setting Text Footer', '?menu=setting_text_footer', '_self', ' Setting Text Footer']
                           ],
                           ['<img src="images/icon.png" width="16" height="16" />', ' Setting Text Footer', '?menu=setting_text_footer', '_self', ' Setting Text Footer'],
                           ['<img src="images/icon.png" width="16" height="16" />', ' Setting Text Halaman Utama', '?menu=setting_text_halaman_utama', '_self', ' etting Text Halaman Utama'],
                           ['<img src="images/icon.png" width="16" height="16" />', ' Setting System Template', '?menu=setting_system_template', '_self', ' etting System Template'],
                           ['<img src="images/icon.png" width="16" height="16" />', ' Setting favicon', '?menu=setting_favicon', '_self', ' Setting favicon'],
                           ['<img src="images/icon.png" width="16" height="16" />', ' Setting Title', '?menu=setting_title', '_self', ' Setting Title'],
                           ['<img src="images/icon.png" width="16" height="16" />', ' Setting Languages', '?menu=setting_languages', '_self', ' Setting Languages'],
                           ['<img src="images/icon.png" width="16" height="16" />', ' Setting Menu Template', '?menu=setting_menu_template', '_self', ' Setting Menu Template'],
                           ['<img src="images/icon.png" width="16" height="16" />', ' Setting Background Template', '?menu=setting_background_template', '_self', ' Setting Background Template'],
                           ['<img src="images/icon.png" width="16" height="16" />', ' Setting Background Content', '?menu=setting_background_content', '_self', ' Setting Background Content'],
                           ['<img src="images/icon.png" width="16" height="16" />', ' Manajemen Menu Part 3', '?menu=setting_menu3', '_self', ' Manajemen Menu Part 3']
                       ],
                       _cmSplit,
                       ['<img src="images/icon.png" width="16" height="16" />', ' Logout', '?menu=home', '_self', ' Logout']
                   ];
                   cmDraw ('myMenuID', myMenu, 'hbr', cmThemeOffice2003, 'ThemeOffice2003');
                   --></script>
               </div>
           </td>
       </tr>
   </table>
   

8. Isi folder DEMO, hasil akhir
   
   
   
   
   
9. SELESAI, SEMOGA BERHASIL...!!!

Posted in: Baca Juga