ဘေလာ့မွာ CSS Spotlight Menu သုံးခ်င္ရင္

ဒါေလးကေတာ့ CSS Spotlight Menu လုိ့ေခၚပါတယ္။ျမန္မာဘေလာ့ေတြမွာေတာ့
သုံးတဲ့သူမရွိသေလာက္ပဲလုိ့ေျပာရရင္ရပါတယ္။မႀကဳိက္ၾကတာလားမသိ!
 Menu ကုိ Mouse နဲ့ ထိလုိက္ရင္Menu ၀ုိင္းထားတဲ့ Design တစ္မ်ဳိးလည္းျဖစ္ပါတယ္။
ေအာက္မွာ DEMO နဲ့ Cond ေလးေပးထားပါတယ္။ ႀကဳိက္ရင္ယူသုံးၾကည့္လုိက္ပါ။

 DEMO ၾကည့္ရန္
၁။Design

 ၂။Layout

 ၃။Add a Gadget

 ၄၊၊HTML/JavaScript

၅။ေအာက္ကေပးထားေသာ cond ေလးကုိထည့္ေပးလုိက္ပါ။

<div class="circlemenu"> <ul><li><a href="http://www.mrthangming.blogspot.com"><span>Home</span></a></li><li><a href="http://www.mrthangming.blogspot.com/new.htm"><span>photo</span></a></li><li><a href="http://www.mrthangming.blogspot.com"><span>songs</span></a></li><li><a href="http://www.mrthangming.blogspot.com"><span>links</span></a></li><li><a href="http://www.mrthangming.blogspot.com"><span>abuot me</span></a></li></ul></div>

ထည့္ျပီရင္ save နုိပ္လုိက္ပါ။  မျပီေသးပါဘူး

ေအာက္ကေနရာတြင္ ထပ္သြားပါ။

၁။Design

 ၂။Edit HTML

၃။Proceed

၄။ေအာက္က cond ေလးကုိရွာပါ

]]></b:skin>

 ၅။ေအာက္ကေပးထားေသာ cond ေလးကုိ]]></b:skin>ရဲ့အေပၚမွာ
ထည့္ေပးလုိက္ပါ။

<<style type="text/css"> .spotlightmenu{ width: 100%; overflow:hidden; } .spotlightmenu ul{ margin: 0; padding: 0; font: bold 14px Verdana; /* font style and size */ list-style-type: none; text-align: center; /* "left", "center", or "right" align menu */ } .spotlightmenu li{ display: inline-block; position:relative; padding: 5px; margin: 0; margin-right: 5px; /* right margin between menu items */ } .spotlightmenu li a{ display:inline-block; padding: 5px; min-width:50px; /* horizontal diameter of spotlight */ height:50px; /* vertical diameter of spotlight */ text-decoration: none; color: black; margin: 0 auto; overflow:hidden; -moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */ -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .spotlightmenu li:hover a{ color: white; background: #a71b15; /* background color of spotlight */ -webkit-border-radius: 50%; /* large radius to create circular borders */ -moz-border-radius: 50%; border-radius: 50%; } .spotlightmenu li a span{ position:relative; top:35%; /* move text down so it appears centered within menu item */ } </style>

ထည့္ျပီရင္ Save template ကုိနုိပ္လုိက္ပါ