Sidebar Menu Style လှလှလေးလာပြီနော်... ( လန်းမှလန်း )

ကဲ ဘလော့ကာ မိတ်ဆွေတို့ရေ  သည်နည်းလေးကတော့  ခပ်လန်းလန်းလေးပေါ့ဗျာ... ဘလော့မှာ

များသောအားဖြင့်တော့ Menu   တွေကို Dropdown   တွေနှစ်သက်ကြပါတယ်.... အဲတာကိုလည်း

ဘလော့ရဲ့ အပေါ်ဘားမှာ ထားလေ့ရှိကြပါတယ်... ပုံမှန်အေနထားလို့ဆိုရမယ်ပေါ့...

သည်တစ်ခါတော့  ကျနော် တင်တဲ့နည်းလမ်းလေးကတော့  Sidebar Dropdown လေးနော်

လန်းတော့လန်းတယ်..သူကလည်းး တမျိုးချစ်စရာလေးပေါ့..အပေါ်မထားခြင်တဲ့ ဘော်ဒါများအတွက်  ဘေးကနေ  ထားလို့ရတာပေါ့...ကဲ

အောက်မှာ လုပ်နည်းတွေ  ကုဒ်တွေ  လေ့လာ ယူဆောင်ကြပါစို့.....

►1-  Blogger Singin ဝင်လိုက်ပါ။
►2-  Dashboard  ကိုသွားလိုက်ပါ။
►3-  Template    ကိုကလစ်ပါ..။
►4-  Edit  Html   ကိုဝင်ပါ..
►5- Ctrl+F  (သို့မဟုတ်) F3  အကူညီဖြင့် ပေးထားတဲ့ ကုဒ်ကို ရှာလိုက်ပါ။

]]></b:skin>  ကုဒ်ကို ရှာပါ  တွေ့တာနဲ့ သူ့အပေါ်ကပ်လျှက်  ပေးထားသောကုဒ်းတွေ ယူထည့်ပေးလိုက်ပါနော်...။

post-image /* The CSS Code for the menu starts here s2free.blogspot.com */ #nav12,#nav ul { background-color: #8899AA; list-style: none outside none; margin: 0; padding: 0; } #nav12 { display: block; padding: 5px; position: relative; width: 112px; -moz-perspective: 200px; -ms-perspective: 200px; -webkit-perspective: 200px; -o-perspective: 200px; perspective: 200px; } #nav12 ul { left: -9999px; opacity:0; overflow: hidden; padding: 5px; position: absolute; top: -9999px; -moz-transform: rotateY(70deg); -ms-transform: rotateY(70deg); -o-transform: rotateY(70deg); -webkit-transform: rotateY(70deg); transform: rotateY(70deg); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear; -ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear; -o-transition: -o-transform 0.3s linear, opacity 0.3s linear; -webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear; transition: transform 0.3s linear, opacity 0.3s linear; } #nav12 li { background-color: #FFFFFF; position: relative; } #nav12 > li { -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #nav12 li a { background-color: #AABBCC; border-color: #DDDDDD #555555 #555555 #DDDDDD; border-style: solid; border-width: 1px; color: #000000; display: block; font-size: 15px; padding: 8px 10px 8px 5px; text-decoration: none; width:95px; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } #nav12 li:hover > a { background-color: #8899AA; border-color: #8899AA; color: #FFFFFF; } #nav12 li:hover ul.subs { left: 114px; opacity:1; top: 0; -moz-transition-delay: 0.3s; -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } #nav12 ul li { width: 100%; }

အိုကေ  မိမိတို့ တက်ပလက်ကို ဆေ့လိုက်ပါတောေ့နာ်.....

နောက်တဆင့်အနေနဲ့..........

Sing In Blogger....

Layout    ကိုဝင်လိုက်ပါ..နောက်...  Add a Gadget  ကိုကလစ်ပေးလိုက်ပါ

အဲမှာဘဲ   Html/Java script  ဆိုတာတွေ့မယ်.. ရှာလိုက်ပါ.... တွေ့တာနဲ့....

အဲထဲကို   အောက်ကကုဒ်တွေ ထည့်ပေးလိုက်ပါတော့.....ဗျာ...လန်းးမှလန်းးသွားးမယ်...ေိေိ

.  အောက်မှာ ပေးထားသောကုဒ်များကော်ပီယူ ထည့်လိုက်ပါ

<div class="container">
    <ul id="nav12">
        <li><a href="http://www.s2free.blogspot.com/">Home</a></li>
        <li><a href="#">Menu 1</a>
            <ul class="subs">
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
                <li><a href="#">Submenu 4</a></li>
                <li><a href="#">Submenu 5</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 2</a>
            <ul class="subs">
                <li><a href="#">Submenu 2-1</a></li>
                <li><a href="#">Submenu 2-2</a></li>
                <li><a href="#">Submenu 2-3</a></li>
                <li><a href="#">Submenu 2-4</a></li>
                <li><a href="#">Submenu 2-5</a></li>
                <li><a href="#">Submenu 2-6</a></li>
                <li><a href="#">Submenu 2-7</a></li>
                <li><a href="#">Submenu 2-8</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a>
            <ul class="subs">
                <li><a href="#">Submenu 3-1</a></li>
                <li><a href="#">Submenu 3-2</a></li>
                <li><a href="#">Submenu 3-3</a></li>
                <li><a href="#">Submenu 3-4</a></li>
                <li><a href="#">Submenu 3-5</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
        <li><a href="#">Menu 6</a></li>
        <li><a href="http://www.s2free.blogspot.com/">Add This</a></li>
    </ul>
</div>

  မှတ်ချက်    ။     ။ ခေါင်းစဉ်တွေကို  မိမိတို့ လိုအပ်သလို  ထပ်တိုးနိုင်ပါတယ်.... များခြင်သလောက် များနိုင်တယ်... အဓိက  <li><a href="#">Menu 6</a></li>   ဒါလေးဘဲ ပေါ့...

မိမိတို့ ခေါင်းစဉ်တွေ ထဲမှာ....တွေကနေတဲ့   #  နေရာကတော့  ခေါင်းစဉ်ရဲ့  Link  ကိုထည့်ရမှာပါ။
Menu  တွေ   Submenu   တေါနေရာမှာတော့ မိမိတို့ ပို့စ်တင်ထားတဲ့ Labels အမည်တွေပေါ့...
အဆင်ပြေပြီနော်..ဒါဆို.... နမူနာလေးလည်းး ပုံပြထားပါတယ်.. နှစ်သက်မယ်ဆို သုံးလိုက်ပါနော်..

ခုလိုအားပေးတဲ့အတွက် အထူးကျေးဇူးတင်ပါတယ်... လိုအပ်တာများရှိပါက.. C-Box မှာပြောခဲ့ကြနိုင်ပါတယ်... အတတ်နိုင်ဆုံး ကြိုးစား ကူညီ မျှဝေသွားပါမည်...

ဘလော့ခရီးသည်
www.ledimye.blogspot.com
www.aungsanmks.com
www.ninilayy.blogspot.com
တို့မှာ လည်ပါတ်နိုင်ပါတယ်.....နော်

Blogger နည်းပညာများ,

Rate this posting:

{[['']]}

Posted in: Blogger နည်းပညာများ