کد منویی با لینک ها فنری

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

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

توجه داشته باشید که برای تغییر آیکون ها فقط و فقط آیکون هایی که اندازه آن ها 32*32 پیکسل را دارند انتخاب کنید و از گذاشتن آیکون های بزرگ تر و کوچکتر چشم پوشی کنید.

برای دیدن دمو اینجا کلیک کنید.

از شما عاجزانه تقاضا دارم که لینک ما را در صفحه خود قرار دهید ...

این کد را درون head صفحه خود قرار دهید (در صورتی که در صفحه شما فایل جی کوئری وجود دارد خط اول را حذف کنید):

<script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ /* Designed By WwW.MoIsRex.RozBlog.Com */ i_link=0; function moisrexLinks(){ $('.moisrex-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!=$('.moisrex-tabz a').length+1){ setTimeout(moisrexLinks,100); } } moisrexLinks(); $('.moisrex-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> /* Designed By WwW.MoIsRex.RozBlog.Com */ .moisrex-tabz{ position:fixed; left:100%; direction:ltr; z-index:9999999999999999; } .moisrex-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="moisrex-tabz"><div style="position:absolute;top:-2000%;"><a href="http://moisrex.rozblog.com/">&#1705;&#1583;&#1587;&#1578;&#1575;&#1606;</a></div> <a href="/" style="background-image:url(http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/32/blue-home-icon.png)">صفحه اصلی</a> <a href="/Forum" style="background-image:url(http://icons.iconarchive.com/icons/arkangl300/zero-folders/32/group-icon.png);">انجمن</a> <a href="/Register" style="background-image:url(http://icons.iconarchive.com/icons/artdesigner/lovely-website/32/register-icon.png);">ثبت نام</a> <a href="/Login" style="background-image:url(http://icons.iconarchive.com/icons/custom-icon-design/mini/32/Login-in-icon.png);">ورود به سیستم</a> <a href="/Contact" style="background-image:url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/32/Mail-icon.png);">تماس با ما</a> </div>

باز هم عاجزانه از شما تقاضا دارم که لینک ما را از درون کد حذف نکنید ...