Followers

အီးေမးလ္မွာဖတ္ခ်င္ရင္အေပၚမွာ Sign In (Menber)ဝင္ၾကပါလို႕ေတာင္းဆိုပါရေစ။ခင္မင္ေလးစားလွ်က္ေကပီသရီးမိသားစု

Kp3နည္းပညာ၊၄၇၁၊ဘေလာ့မွာCSS3 Multi Level Drop Down Menu သံုးနည္း

အခုတင္တဲ့ပုိစ္ေလးကလည္းCSS3MultiLevelDropDownMenuလို႕ေခၚတဲ့အသစ္ေလးပါ။Menuမတင္တာၾကာေတာ့ဘေလာ့မိတ္ေဆြေတြပ်င္းသြားထင္
လို႕Menuသစ္ေလးတင္လိုက္တာပါ။က်ေနာ္တင္ဖူးတဲ့Menuေတြလည္းမနည္းေတာ့ဘူးဆုိတာသိၾကမယ္ထင္ပါတယ္။Menuေတြကိုလြယ္ကူစြာရွာခ်င္ရင္Labelsကေနဝင္
ျပီးရွာရင္ပိုျပီးမ်ားတာေပါ့ေနာ္။အခုတင္တဲ့Menuကနမူနာသြားၾကည့္လို႕ေအာင္DEMOလင့္ခ္ေလးေပးထားပါ။Kp3တင္တဲ့Menuတိုင္းမွာDEMOလင့္ခ္အျမဲတမ္းလိုလိုထား
ေပးပါတယ္။ၾကိဳက္ၾကမယ္လို႕လဲေမ်ာ္လင့္ပါတယ္။ဘေလာ့မိတ္ေဆြအားလံုးကိုခင္မင္ေလးစားျမဲေကပီသရီးမိသားစု


ဒီမွာ သြားၾကည့္လိုက္ပါ။

ေအာက္ကCodeကိုရွာပါ။
]]></b:skin>
ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္ကCodeကိုထည့္ေပးေပးလိုက္ပါ။
#nav {
        float: left;
        font: bold 12px Arial, Helvetica, Sans-serif;
        border: 1px solid #121314;
        border-top: 1px solid #2b2e30;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        overflow: hidden;
}

#nav ul {
        margin:0;
        padding:0;
        list-style:none;
}

#nav ul li {
        float:left;
}

#nav ul li a {
        float: left;
        color:#d4d4d4;
        padding: 10px 20px;
        text-decoration:none;
        background:#3C4042;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
        background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
        background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(0,0,0,0.2);
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

#nav li ul {
        background:#3C4042;
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
        background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        border-radius: 0 0 10px 10px;
        -moz-border-radius: 0 0 10px 10px;
        -webkit-border-radius: 0 0 10px 10px;
        left: -999em;
        margin: 35px 0 0;
        position: absolute;
        width: 160px;
        z-index: 9999;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li ul a {
        background: none;
        border: 0 none;
        margin-right: 0;
        width: 120px;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border-bottom: 1px solid transparent;
        border-top: 1px solid transparent;
}
#nav ul li a:hover,
#nav ul li:hover > a {
        color: #252525;
        background:#3C4042;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
        background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;

}

#nav li ul a:hover,
#nav ul li li:hover > a  {
    color: #2c2c2c;
        background: #5C9ACD;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
        background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
        background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
        border-bottom: 1px solid rgba(0,0,0,0.6);
        border-top: 1px solid #7BAED9;
        text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}

#nav li:hover ul {
        left: auto;
}

#nav li li ul {
        margin: -1px 0 0 160px;
        -webkit-border-radius: 0 10px 10px 10px;
        -moz-border-radius: 0 10px 10px 10px;
        border-radius: 0 10px 10px 10px;
        visibility:hidden;
}

#nav li li:hover ul {
        visibility:visible;
}
ျပီးရင္Save Tamplate ကိုႏိုပ္ေပးလိုက္ပါ။
ေနာက္ဆံုးအဆင့္ကေတာ့Design>>>Add a Gadget>>>HTML/JavaScript မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ။
<div id="nav">
<ul>
<li><a href="#">ေကပီသရီး</a></li>
<li><a href="#">အႏုပညာ</a></li>
<li><a href="#">သတင္း</a></li>
<li><a href="#">၁။ Dropdown</a>
        <ul>
        <li><a href="#">Level ၂.၁</a></li>
        <li><a href="#">Level ၂.၂</a></li>
        <li><a href="#">Level ၂.၃</a></li>
        <li><a href="#">Level ၂.၄</a></li>
        <li><a href="#">Level ၂.၅</a></li>
        </ul>
