ပုလဲဦးဇင္းေလး ဆီသို႕ လာလည္ၾကသူ မိတ္ေဆြအေပါင္း ရႊင္လန္းခ်မ္းေျမ႕ၾကပါေစ

Thursday, February 23, 2017

Drop Down Menu bar


မဂၤလာပါခင္မ်ာ ဒါေလးကေတာ့ ကိုယ့့္ဘေလာ့မွာ menu bar ထည့္ပုံးေလးပါ ။ ျပဳလုပ္ပုံ အဆင့္ဆင့္ကိုလည္း ေအာက္မွာ ျပေပးထားပါတယ္ ။ အဆင္ေျပၾကပါေစေနာ္......

    မလုပ္ဖူးရင္ေတာ့ ဗီြဒီယိုဖိုင္ေလး ၾကည့္လုပ္နုိင္ပါတယ္..

Step 1: ပထမဆုံး ကိုယ့္ဘေလာ့ရဲ႕  dashboard ကိုသြားပါ 

Step 2: ဘယ္ဘက္မွာ ရွိတဲ႕  Layout option ကိုသြားပါ

Step 3: အေပၚနားမွာ ေတြ႕ရသည့္  Add a Gadgat ကိုႏွိပ္ပါ။ ေပၚလာတဲ႕ အကြက္ထဲက HTML/JavaXcript ကို ေရြးေပးပါ


Step 4: ေအာက္က ကုဒ္ေတြကို copy ကူးထည့္ပါ

<!doctype html> 
<div id="cssnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>

<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a>
 <ul>
 <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>
 <ul>
 <li><a href="#">Submenu 4.1</a></li>
 <li><a href="#">Submenu 4.2</a></li>
 <li><a href="#">Submenu 4.3</a></li>
 </ul>

</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

</!doctype>


Step 5: ကူးၿပီးျပီဆိုရင္  Save ကိုႏွိပ္ပါ ၊ ျပီးရင္ Save Arrangement ကို ထပ္ႏွိပ္ျပီး အတည္ျပဳေပးလိုက္ပါ ၊ဒါဆိုရင္ တစ္ပိုင္းလုပ္ပီးပါျပီ။

Step 6 : Layout option ေအာက္မွာရွိတဲ႕ Template ကို ဝင္ပါ.Customize ကို ဆက္ဝင္ပါ window အသစ္တစ္ခုထပ္က်လာပါလိမ့္မယ္
Step 7: ေပၚလာသည့္ ဇယားကြက္ထဲက Advanced option ကို ႏွိပ္ပါ ၊ ထပ္က်လာသည့္ထဲက ေအာက္ဆုံးမွာ ရွိသည့္ Add CSS ကိုဆက္နွိပ္ပါ ၊ .ေပၚလာသည့္ အကြက္လြတ္ထဲကို ေအာက္က ကုဒ္ေတြကို ထည့္ေပးပါ

. #cssnav {
     float: left;
    font: bold 12px Verdana, Helvetica, Sans-serif;
     border: 2px solid #74BA94;
     border-top: 1px solid #747BBA;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     overflow: hidden;
}

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

#cssnav ul li {
 float:left;
}

#cssnav ul li a {
    float: left;
 color:#EA1047;
     padding: 10px 20px;
 text-decoration:none;
     background:#3F10EA;
  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);
}

#cssnav ul li a:hover,
#cssnav 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;

}

#cssnav li ul a:hover, 
#cssnav 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);
}

#cssnav 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);
}

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

#cssnav 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;
}

#cssnav 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;
}

#cssnav li li:hover ul {
     visibility:visible;
}

#cssnav ul ul li:last-child > a {
 -moz-border-radius:0 0 10px 10px;
 -webkit-border-radius:0 0 10px 10px;
 border-radius:0 0 10px 10px;
}

#cssnav ul ul ul li:first-child > a {
 -moz-border-radius:0 10px 0 0;
 -webkit-border-radius:0 10px 0 0;
 border-radius:0 10px 0 0;
}





Step 8;  ၿပီးရင္  Apply to Blog ကိုႏွိပ္ၿပီး အတည္ျပဳေပးလိုက္ပါ ။ ဒါဆိုရင္ေတာ့ menu bar ထည့္ျခင္းကိစၥ ၿပီးပါၿပီ။ အားလုံး အဆင္ေျပပါေစေနာ္ ..

Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)