Tuesday, June 2, 2015

5:39:00 AM

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

Paing Thu Kha    No comments

ဘေလာ့မွာ 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 ကိုအားက်မိလို႕ပါ။ အားေပးမွဳကိုအစဥ္ေလးစားလွ်က္ပါ။ တုန္ျပန္မွဳေလးတစ္ခုအေနနဲ႕...စကားေလးတစ္ခြန္းဘဲ ခ်န္ခဲ့ရင္ ေက်နပ္ပါျပီ။ ေအာင္ေအာင္(မကစ)

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
ဘေလာ့ဆုိင္ရာနည္းပညာမ်ား{ ဒီမွာ } သြားလိုက္ပါ
စြယ္စုံစာအုပ္စင္{ ဒီမွာ } သြားလိုက္ပါ

[IMG]
[IMG]
MR: EDITOR

Paing Thu Kha

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Related Posts

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

 

Copyright @ 2016 Myo Zaw Htet IT .

Designed by ဘေလာ့ခရီးသည္ | အေျခခံနည္းပညာမ်ား