Loading halaman Tutorial Visual Basic, Delphi, PHP - Calon Programer : Membuat Accordion Menu script ...
» » Membuat Accordion Menu script

6:16 AM
0
Cara membuat menu accordion di web atau pada php sesungguhnya cukup simple dan ga banyak-banyak amat script nya,disini akan saya beri satu buah contoh dalam membuat menu accordion,mungkin bagi mahasiswa.Menu ini sudah ga asing lagi bentuk dan tampilan dari menu accordion nya.
Sample :













Berikut penampakannya :


Gimana???cukup dikenal kan menu accordion nya :p
File-file yang kalian butuhkan dan persiapkan sebelum mencoba membuat nya :
File Javascript : Downliad (klik kanan> save as)
File Jquery : Downliad (klik kanan> save as)
File Image : (klik kanan>save as)
Berikut Code nya :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
  3.   
  4. <script type="text/javascript" src="js/jquery.min.js"></script>  
  5.   
  6. <script type="text/javascript" src="js/ddaccordion.js"></script>  
  7.   
  8. <script type="text/javascript">  
  9.   
  10. //Initialize Arrow Side Menu:  
  11. ddaccordion.init({  
  12.     headerclass: "menuheaders", //Shared CSS class name of headers group  
  13.     contentclass: "menucontents", //Shared CSS class name of contents group  
  14.     revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", or "mouseover"  
  15.     mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover  
  16.     collapseprev: true, //Collapse previous content (so only one open at any time)? true/false   
  17.     defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.  
  18.     onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)  
  19.     animatedefault: false, //Should contents open by default be animated into view?  
  20.     persiststate: true, //persist state of opened contents within browser session?  
  21.     toggleclass: ["unselected", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]  
  22.     togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)  
  23.     animatespeed: 500, //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"  
  24.     oninit:function(expandedindices){ //custom code to run when headers have initalized  
  25.         //do nothing  
  26.     },  
  27.     onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed  
  28.         //do nothing  
  29.     }  
  30. })  
  31.   
  32. </script>  
  33.   
  34. <style type="text/css">  
  35.   
  36. .arrowsidemenu{  
  37.     width: 180px; /*width of menu*/  
  38.     border-style: solid solid none solid;  
  39.     border-color: #94AA74;  
  40.     border-size: 1px;  
  41.     border-width: 1px;  
  42. }  
  43.       
  44. .arrowsidemenu div a{ /*header bar links*/  
  45.     font: bold 12px Verdana, Arial, Helvetica, sans-serif;  
  46.     display: block;  
  47.     background: transparent url(arrowgreen.gif) 100% 0;  
  48.   height: 24px; /*Set to height of bg image-padding within link (ie: 32px - 4px - 4px)*/  
  49.     padding: 4px 0 4px 10px;  
  50.     line-height: 24px; /*Set line-height of bg image-padding within link (ie: 32px - 4px - 4px)*/  
  51.     text-decoration: none;  
  52. }  
  53.       
  54. .arrowsidemenu div a:link, .arrowsidemenu div a:visited{  
  55.     color: #26370A;  
  56. }  
  57.   
  58. .arrowsidemenu div a:hover{  
  59.     background-position: 100% -32px;  
  60. }  
  61.   
  62. .arrowsidemenu div.unselected a{ /*header that's currently not selected*/  
  63.     color: #6F3700;  
  64. }  
  65.   
  66.       
  67. .arrowsidemenu div.selected a{ /*header that's currently selected*/  
  68.     color: blue;  
  69.     background-position: 100% -64px !important;  
  70. }  
  71.   
  72. .arrowsidemenu ul{  
  73.     list-style-type: none;  
  74.     margin: 0;  
  75.     padding: 0;  
  76. }  
  77.   
  78. .arrowsidemenu ul li{  
  79.     border-bottom: 1px solid #a1c67b;  
  80. }  
  81.   
  82.   
  83. .arrowsidemenu ul li a{ /*sub menu links*/  
  84.     display: block;  
  85.     font: normal 12px Verdana, Arial, Helvetica, sans-serif;  
  86.     text-decoration: none;  
  87.     color: black;  
  88.     padding: 5px 0;  
  89.     padding-left: 10px;  
  90.     border-left: 10px double #a1c67b;  
  91. }  
  92.   
  93. .arrowsidemenu ul li a:hover{  
  94.     background: #d5e5c1;  
  95. }  
  96.   
  97. </style>  
  98.   
  99. <body>  
  100.   
  101. <div class="arrowsidemenu">  
  102.   
  103. <div><a href="" title="Home">Home</a></div>  
  104. <div class="menuheaders"><a href="" title="CSS">Cp</a></div>  
  105.     <ul class="menucontents">  
  106.     <li><a href="#">Horizontal CSS Menus</a></li>  
  107.     <li><a href="#">Vertical CSS Menus</a></li>  
  108.     <li><a href="#">Image CSS</a></li>  
  109.     <li><a href="#">Form CSS</a></li>  
  110.     <li><a href="#">DIVs and containers</a></li>  
  111.     <li><a href="#">Links & Buttons</a></li>  
  112.     <li><a href="#">Other</a></li>  
  113.     </ul>  
  114.   
  115. <div><a href="/" title="Tools">Calon Programer</a></div>  
  116.   
  117. </div>  
  118.   
  119.   
  120. </body>  
  121.   
  122. </html>  

Gimana cara menggunakan script diatas???
Silahkan kalian copy script diatas ke dalam "notepad" dan simpan sebaga file html/php
lalu jalankan file tsb di browser
Perhatikan script berikut :
  1. <script type="text/javascript" src="js/jquery.min.js"></script>  
  2.   
  3. <script type="text/javascript" src="js/ddaccordion.js"></script>  
Script diatas itu menandakan bahwa lokasi file html/php yg telah kalian buat,memiliki struktur penyimpanan sbb :
Bagaimana?cukup mudah bukan pembuatan menu accordion???
Semoga Bermanfaat :)

Jika kalian ingin melihat dari sumber,silahkan kunjungi :
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-arrow.htm
Owner on 6:16 AM
Labels:

Tagg :

0 Reply :

Posting Komentar

Jika ada pertanyaan atau request,Komentar pada tab blogger akan lebih memudahkan saya untuk membalasnya karena lebih mudah melakukan pengecekan komentar.

Langganan: Posting Komentar ( Atom )