</li>
<li><a href="#">၂။ Dropdown</a>
        <ul>
        <li><a href="#">Level ၂.၁</a></li>
        <li><a href="#">Level ၂.၂</a></li>
        <li><a href="#">Level ၂.၃</a></li>
        <li><a href="#">Level ၂.၄</a></li>
        <li><a href="#">Level ၂.၅</a></li>
        </ul>
</li>
<li><a href="#">စီးပြားေရးရာ</a></li>
<li><a href="#">ဆက္သြယ္ရန္</a></li>
</ul>
</div>
Saveႏိုပ္လိုက္ပါ။ျပီးပါျပီ။ ။ ။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

Related Post

Reactions:

14 comments:

menu bar ေလးလုပ္တာေတာ့ အဆင္ေျပပါတယ္ ဒါေပမယ့္ လင့္ေတြ ကို ဘယ္လို ျပန္ခ်ိတ္ရမလဲ မသိေသးဘူး .. တင္ဆက္ေပးပါဦး ေက်းဇူးတင္ပါတယ္ဗ်ာ ..

<li><a href="မိမိရဲ႕လင့္ခ္ကိုဒီမွာထည့္ေပးပါ#">ေကပီသရီး</a></li>

ေကပီးသ၇ီးနာမည္ကုိမိမိရဲ႕လင့္္ခ္နာမည္နဲ႕အစားထိုးေပးလိုက္ပါ

ကၽြန္ေတာ့္ဆိုဒ္မွာတစ္ခုခုျဖစ္ေနလို႕ပါၾကည့္ေပးပါဦးခင္ဗ်။
၁။ Dropdown
၂။ Dropdown
ကအေအာက္ကိုမျမင္ရလို႕ပါခင္ဗ်။
link to www.itchitlay.blogspot.com

menu bar ေလးထည့္တာ အဆင္ေျပပါတယ္ ဒါေပမယ့္ လင့္ေတြ ၿပန္ခ်ိတ္တာလဲေၿပပါတယ္ဒါေပမဲ ့
လင့္ေတြကိုေမာက္ေထာက္လိုက္ရင္မေပၚပဲနဲ ့အထဲဝင္သြားတယ္အဲဒါဘယ္လိုလုပ္ရမလဲေၿပာၿပပါအံုးhttp://akyinnarnan.blogspot.com/ပါဝင္စစ္ၾကည့္ပါအံုးဗ်ာဘာဆက္လုပ္ရမလဲပကူညီပါ

menu bar ေလးထည့္တာ အဆင္ေျပပါတယ္ ဒါေပမယ့္ လင့္ေတြ ၿပန္ခ်ိတ္တာလဲေၿပပါတယ္ဒါေပမဲ ့
လင့္ေတြကိုေမာက္ေထာက္လိုက္ရင္မေပၚပဲနဲ ့အထဲဝင္သြားတယ္အဲဒါဘယ္လိုလုပ္ရမလဲေၿပာၿပပါအံုးhttp://akyinnarnan.blogspot.com/ပါဝင္စစ္ၾကည့္ပါအံုးဗ်ာဘာဆက္လုပ္ရမလဲပကူညီပါ

ကၽြန္ေတာ္ကေတာ့ ဘေလာက္စတင္ေလ့လာေနသူျဖစ္ေသာေၾကာင့္
ဒီဆုိက္ကုိပဲ အရမ္းေက်းဇူတင္တယ္

ေကာင္းပါျပီဗ်ာလိုအပ္တာ၇ွိ၇င္လည္းေျပာေပါ့ေနာ္။ခင္မင္ေလးစားလွ်က္ပါ

menu bar ေလးထည့္တာေတာ့အဆင္ေၿပပါတယ္ဒါေပမဲ ့
လင့္ေတြကိုေမာက္ေထာက္လိုက္ရင္အထဲဝင္သြားတယ္
ဘယ္လိုၿပန္ၿပင္ေပးရမလဲေၿပာၿပပါအံုး
mmminmin09@gmail.com
ကိုေမးပို ့ေၿပာၿပေပးပါ
ေက်းဇဴးတင္ပါတင္
ကိုkp3မိသားစုကို

