Saturday 22 September 2012

Vertical Navigation CSS Menu မ်ားစြာေပးေနတယ္

  1.  ၀င္လုိက္ပါ.. Blogger > Layout > Edit HTML
 ေအာက္ကပုံတိုင္းေတြ႕ပါမည္. အနီျပထားသလို ဆက္ကလစ္ပါ။
 ေအာက္ကပုံေရာက္တာနဲ႕ အနီ၀ိုင္းျပထားတဲ့အကြက္ကိုအမွန္ျခစ္ပါ။ ေနာက္ လိုအပ္ေသာကုဒ္
ရွာဖို႕ ctrl နဲ႕ f ကိုတြဲႏွိပ္ပါက  find ေဘာက္ေလးက်လာမည္။ ေဘာက္ထဲတြင္ ရွာေဖြလိုေသာ ကုဒ္.
]]></b:skin>     ကိုထည့္ျပီး enter ေခါက္လိုက္ပါ။


        3.   မိမိတို႕ ထည့္ရမည့္ css ကုဒ္မ်ားကို  ]]></b:skin>  သူ႕ အေပၚကပ္လွ်က္ ထည့္ေပးရမည္။
        4.   HTML ကုဒ္အေနနဲ႕ ေနရာဌါန  အမ်ိဳးမ်ိဴးရွိပါမယ္.. မိမိဘေလာ့က ညာဆိုဒ္ဘားး  ဘယ္ဆိုဒ္ဘား ဆိုတာရွိပါမယ္..  အဲတာကို အေျခခံျပီး HTML ကုဒ္ကို ထည့္ရမွာ ျဖစ္ပါတယ္... ကဲထည့္ၾကည့္မယ္....
    • မိမိဘေလာ့က ညာဆိုဒ္ဘားဆိုပါက သည္ေပးထားတဲ့ ကုဒ္ <div id='sidebar-wrapper'>  သို႕မဟုတ္<div id='sidebar-wrapper-right'> ရဲ႕ေအာက္ကေန HTML ကုဒ္ကို ထည့္ေပးရပါမယ္။
    • မိမိဘေလာ့က ဘယ္ဆိုဒ္ဘားျဖစ္ေနပါက  <div id='sidebar-wrapper-left'> သည္ကုဒ္ရဲ႕ ေအာက္ကေနကပ္ျပီး ထည့္ပါ။

        5.  ျပီးတဲံအခါမွာေတာ့ SAVE လို႕ရပါျပီ..ျပန္ၾကည့္လုိက္ပါ..လွပတဲ့ MENU ေလးရေနပါျပီ။


    မိမိတို႕ ထည့္ရမဲ့ HTML ကုဒ္ပါ ၾကိဳက္သလို အေရအတြက္ တိုးးနိဳင္ပါတယ္။ ေအာက္ကကုဒ္ေလးေတြပါဘဲေနာ္...
    <li><a href="#1" >Link 1</a></li>
    <li><a href="#2" >Link 2</a></li>
    <li><a href="#3" >Link 3</a></li>
    <li><a href="#4" >Link 4</a></li>
    <li><a href="#5" >Link5</a></li>

    ေပးထားတဲ့ #1, #2, #3 ေလးေတြေနရာမွာ မိမိတို႕ လင့္ (URL) ကိုထည့္ပါ  Link1, Link2, Link3 ေတြေနရာမွာေတာ့ မိမိတို႕ ေပးမဲ့ ေခါင္းစဥ္အမည္ေတြပါ။ ဥပမာ။  ။ ကဗ်ာ-ဘာသာေရး စသျဖင့္ေပါ့.....
    ကဲကဲ... MENU ေတြစိတ္ၾကိဳက္ ဖန္တီးနိဳင္ေစဖို႕... စုေဆာင္းရွာ ေဖြထားသမွ် မွ်ေ၀လိုက္ပါျပီ...


    Navigation Menu #1

    Navigation Menu 1 
    CSS CODE:

    HTML CODE:

    Navigation Menu #2

    Navigation Menu 2
    CSS Code:

    HTML Code:

    Navigation Menu #3

    Navigation Menu 3
    CSS Code:

    HTML Code:


    Navigation Menu #4

    Navigation Menu 4
    CSS Code:

    HTML Code:

    Navigation Menu #5

    Navigation Menu 5
    CSS Code:

    HTML Code:

    Navigation Menu #6

    Navigation Menu 6
    CSS Code:

    HTML Code:

    Navigation Menu #7

    Navigation Menu 7
    CSS Code:

    HTML Code:

    Navigation Menu #8

    Navigation Menu 8
    CSS Code:

    HTML Code:

    Navigation Menu #9

    Navigation Menu 9
    CSS Code:

    HTML Code:

    Navigation Menu #10

    Navigation Menu 10
    CSS Code:

    HTML Code:

    Navigation Menu #11

    Navigation Menu 11
    CSS Code:

    HTML Code:

    Navigation Menu #12

    Navigation-Menu-With-No-image-used
    CSS Code:

    HTML Code:

    Navigation Menu #13

    CSS Menu Tabs 13
    CSS Code:

    HTML Code:

    Navigation Menu #14

    CSS Menu Tabs 14
    CSS Code:

    HTML Code:

    Navigation Menu #15

    CSS Menu Tabs 15
    CSS Code:

    HTML Code:

    Navigation Menu #16

    CSS Menu Tabs 16
    CSS Code:

    HTML Code:

    Navigation Menu #17

    CSS Menu Tabs 17
    CSS Code:

    HTML Code:

    Navigation Menu #18


    CSS Menu Tabs 18
    CSS Code:

    HTML Code:

    Navigation Menu #19

    CSS Menu Tabs 19
    CSS Code:

    HTML Code:

    Navigation Menu #20

    CSS Menu Tabs 20
    CSS Code:

    HTML Code:

    Navigation Menu #21

    CSS Menu Tabs 21
    CSS Code:

    HTML Code:

    Navigation Menu #22

    CSS Menu Tabs 22
    CSS Code:

    HTML Code:


    Navigation Menu #23

    CSS Menu Tabs 24
    CSS Code:

    HTML Code:

    Navigation Menu #24

     CSS Menu Tabs 25
    CSS Code:

    HTML Code:

    Navigation Menu #25

    CSS Menu Tabs 26
    CSS Code:

    HTML Code:



    ေမတၱာေစတနာအျပည့္ျဖင့္ မွ်ေ၀လိုက္ပါျပီ....အားလုံးေပ်ာ္ရႊင္ေက်နပ္နိဳင္ၾကပါေစ။
    ေအာင္ေအာင္(မကစ)
    www.ledimyethar.com
    www.depelyin.co.cc
    www.aungkyaw.com

    0 comments:

    Post a Comment