ေက်ာ္ေက်ာ္မိုး(နည္းပညာ): menu cssလုပ္နည္းေလးပါ

Menu CSSလုပ္နည္ူးေလးပါ(၁)အေနနဲ႕မိမိblogsကိုsign inလုပ္ပါပီးရင္အေပၚကdesignဆိုတာနိပ္ပါ
ပီးရင္ Edit Htmlဆိုတာကိုဆကိ္နိပ္ပါ(၂)လုပ္ရမွာကေတာ့

]]></b:skin>ဒါကိုရွာပါေတြ႕ပီးရင္ဒီေအာက္ကကုဒ္ကိုထည့္ပါ

#jsddm { margin: 0; padding: 15px; z-index:1000000000; position:relative; } #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial; } #jsddm li a { display: block; white-space: nowrap; margin:1px 3px; border: 1px solid #AAAAAA; background: #cccccc; background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc)); background: -moz-linear-gradient(top, #ebebeb, #cccccc); padding: 5px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: #ffffff 0 1px 0; color: #363636; font-size: 15px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } #jsddm li a:hover { background: #C8C8C8; } #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; } #jsddm li ul li { float: none; display: inline; } #jsddm li ul li a { width: auto; background: #CAE8FA; } #jsddm li ul li a:hover { background: #A3CEE5; }

ထည့္ပီးပီဆိုရင္ေတာ့ဒီကုတ္ကိုရွာလိုက္ပါဦး

</head>ဒီကုတ္ကိုေတြ႕ရင္ေအာက္ကေပးထားတဲ့ကုတ္ကိုcopyလုပ္ပါပီးရင္</head>ဒီကုတ္ရဲ႕ေနာက္ကေနထည့္ပါေအာက္မွာကုတ္ပါ

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
  //]]>
  </script>


ထည့္ပီးပီဆိုရင္ေတာ့ Save Template ကိုနိပ္လိုက္ပါပီးရင္closeက်ိုသာနိပ္လိုက္ပါေတာ့


၂နည္းလမ္းးကိုၾကည့္ရေအာင္ေနာ္


၁။လုပ္ရမွာကေတာ့
Dashboard >> Design >> page elements >>Add A Gadget 
ဒီအဆင့္ေတြလုပ္ပါေနာက္ဆံုးAdd A Gadget 
ကိုနိပ္လိုက္ရင္ေဘာက္စ္ေလးတစ္ခုက်လာပါမယ္အဲ့ေဘာက့စ္မွာHTML / JavaScript ”ဒီဟာကိုေရြၤးပါပီးရင္ေအာက္မွာေပးထားတဲ့ကုတ္ကိုထည့္ပါ

<ul id="jsddm"> <li><a href="#">Home</a> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Drop 1-1</a></li> <li><a href="#">Drop 1-2</a></li> <li><a href="#">Drop 1-3</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Drop 2-1</a></li> <li><a href="#">Drop 2-2</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Drop 3-1</a></li> <li><a href="#">Drop 3-2</a></li> <li><a href="#">Drop 3-3</a></li> <li><a href="#">Drop 3-4</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">AllBlogTools</a></li> </li></ul> ဒီကုတ္ေတြကိုထည့္ပီးရင္saveကိုသာနိပ္လိုက္ပါအနီနဲ႕ျပထားတဲ့စာေၾကာင္းေနရာေတြမွာျမန္မာစာအျဖစ္ေျပာင္းလဲအစားထိုးအသံုးျပဴနိုင္ပါတယ္

ေရးသားသူ...ေက်ာ္ေက်ာ္မိုး အဆင္ေျပက်ပါေစေနာ္

22/04/2012

menu cssလုပ္နည္းေလးပါ