منو ثابت در صفحه - فنری و زیبا - برای بلاگ اسکای

این منوی ثابت که با استفاده از css زیبا سازی شده ، با HTML در صفحه نمایش داده می شود و با jQuery حالت فنری به خود داده است.

در این منو بعد از لود کامل صفحه به صورت فنری از بالا به پایین لینک ها به درون صفحه می آیند و هر وقت که شما ماوس خود را روی هر لینکی ببرین آن لینک باز هم به صورت فنری به متن کنار آیکون خود را به نمایش در می آورد.

آدرس لینک های این منو برای بلاگ اسکای درست شده که البته قابل تغییر است. برای استفاده از این منو طبق دستور زیر عمل کنید:

این کد را قبل از تگ <head/>

<script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ i_link=0; function mhmkLinks(){ $('.mhmk-tabz a:eq('+i_link+')').stop().animate({left:'-70px'},100).animate({left:'-50px'},100).animate({left:'-60px'},100); i_link=i_link+1; if (i_link!=$('.mhmk-tabz a').length+1){ setTimeout(mhmkLinks,100); } } mhmkLinks(); $('.mhmk-tabz a').hover(function(){ $(this).animate({left:'-50px'},100).animate({left:'-120%'},100).animate({left:'-100%'},100).animate({left:'-110%'},100); },function(){ $(this).animate({left:'-40px'},100).animate({left:'-60px'},100); }); }); </script> <style> .mhmk-tabz{ position:fixed; left:100%; direction:ltr; z-index:9999999999999999; } .mhmk-tabz a{ text-align:left; background-position:left center; border:1px #ccc solid; border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -khtml-border-radius:5px; position:relative; padding:10px; margin:10px; padding-right:20px; background-color:rgba(200,200,200,0.5); text-decoration:none; background-position:5px center; background-repeat:no-repeat; background-size:32px 32px; color:#333; display:block; direction:rtl; font:11px tahoma; padding-left:50px; width:100%; } </style>

و این کد را قبل از تگ <body/> (آخر قالب) قرار دهید.

<div class="mhmk-tabz"> <a href="@blogUrl" style="background-image:url(http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/32/blue-home-icon.png)">صفحه اصلی</a> <a href="@mobileHref" style="background-image:url(http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-7/48/Iphone-icon.png);">نسخه موبایل</a> <a href="/Register" style="background-image:url(http://icons.iconarchive.com/icons/graphics-vibe/black-gloss-social/48/rss-icon.png);">فید وبلاگ</a> <a href="@postArchiveHref" style="background-image:url(http://icons.iconarchive.com/icons/visualpharm/ios7/48/archive-icon.png);">آرشیو پست ها</a> <a href="javascript:void(0)" onclick="window.open('@contactHref','_blank','width=450, height=460, scrollbars=yes, resizable=yes');" style="background-image:url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/32/Mail-icon.png);">تماس با ما</a> </div>