Pages

▼

Pages

▼

Tuesday, 11 September 2012

ဘေလာ့မွာSmooth-Navigational-Menu-ေလးသံုးခ်င္၇င္


ဘေလာ့မွာ Smooth-Navigational-Menu- သံုခ်င္တဲ့ဘေလာ့ဂါမိတ္ေဆြေတြအတြက္ပါအ၇မ္းရွင္းပါတယ္၊ က်ေနာ္ေအာက္မွာပံုနဲ႕တကြျပထားေပးပါတယ္၊ဒီ Smooth-Navigational-Menu ကႏွစ္မ်ိဳးရိွပါတယ္ !! တစ္ခုကအလ်ွာလိုက္နွင့္ေဒါင္လိုက္ေပါ့ေနာ္၊တစ္ခုထဲမွာလင့္ခ္ေတြကိုအမ်ားၾကီးထည့္လို႕၇ပါတယ္။
ဘေလာ့ဆိုက္ဘားမွာထည့္ဒါထက္ပိုျပီးၾကည့္လို႕လည္းလွတာေပါ့ေနာ္၊က်ေနာ္ေအာက္မွာသြားၾကည့္လို႕ ၇ေအာင္လည္း DEMO လင့္ခ္လည္းေပးထားပါတယ္။အခုက်ေနာ္သံုေနတဲ့ Navigational-Menu ကလည္း က်ေနာ္စိတ္တိုင္းက်လုပ္ထားတာပါ၊ Menu maker ကေနၾကိဳက္၇င္လည္းေျပာၾကပါ၊ တင္ေပးဖို႕စိတ္ကူးထားပါတယ္၊မအားေသးလို႕ပါ ။




၁။Layout

၂။Edit HTML

ေအာက္က Code ကိုရွာ။

  1. <head>  
ေတြ႕ျပီဆို၇င္ေအာက္မွာ ေအာက္က Code ကိုထည့္လိုက္ပါ၊၊

  1. <link href='http://www.ibizeye.com/Menu-in-Blogger/dropdown-menu-blogger/ddsmoothmenu.css' rel='stylesheet' type='text/css'/>  
  2. <link href='http://www.ibizeye.com/Menu-in-Blogger/dropdown-menu-blogger/ddsmoothmenu-v.css' rel='stylesheet' type='text/css'/>  
  3. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>  
  4. <script src='http://www.ibizeye.com/Menu-in-Blogger/dropdown-menu-blogger/ddsmoothmenu.js' type='text/javascript'>  
  5. /*********************************************** 
  6. * Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) 
  7. * This notice MUST stay intact for legal use 
  8. * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code 
  9. ***********************************************/  
  10. </script>  
  11. <script type='text/javascript'>  
  12. ddsmoothmenu.init({  
  13.  mainmenuid: "smoothmenu1", //menu DIV id  
  14.  orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"  
  15.  classname: 'ddsmoothmenu', //class added to menu's outer DIV  
  16.  //customtheme: ["#1c5a80", "#18374a"],  
  17.  contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]  
  18. })  
  19. ddsmoothmenu.init({  
  20.  mainmenuid: "smoothmenu2", //Menu DIV id  
  21.  orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"  
  22.  classname: 'ddsmoothmenu-v', //class added to menu's outer DIV  
  23.  //customtheme: ["#804000", "#482400"],  
  24.  contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]  
  25. })  
  26. </script>  
၃။ Save Setting ကိုႏိုပ္လိုက္ပါ။

၄။Layout

၅။Page Element

၆။Add a gadget သြားမယ္၊ေအာက္က

၇။Html/java script မွာေအာက္က Code ကိုထည့္လိုက္ပါ။

ေအာက္မွာနွစ္ခုစလံုးေပးထားပါတယ္ၾကိဳက္တဲ့ဟာကိုယူသံုးၾကပါ။

ဒါကေတာ့အလ်ွာလိုက္ရဲ႕ Code ပါ။

  1. <div id="smoothmenu1" class="ddsmoothmenu">  
  2. <ul>  
  3. <li><a href="http://www.dynamicdrive.com">Item 1</a></li>  
  4. <li><a href="#">Folder 0</a>  
  5.   <ul>  
  6.   <li><a href="#">Sub Item 1.1</a></li>  
  7.   <li><a href="#">Sub Item 1.2</a></li>  
  8.   <li><a href="#">Sub Item 1.3</a></li>  
  9.   <li><a href="#">Sub Item 1.4</a></li>  
  10.   <li><a href="#">Sub Item 1.2</a></li>  
  11.   <li><a href="#">Sub Item 1.3</a></li>  
  12.   <li><a href="#">Sub Item 1.4</a></li>  
  13.   </ul>  
  14. </li>  
  15. <li><a href="#">Folder 1</a>  
  16.   <ul>  
  17.   <li><a href="#">Sub Item 1.1</a></li>  
  18.   <li><a href="#">Sub Item 1.2</a></li>  
  19.   <li><a href="#">Sub Item 1.3</a></li>  
  20.   <li><a href="#">Sub Item 1.4</a></li>  
  21.   <li><a href="#">Sub Item 1.2</a></li>  
  22.   <li><a href="#">Sub Item 1.3</a></li>  
  23.   <li><a href="#">Sub Item 1.4</a></li>  
  24.   </ul>  
  25. </li>  
  26. <li><a href="#">Item 3</a></li>  
  27. <li><a href="#">Folder 2</a>  
  28.   <ul>  
  29.   <li><a href="#">Sub Item 2.1</a></li>  
  30.   <li><a href="#">Folder 2.1</a>  
  31.     <ul>  
  32.     <li><a href="#">Sub Item 2.1.1</a></li>  
  33.     <li><a href="#">Sub Item 2.1.2</a></li>  
  34.     <li><a href="#">Folder 3.1.1</a>  
  35.   <ul>  
  36.       <li><a href="#">Sub Item 3.1.1.1</a></li>  
  37.       <li><a href="#">Sub Item 3.1.1.2</a></li>  
  38.       <li><a href="#">Sub Item 3.1.1.3</a></li>  
  39.       <li><a href="#">Sub Item 3.1.1.4</a></li>  
  40.       <li><a href="#">Sub Item 3.1.1.5</a></li>  
  41.   </ul>  
  42.     </li>  
  43.     <li><a href="#">Sub Item 2.1.4</a></li>  
  44.     </ul>  
  45.   </li>  
  46.   </ul>  
  47. </li>  
  48. <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>  
  49. </ul>  
  50. <br style="clear: left" />  
  51. </div>  
