ခုတင္မွာေလးကေတာ့..TAB MENU ေလးတစ္မ်ိဳးပါ ..Vertical Navigation Menu လို႕ေခၚပါတယ္....
ေအာက္ကတိုင္း လုပ္ၾကည့္ပါေနာ္..
အဆင့္ (၁) ။ ။ သြားၾကမယ္ေနာ္ ေအာက္ကအတိုင္း
(1)- ဘေလာ့ကာ၀င္ပါ Dashboard > Template> Edit HTML အစဥ္လုိက္သြားလိုက္ပါ။
(2)- the Expand Widget ေနရာမွ အမွန္ျဖစ္ခဲ့ေပးပါ။
(3)- Ctrl + F အကူညီျဖင့္ ေအာက္ကကုဒ္ကို ရွာလိုက္ပါ။
]]></b:skin> ေတြ႕တာနဲ႕ ေပးထားတဲ့ ကုဒ္ေတြကို သူ႕အေပၚကေန ကပ္ထည့္လိုက္ပါ။
#page_paramsInspector-shell .tabShell
{ width:480px; } #page_paramsInspector-shell .tabShell { width:480px; }
#page_paramsInspector_settings { width:400px; height:286px;
font-size:12px; } #page_paramsInspector_preview { width:466px; }
.menuLinks { position:relative; width:200px; background:#364040;
padding:10px; padding-bottom:5px; } .menuLink, .menuLink:link,
.menuLink:visited, .menuLink:hover, .menuLink:active { display:block;
font-size:12px; text-transform:uppercase; font-weight:bold;
text-align:center; letter-spacing:4px; color:#bbb; background:#000;
border:2px solid #000; width:182px; padding:5px 7px; margin-bottom:5px;
text-decoration:none; overflow:hidden; }
အဆင့္ (၂) ။ ။ ေနာက္ထပ္ <head> ဆိုတဲ့ ကုဒ္ကို ထပ္ရွာလိုက္ပါ။
ေတြ႕တာနဲ႕ ေအာက္ကကုဒ္ေတြကို သူ႕ ေနာက္က ကပ္ထည့္ေပးပါ။
<script src='https://dl.dropbox.com/u/24344387/How%20Do%20Blog/
UIZE-JavaScript-Framework/js/Uize.js' type='text/javascript'/>
အဆင့္ (၃) ။ ။ ေအာက္က အတိုင္း ေပးထားေသာကုဒ္မ်ားကို ထည့္လိုက္ပါ။
1. Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
3. Page Elements
4. Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
5. HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
6. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ
<script type="text/javascript">Uize.module ({
required:[
'UizeDotCom.Page.Example.library',
'UizeDotCom.Page.Example',
'Uize.Widget.HoverFader',
'Uize.Curve.Rubber',
'Uize.Fx.xShadows'
],
builder:function () {
/*** create the example page widget ***/
var page = window.page = UizeDotCom.Page.Example ();
/*** create the hover fader instance ***/
page.addChild (
'hoverFader',
Uize.Widget.HoverFader,
{
nodes:{className:/\bmenuLink\b/},
defaultStyle:{marginLeft:0,marginTop:0,
color:'f',borderColor:'#9F9797',
backgroundColor:'044',
textShadow:'-3 0 3 #0,3 0 3 #0,#0ff -30 0 .5em,#0ff 30 0 .5em,#0f0 -20 0 1em,#0f0 20 0 1em'
},
hoverStyle:{marginLeft:5,marginTop:5,borderColor:'0',
color:'8',
backgroundColor:'000',
textShadow:'0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em'
},
fadeIn:{duration:350},
fadeOut:{duration:1000}
}
);
/*** wire up the page widget ***/
page.wireUi ();
}
});
</script>
<table border="0" cellspacing="0" cellpadding="4" style="margin:auto;">
<tr valign="top">
<td>
<div>
<div style="left:20px; top:0px;">
<a href=" YOUR_PAGE_URL " style="
textShadow:0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em;">About Us</a>
</div>
<div style="left:77px; top:93px;">
<a href=" YOUR_PAGE_URL " style="background:#0;">Products</a>
</div>
<div style="left:176px; top:17px;">
<a href=" YOUR_PAGE_URL " style="background:#0;">Services</a>
</div>
<div style="left:232px; top:158px;">
<a href=" YOUR_PAGE_URL " style="background:#0;">Technology</a>
</div>
<div style="left:319px; top:-8px;">
<a href=" YOUR_PAGE_URL " style="background:#0;">Solutions</a>
</div>
<div style="left:390px; top:73px;">
<a href=" YOUR_PAGE_URL " style="background:#0;">My Account</a>
</div>
<div style="left:506px; top:-3px;">
<a href=" YOUR_PAGE_URL " style="background:#0;">Store Locator</a>
</div>
<div style="left:559px; top:90px;">
<a href=" YOUR_PAGE_URL " style="background:#0;">Investors</a>
</div>
<div style="left:42px; top:176px;">
<a href=" YOUR_PAGE_URL " style="background:#0;">Support</a>
</div>
<div style="left:447px; top:176px;">
<a href="YOUR_PAGE_URL" style="background:#0;">Contact Us</a>
</div>
</div>
</td>
<td id="page_paramsInspector-shell"></td>
</tr>
</table>
မွတ္ခ်က္ ။ ။
YOUR_PAGE_URL ဆိုတဲ့ေနရာမွာ မိမိတို႕ ရဲ႕ url ကိုထည့္ေပးရမွာ ျဖစ္ပါတယ္....
Products-Services-Technology စတဲ့ စာသားေနရာေတြမွာေတာ့ မိမိတို႕ ဘေလာ့ရဲ႕ ေခါင္းစဥ္ေတြကို
ထည့္ေပးလိုက္ပါ.............ဥပမာ ။ ။ ကဗ်ာ-သုတ-ဘာသာေရး စသျဖင့္ေပါ့။
သည္ေလာက္ဆို အဆင္ေျပမွာပါေနာ္...
ေပ်ာ္ရႊင္ပါေစ
ေအာင္ေအာင္(မကစ)
www.aungsanmks.blogspot.com
www.ledimyethar.com
No comments:
Post a Comment