ဘေလာ့မွာ Fancy CSS3 & jQuery Lavalamp Menu သုံးခ်င္းရင္

ဒီပုိ့(စ္)ေလးကေတာ့  Fancy CSS3 & jQuery Lavalamp Menu  ေလးသုံးခ်င္သူေတြအတြက္ သတင္းေကာင္းေလးပါ။ ဘေလာ့ေတြမွာ သုံးတဲ့သူ သိပ္မွသေလာက္ ပဲ။ မႀကဳိက္ၾကတာလာေတာ့ မသိပါ။ က်ေနာ္ အျမင္ေျပာရရင္ ဒီ  Fancy CSS3 & jQuery Lavalamp Menu ေလးဟာ ေကာင္းတယ္လုိ့ျမင္တာပဲ။ ေအာက္မွာ DEMO ပုံ နွင့္တကြ Cond ေလးေပးထားပါတယ္။

အဆင့္ ၁။
၁။ Design

၂။ Edit HTML

၃၊၊ Proceed

၅။ ေအာက္က Cond ကုိရွာပါ။

]]></b:skin>

ေတြ့ၿပီးဆုိရင္ ]]></b:skin> ရဲ့ အေပၚမွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။

/*LAVALAMP MENU BY http://www.mrthangming.blogspot.com/ START*/

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}

.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;
 
}

.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;
 
}

.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;
 
}

.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;
 
}

.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;
 
}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);
 
}

.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.lavalamp ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

/*LAVALAMP MENU BY http://www.mrthangming.blogspot.com/ END*/

၆။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။

</head>

ေတြ့ၿပီးဆုိရင္ </hrad> ရဲ့ ေအာက္မွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။

ထည့္ၿပီးရင္ Save Template ကုိနုိပ္လုိက္ပါ။

အဆင့္ ၂။ 

၁။ Design

၂။ Layout

၃။ Add a Gadget

၄။ HTML/JavaScript

ေအာက္က Cond ေလးကုိ ထည့္ေပးလုိက္ပါ။

<div class="lavalamp dark">

 <ul>

  <li class="active"><a href="">Home</a></li>

  <li><a href="ဒီေနရာမွာ လင့္ထည့္ပါ">About</a></li>

  <li><a href="ဒီေနရာမွာ လင့္ထည့္ပါ">Blog</a></li>

  <li><a href="ဒီေနရာမွာ လင့္ထည့္ပါ">Services</a></li>

  <li><a href="ဒီေနရာမွာ လင့္ထည့္ပါ">Porfile</a></li>

  <li><a href="ဒီေနရာမွာ လင့္ထည့္ပါ">Contacts</a></li>

  <li><a href="ဒီေနရာမွာ လင့္ထည့္ပါ">Software</a></li>

  <li><<a href="ဒီေနရာမွာ လင့္ထည့္ပါ">Sign In</a></li>

 </ul>

 <div class="floatr"></div>

</div>

ထည့္ၿပီးရင္ Save နုိပ္လုိက္ပါ။

 မွတ္ခ်က္။ ။<div class="lavalamp dark"> ေနရာတြင္မိမိႀကဳိက္ရာ အေရာင္ ေျပာင္းနုိင္ပါတယ္။ dark ေနရာ yellow, red စသည့္အေရာင္မ်ဳိးစုံ ေျပာင္းလုိ့ရပါတယ္။