ဒါကေတာ့ေဒါင္လိုက္ရဲ႕ Code ပါ။

  1. <div id="smoothmenu2" class="ddsmoothmenu-v">  
  2. <ul>  
  3. <li><a href="http://www.dynamicdrive.com">Item 1</a></li>  
  4. <li><a href="#">Folder 0</a>  
  5.   <ul>  
  6.   <li><a href="#">Sub Item 1.1</a></li>  
  7.   <li><a href="#">Sub Item 1.2</a></li>  
  8.   <li><a href="#">Sub Item 1.3</a></li>  
  9.   <li><a href="#">Sub Item 1.4</a></li>  
  10.   <li><a href="#">Sub Item 1.2</a></li>  
  11.   <li><a href="#">Sub Item 1.3</a></li>  
  12.   <li><a href="#">Sub Item 1.4</a></li>  
  13.   </ul>  
  14. </li>  
  15. <li><a href="#">Folder 1</a>  
  16.   <ul>  
  17.   <li><a href="#">Sub Item 1.1</a></li>  
  18.   <li><a href="#">Sub Item 1.2</a></li>  
  19.   <li><a href="#">Sub Item 1.3</a></li>  
  20.   <li><a href="#">Sub Item 1.4</a></li>  
  21.   <li><a href="#">Sub Item 1.2</a></li>  
  22.   <li><a href="#">Sub Item 1.3</a></li>  
  23.   <li><a href="#">Sub Item 1.4</a></li>  
  24.   </ul>  
  25. </li>  
  26. <li><a href="#">Item 3</a></li>  
  27. <li><a href="#">Folder 2</a>  
  28.   <ul>  
  29.   <li><a href="#">Sub Item 2.1</a></li>  
  30.   <li><a href="#">Folder 2.1</a>  
  31.     <ul>  
  32.     <li><a href="#">Sub Item 2.1.1</a></li>  
  33.     <li><a href="#">Sub Item 2.1.2</a></li>  
  34.     <li><a href="#">Folder 3.1.1</a>  
  35.   <ul>  
  36.       <li><a href="#">Sub Item 3.1.1.1</a></li>  
  37.       <li><a href="#">Sub Item 3.1.1.2</a></li>  
  38.       <li><a href="#">Sub Item 3.1.1.3</a></li>  
  39.       <li><a href="#">Sub Item 3.1.1.4</a></li>  
  40.       <li><a href="#">Sub Item 3.1.1.5</a></li>  
  41.   </ul>  
  42.     </li>  
  43.     <li><a href="#">Sub Item 2.1.4</a></li>  
  44.     </ul>  
  45.   </li>  
  46.   </ul>  
  47. </li>  
  48. <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>  
  49. </ul>  
  50. <br style="clear: left" />  
  51. </div>  
၈။ Save ႏိုပ္လိုက္ပါ။ျပီးပါျပီ။။။။

 ဆရာ kp3 မွ.....
သည္ဆိုဒ္ေလး ျဖစ္ဖို႕ က်ေနာ္ စိတ္ကူးယဥ္ခဲ့တာ ျကာပါျပီဗ်ာ.. စုေဆာင္းထားသမွ်ေလးေတြနဲ႕ ျကိဳးစားထူေထာင္လိုက္ပါျပီ။ က်ေနာ့္ရဲ႕ ျမင္ဆရာ kp-3 ကိုအားက်မိလို႕ပါ။ အားေပးမွဳကိုအစဥ္ေလးစားလွ်က္ပါ။ တုန္ျပန္မွဳေလးတစ္ခုအေနနဲ႕...စကားေလးတစ္ခြန္းဘဲ ခ်န္ခဲ့ရင္ ေက်နပ္ပါျပီ။ ေအာင္ေအာင္(မကစ) www.ledimyethar.com www.depelyin.co.cc www.aungkyaw.com
at

No comments:

Post a Comment