منوی متحرک وبلاگ باترفلای

سلام.

اگر از این منو در وبلاگ خودتون استفاده کردید، یادتون باشه هزینه اش 3 صلوات برای سلامتی آقا امام زمان هست.

در ضمن نظر هم فراموش نشه. لطفا حتما اسم وبلاگتون رو ذکر کنید.

اول از همه باید منو های مورد نیازتون رو در بخش "منوساز" ، ایجاد کنید.

سپس آیکون های مربوطه رو در صندوق بیان خود قرار دهید. توجه کنید که آیکون ها باید دقیقا هم نام منوهایی باشند که ساخته اید. 

طول و عرض آیکون ها باید 32 پیکسل باشه.

به صندوق بیان مربوط به وبلاگتون برید و پوشه templates رو باز کنید و در آنجا یک پوشه جدید به نام icons بسازید و آیکون های مربوط به منوها رو در آنجا آپلود کنید.

در کد زیر بجای ۞۞۞۞۞۞۞۞ نام وبلاگ رو بنویسید. البته قسمت blog.ir رو ننویسید.

<!-- شروع نوار منوی اصلی -->
<div class="main_menu">
 <div class="cnt">
  <box:menu>
   <ul>
    <view:menu>
     <li class="(*menu_item_selected*)">
     <img height="32px" src="http://bayanbox.ir/blog/۞۞۞۞۞۞۞۞/templates/icons/(*menu_item_title*).png?view" style="float:right;" width="32px">
      <a class="(*menu_item_selected*)" href="(*menu_item_link*)">(*menu_item_title*)</a>
     </li>
    </view:menu>
    <li class="" style=" float: left; cursor: default; margin-right: 6px; padding: 4px 0px 4px 5px; position: relative; width: 200px; left: -67px; background-color: #00A3FF; height: 250px; border-radius: 0 16px 16px 0;">
     <a href="http://alensan.ir/efaf" target="_blank"><img src="http://truths.ir/download/a.gif"></a>
    </li>
   </ul>
  </box:menu>
 </div>
</div>
<!-- پایان نوار منوی اصلی -->

حالا باید یه تغییرات جزئی رو توی قالب CSS وبلاگتون بدید.

موارد زیر را به قالب CSS وبلاگتون اضافه کنید و اگر از قبل موجود هستند، آنها را ویرایش کنید:

	#wrp .main_menu .cnt ul{
		top:35px; left:0; width:32px;
		position:fixed;
		list-style:none;
		margin:0px; padding:0px;
		display:inline-block;
	}
	#wrp .main_menu .cnt li{
		float:left;
		cursor:default;
		margin-right:6px;
		padding:4px 0px 4px 5px;
		position:relative;
		width:200px; left:-170px;
		background-color:#00A3FF;
		height:35px;
		border-radius:0 50px 30px 0; -webkit-border-radius:0 50px 30px 0;
		transition: left .375s; -webkit-transition: left .375s;
	}
	#wrp .main_menu .cnt li.selected{
		background-color:#FFA300;
	}
	#wrp .main_menu .cnt li:hover{
		left:-15px;
	}