အကိုေ်ရ ယူျပီးလုပ္လိုက္တယ္ေနာ္ ေခါင္းစဥ္ေတြက အထက္ကမေပၚဘဲ ေဘးကေန ဇယားတခုနဲ႕ ေပၚေနတယ္ဗ်ာ လုပ္ပါအုံး မတတ္လို႕ အကိုလုပ္တာယူလိုက္တာပါ ဘာဆက္လုပ္ရမလဲဗ်ာ aungsan96@gmail.com ကို ေျပာေပးပါေနာ္

ေအာင္ဆန္းက်ေနာ္အခ်ိန္ရင္လုပ္ေပးပါ့မယ္။အဆင္ေျပမွာပါ

အကုိေရ .. မီႏူးထည့္တာရပါတယ္ .. ဒါေပမယ့္ အဲဒိမီႏူးကုိ ပို႕စ္ေတြနဲ႕ ဘယ္လုိခ်ိတ္ဆက္ေပးရလဲ . . ဥပမာ . . စာအုပ္စင္ဆုိတာေလးကုိ ႏွိပ္လုိက္ရင္ ကုိယ္တင္ထားတဲ့စာအုပ္ေတြအကုန္ေပၚေအာင္ေလ .. အဲဒါေလး တခ်က္ ျပန္ရွင္းျပပါအံုးဗ်ာ .. mgzayyarlin84@gmail.com ပါ .. ေက်းဇူးတင္ပါတယ္ ..အကုိဆရာ

လာလည္သြားပါတယ္ ခင္ဗ်ာ ဖတ္စရာေတြ အဲေလာက္မ်ားမယ္လို႔ ဒီဘေလာ့မွာ ေရးထားတဲ့ ဟာေတြ အကုန္လံုးကို ကူးယူလုိက္ခ်င္တာ က်ေနာ္လည္း အဲဒါကို ဖတ္ပီးေတာ့မွ ဘေလာ့တစ္ခု လုပ္ရင္ေကာင္းမလားလို႔ ေတြးပီး အစမ္း လုပ္ၾကည့္လိုက္ပီ ဟိဟိ ေျပာထားတာေတြက ရွင္းတယ္ဗ် လုပ္ရတာလဲလြယ္တယ္ အခုလို မွ်ေဝေပးတဲ့ အတြက္ ေက်းဇူးအမ်ားၾကီး တင္ပါတယ္

အကို...... ကြ်န္ေတာ္လည္း အကိုဆိုဒ္က ေန Menu အတြက္ ယူျပီးေတာ့ သုံးလိုက္ပါတယ္ေနာ္
ဒါေပမဲ့ dropdown လင့္ခ်ိတ္တဲ့ အခ်ိန္မွာ စယားကြက္ၾကီးပဲ ေပၚေနတယ္ဗ်..
အဲတာ လင့္ဘယ္လိုခ်ိတ္ရသလဲ ဆိုတာေလး အကိုအားတဲ့အခါက်ရင္ တင္ေပးပါအုံးေနာ္..
ေက်းဇူးအထူးတင္ပါေၾကာင္း..

ေကပီသရီးမိသားစုအား ေက်းဇူးတင္ပါတယ္ ခင္ဗ်ာ..
သံုးလို႔ အဆင္ေျပပါတယ္..ကၽြန္ေတာ္ဆိုဒ္ေလးမွာလည္း
သံုးထားလိုက္ပါျပီ လိုက္ရွာအံုးမယ္ဗ်ာ..လိုတာေလးေတြ :D

Post a Comment

မွတ္ခ်က္မ်ားကို စိစစ္ၿပီးမွ ေဖာ္ျပေပးမည္ ျဖစ္ပါသျဖင့္ ဤစာမ်က္ႏွာေပၚမွာ ခ်က္ခ်င္း ျမင္ရမည္မဟုတ္ပါ။ မၾကာခင္ ေနာက္တခါ ျပန္လာၿပီး မိမိ၏ မွတ္ခ်က္ကို ျပန္ၾကည့္ပါရန္ ေမတၲာရပ္ခံပါသည္။