testkp3: kp3နည္းပညာ၊၁၉၅၊ဘေလာ့မွာSmooth-Navigational-Menu-ေလးသံုးခ်င္၇င္

Tuesday, March 2, 2010

kp3နည္းပညာ၊၁၉၅၊ဘေလာ့မွာSmooth-Navigational-Menu-ေလးသံုးခ်င္၇င္

4:36 AM Posted by KP-3မိသားစု
Labels: MENU

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

ဒီမွာသြားၾကည့္လို႕၇ပါတယ္။

၁။Layout

၂။Edit HTML

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

<head>

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

<link href='http://www.ibizeye.com/Menu-in-Blogger/dropdown-menu-blogger/ddsmoothmenu.css' rel='stylesheet' type='text/css'/>
<link href='http://www.ibizeye.com/Menu-in-Blogger/dropdown-menu-blogger/ddsmoothmenu-v.css' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://www.ibizeye.com/Menu-in-Blogger/dropdown-menu-blogger/ddsmoothmenu.js' type='text/javascript'>
/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type='text/javascript'>
ddsmoothmenu.init({
 mainmenuid: "smoothmenu1", //menu DIV id
 orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu', //class added to menu's outer DIV
 //customtheme: ["#1c5a80", "#18374a"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
 mainmenuid: "smoothmenu2", //Menu DIV id
 orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
 //customtheme: ["#804000", "#482400"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>

၃။ Save Setting ကိုႏိုပ္လိုက္ပါ။

၄။Layout

၅။Page Element

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

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

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

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

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
  <ul>
      <li><a href="#">Sub Item 3.1.1.1</a></li>
      <li><a href="#">Sub Item 3.1.1.2</a></li>
      <li><a href="#">Sub Item 3.1.1.3</a></li>
      <li><a href="#">Sub Item 3.1.1.4</a></li>
      <li><a href="#">Sub Item 3.1.1.5</a></li>
  </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

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

<div id="smoothmenu2" class="ddsmoothmenu-v">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
  <ul>
      <li><a href="#">Sub Item 3.1.1.1</a></li>
      <li><a href="#">Sub Item 3.1.1.2</a></li>
      <li><a href="#">Sub Item 3.1.1.3</a></li>
      <li><a href="#">Sub Item 3.1.1.4</a></li>
      <li><a href="#">Sub Item 3.1.1.5</a></li>
  </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

၈။ Save ႏိုပ္လိုက္ပါ။ျပီးပါျပီ။။။။
ီ
မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု
Kindly Bookmark this Post using your favorite Bookmarking service: