کد منویی با لینک ها فنری (راست)

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

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

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

مشاهده ي نمونه ابزار-كليك كنيد

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ /* Designed By WwW.behnam7.RozBlog.Com */ i_link=0; function behnam7Links(){ $('.behnam7-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!=$('.behnam7-tabz a').length+1){ setTimeout(behnam7Links,100); } } behnam7Links(); $('.behnam7-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.behnam7.RozBlog.Com */ .behnam7-tabz{ position:fixed; left:100%; direction:ltr; z-index:9999999999999999; } .behnam7-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="behnam7-tabz"><div style="position:absolute;top:-2000%;"><a href="http://behnam7.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>

...