ဘေလာ့မွာ လွပေသာ Vertical Navigation Menu လုပ္နည္း
ခုတင္မွာေလးကေတာ့..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 လုပ္လုိက္ပါ ဘေလာ့ကာကို
2. Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕ Dashboard ကေနေပါ့
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>
