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

با استفاده از این کد ، می توانید یک منوی بسیار زیبا و ثابت در بالای صفحه را در  وبلاگ و سایت خود قرار دهید. این منو از تکنولوژی جی کوئری (jQuery) نیز استفاده می کند.

<script src="http://boxme.ir/js/menuj/jquery-latest.js"></script> <script src="http://boxme.ir/js/menuj/script.js"></script> <link href="http://boxme.ir/js/menuj/style.css" rel="stylesheet"> <div class="webyar-menu-fixed-top-with-jQuery"> <a href="آدرس لینک" class="links" target="_blank">عنوان لینک</a> <a href="آدرس لینک" class="links" target="_blank">عنوان لینک</a> <a href="آدرس لینک" class="links" target="_blank">عنوان لینک</a> <a href="آدرس لینک" class="links" target="_blank">عنوان لینک</a> <a href="آدرس لینک" class="links" target="_blank">عنوان لینک</a> </div>

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

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

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

این منوی ثابت که با استفاده از 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>