kyawkothein: Blog မွာ Vertical Navigation Menu With Hover Fader and Animated Effects သံုးရေအာင္

Wednesday, September 5, 2012

Blog မွာ Vertical Navigation Menu With Hover Fader and Animated Effects သံုးရေအာင္

Published : Wednesday, September 05, 2012 Author : kyawkothein

DEMO

ကၽြန္ေတာ္ မိတ္ေဆြမ်ားကို menu လန္းလန္းေလး တစ္ခုတင္ျပလိုက္ပါတယ္ demo link ကိုသြားျပီး menu အေပၚကို mouse တင္ႀကည့္လိုက္ပါ ကၽြန္ေတာ္ မိတ္ေဆြမ်ား အသံုးျပဳခ်င္တယ္ဆို ရင္ ေအာက္မွာ ျပထားတဲ့အတိုင္း လိုက္လုပ္ျပီး အသံုးျပဳနိုင္ႀကပါေစ.....

၁ ။ Design >>> Edit HTML

၂ ။ Expand Widget Templates ကို အမွတ္ျခစ္ထားေပးပါ

၃ ။ ( ctrl+ f ) ကိုႏွိပ္ျပီး Find : ေရွ ့က အကြက္ထဲမွာ ]]></b:skin> ကိုရွာပါ ေတြ ့ျပီဆိုရင္ အဲဒီကုတ္ရဲ ့အေပၚမွာ ေအာက္ကကုတ္ကို ထည့္ေပးလိုက္ပါ......

၄ ။ ( ctrl+ f) နဲ ့ <head> ကို ထပ္ရွာပါ ေတြ ့ျပီဆိုရင္ <head> ေအာက္မွာ ေအာက္က code ေတြကို ထည့္ေပးလိုက္ပါ....

ျပီးရင္ Save Template လုပ္လိုက္ပါ....

၅ ။ ေအာက္မွာေပးထားတဲ့ code ေတြကို copy ကူးျပီး Design >>> Add a Gadget >>> HTML/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>

ျပီးရင္ save လိုက္ပါ..... ( ျပီးပါျပီ )

(မွတ္ခ်က္ ) လင့္ထည့္ဖို ့အတြက္ ေခါင္းစဥ္ ဆို တဲ့ေနရာမွာ ေခါင္းစဥ္ ထည့္ပါ ေခါင္းစဥ္ရဲ ့လင့္ ဆိုတဲ့ေနရာမွာ ေခါင္းစဥ္ရဲ ့လင့္ ထည့္ပါ ......

kyawkothein

Wednesday, September 5, 2012

Blog မွာ Vertical Navigation Menu With Hover Fader and Animated Effects သံုးရေအာင္

0 comments:

Post a Comment

Follow Us

Followers

သီခ်င္း ေလးနဲ ့ အေမာေျဖ ပါ

သြားေရာက္ေလ့လာနိုင္ပါသည္

ျမန္မာဘေလာ့မ်ားစုစည္းမူ

ေန ့စဥ္သတင္းစာ

အခ်ိန္ကိုသတိရဖို ့

ကၽြန္ေတာ္ blog ေလးကိုညႊန္ျပဖို ့

ေျပာခ်င္တာေျပာခဲ့ႏိုင္ပါတယ္

software မ်ားယူရန္

ျမန္မာရုပ္ရွင္မ်ားႀကည့္ရန္

Blog အတြက္ တင္ခဲ့ျပီးသမွ် Post ေခါင္းစဥ္မ်ား

Labels

နည္းပညာ bloger မ်ား

ေရာက္ရွိေနပါသည္

မိတ္ေဆြမ်ားကိုႀကိဳဆိုပါတယ္

ႏိုင္ငံတကာက ႀကည့္ရူေနတဲ့ မိတ္ေဆြမ်ား