ဘေလာ့မွာCSS3 Multi Level Drop Down Menu သံုးနည္း

အခုတင္တဲ့ပုိစ္ေလးကလည္းCSS3MultiLevelDropDownMenuလို႕ေခၚတဲ့အသစ္ေလးပါ။Menuမတင္တာၾကာေတာ့ဘေလာ့မိတ္ေဆြေတြပ်င္းသြားထင္လို႕Menuသစ္ေလးတင္လိုက္တာပါ။က်ေနာ္တင္ဖူးတဲ့Menuေတြလည္းမနည္းေတာ့ဘူးဆုိတာသိၾကမယ္ထင္ပါတယ္။
Menuေတြကိုလြယ္ကူစြာရွာခ်င္ရင္Labelsကေနဝင္ျပီးရွာရင္ပိုျပီးမ်ားတာေပါ့ေနာ္။အခုတင္တဲ့Menuကနမူနာသြားၾကည့္လို႕ေအာင္DEMOလင့္ခ္ေလးေပးထားပါ။Kp3တင္တဲ့Menuတိုင္းမွာDEMOလင့္ခ္အျမဲတမ္းလိုလိုထားေပးပါတယ္။ၾကိဳက္ၾကမယ္လို႕လဲေမ်ာ္လင့္ပါတယ္။ဘေလာ့မိတ္ေဆြအားလံုးကိုခင္မင္ေလးစားျမဲေကပီသရီးမိသားစု

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

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

]]></b:skin> ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္ကCodeကိုထည့္ေပးေပးလိုက္ပါ။

view plainprint?

1. #nav {  
2.         float: left;  
3.         font: bold 12px Arial, Helvetica, Sans-serif;  
4.         border: 1px solid #121314;  
5.         border-top: 1px solid #2b2e30;  
6.         -webkit-border-radius: 5px;  
7.         -moz-border-radius: 5px;  
8.         border-radius: 5px;  
9.         overflow: hidden;  
10. }  
11.   
12. #nav ul {  
13.         margin:0;  
14.         padding:0;  
15.         list-style:none;  
16. }  
17.   
18. #nav ul li {  
19.         float:left;  
20. }  
21.   
22. #nav ul li a {  
23.         float: left;  
24.         color:#d4d4d4;  
25.         padding: 10px 20px;  
26.         text-decoration:none;  
27.         background:#3C4042;  
28.         background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );  
29.         background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );  
30.         background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );  
31.         box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;  
32.         border-left: 1px solid rgba(255, 255, 255, 0.05);  
33.         border-right: 1px solid rgba(0,0,0,0.2);  
34.         text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);  
35. }  
36.   
37. #nav li ul {  
38.         background:#3C4042;  
39.         background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );  
40.         background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );  
41.         background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );  
42.         border-radius: 0 0 10px 10px;  
43.         -moz-border-radius: 0 0 10px 10px;  
44.         -webkit-border-radius: 0 0 10px 10px;  
45.         left: -999em;  
46.         margin: 35px 0 0;  
47.         position: absolute;  
48.         width: 160px;  
49.         z-index: 9999;  
50.         box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;  
51.         -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;  
52.         -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;  
53.         border: 1px solid rgba(0, 0, 0, 0.5);  
54. }  
55.   
56. #nav li ul a {  
57.         background: none;  
58.         border: 0 none;  
59.         margin-right: 0;  
60.         width: 120px;  
61.         box-shadow: none;  
62.         -moz-box-shadow: none;  
63.         -webkit-box-shadow: none;  
64.         border-bottom: 1px solid transparent;  
65.         border-top: 1px solid transparent;  
66. }  
67. #nav ul li a:hover,  
68. #nav ul li:hover > a {  
69.         color: #252525;  
70.         background:#3C4042;  
71.         background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );  
72.         background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );  
73.         background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );  
74.         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;  
75.   
76. }  
77.   
78. #nav li ul a:hover,  
79. #nav ul li li:hover > a  {  
80.     color: #2c2c2c;  
81.         background: #5C9ACD;  
82.         background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );  
83.         background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );  
84.         background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );  
85.         border-bottom: 1px solid rgba(0,0,0,0.6);  
86.         border-top: 1px solid #7BAED9;  
87.         text-shadow: 0 1px rgba(255, 255, 255, 0.3);  
88. }  
89.   
90. #nav li:hover ul {  
91.         left: auto;  
92. }  
93.   
94. #nav li li ul {  
95.         margin: -1px 0 0 160px;  
96.         -webkit-border-radius: 0 10px 10px 10px;  
97.         -moz-border-radius: 0 10px 10px 10px;  
98.         border-radius: 0 10px 10px 10px;  
99.         visibility:hidden;  
100. }  
101.   
102. #nav li li:hover ul {  
103.         visibility:visible;  
104. }  

ျပီးရင္Save Tamplate ကိုႏိုပ္ေပးလိုက္ပါ။

ေနာက္ဆံုးအဆင့္ကေတာ့Design>>>Add a Gadget>>>HTML/JavaScript မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ။

view plainprint?

1. <div id="nav">  
2. <ul>  
3. <li><a href="#">ေကပီသရီး</a></li>  
4. <li><a href="#">အႏုပညာ</a></li>  
5. <li><a href="#">သတင္း</a></li>  
6. <li><a href="#">၁။ Dropdown</a>  
7.         <ul>  
8.         <li><a href="#">Level ၂.၁</a></li>  
9.         <li><a href="#">Level ၂.၂</a></li>  
10.         <li><a href="#">Level ၂.၃</a></li>  
11.         <li><a href="#">Level ၂.၄</a></li>  
12.         <li><a href="#">Level ၂.၅</a></li>  
13.         </ul>  
14. </li>  
15. <li><a href="#">၂။ Dropdown</a>  
16.         <ul>  
17.         <li><a href="#">Level ၂.၁</a></li>  
18.         <li><a href="#">Level ၂.၂</a></li>  
19.         <li><a href="#">Level ၂.၃</a></li>  
20.         <li><a href="#">Level ၂.၄</a></li>  
21.         <li><a href="#">Level ၂.၅</a></li>  
22.         </ul>  
23. </li>  
24. <li><a href="#">စီးပြားေရးရာ</a></li>  
25. <li><a href="#">ဆက္သြယ္ရန္</a></li>  
26. </ul>  
27. </div>  

Saveႏိုပ္လိုက္ပါ။ျပီးပါျပီ။ ။ ။

ဒါေလကိုကြ်န္ေတာ္ kp3 ယူလာတာပါ။

အဆင္ေျပနိုင္ၾကပါေစ။