Sidebar Menu Style လွလွေလးလာျပီေနာ္... ( လန္းမွလန္း ) ~ စိုင္းသူ

Thursday, August 15, 2013

Sidebar Menu Style လွလွေလးလာျပီေနာ္... ( လန္းမွလန္း )

7:49 AM ဘေလာ့ပညာ No comments

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

မ်ားေသာအားျဖင့္ေတာ့ 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.com
တို႕မွာ လည္ပါတ္နိဳင္ပါတယ္.....ေနာ္

စိုင္းသူ - (နည္းပညာျပန္လည္မ်ွေဝျခင္း)

Pages

Thursday, August 15, 2013