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

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

این کد با استفاده از CSS زیبا شده است ، با جی کوئری زنده شده است و با HTML در صفحه نمایش داده می شود.

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

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

<script src="http://code.jquery.com/jquery-latest.js"></script> <script> /* www.moisrex.rozblog.com */ $(document).ready(function(){ i=$('.moisrex_m .tbz').length; function ss_Moisrex(){ $('.moisrex_m .tbz:eq('+i+')').stop().animate({left:'-30px'},500).animate({left:'-20px'},100); i=i-1; if (i!='-1'){ setTimeout(ss_Moisrex,100); } } ss_Moisrex(); $('body').animate({marginTop:'60px'},200).animate({marginTop:'50px'},100); $('.moisrex_m').animate({height:'50px',top:'0'},200).animate({height:'40px'},100); }); </script> <style> /* Designed By Www.Moisrex.Rozblog.Com */ .moisrex_m{ direction:ltr; text-align:center; font:11px tahoma; position:fixed; top:-15px; left:0; padding:5px; height:0; overflow:hidden; width:100%; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIBJREFUeNqs0ksOgCAMRdGnGAdi0i2yJHaMbbRR44dAO7gzcvIgAAD9lVKiUsrKzVzgxksTF3POctYF+YYakXeoA3lCncgdMiAnZER2yAEhuCCSByJj4IHIGHggMgYeiIxRKFgQMWBdorfRN1oMyKAQNSDxQBTQFlQ/Wh2RaBNgAKJX7M+BexHRAAAAAElFTkSuQmCC) #333; box-shadow:0 -10px 10px #333 inset; -moz-box-shadow:0 -10px 10px #333 inset; -o-box-shadow:0 -10px 10px #333 inset; -ms-box-shadow:0 -10px 10px #333 inset; -webkit-box-shadow:0 -10px 10px #333 inset; -khtml-box-shadow:0 -10px 10px #333 inset; z-index:99999999999999999999; } .moisrex_m .tbz{ position:relative; right:-100%; float:right; border:1px #444 solid; border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px; -khtml-border-radius:5px; padding:7px; margin:5px; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAYAAAB8ZH1oAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGJJREFUeNpisHT0U3767Dnv////ub5++8bj6BmqYOXkr4QuxggSkJKU+Pvt+3cm76A4kZ8/fzGtWTrzNZoYMwNMl4NHiALQdBSTkMUYiFEEEmMACVg4+KK408krDEMjQIABANmyasOfLIMdAAAAAElFTkSuQmCC) #888; text-decoration:none; color:#fff; transition:background 0.2s ease; -moz-transition:background 0.2s ease; -o-transition:background 0.2s ease; -ms-transition:background 0.2s ease; -khtml-transition:background 0.2s ease; -webkit-transition:background 0.2s ease; text-shadow:1px 1px 1px #666,-1px 1px 1px #666,1px -1px 1px #666,-1px -1px 1px #666; -moz-text-shadow:1px 1px 1px #666,-1px 1px 1px #666,1px -1px 1px #666,-1px -1px 1px #666; -webkit-text-shadow:1px 1px 1px #666,-1px 1px 1px #666,1px -1px 1px #666,-1px -1px 1px #666; -khtml-text-shadow:1px 1px 1px #666,-1px 1px 1px #666,1px -1px 1px #666,-1px -1px 1px #666; -o-text-shadow:1px 1px 1px #666,-1px 1px 1px #666,1px -1px 1px #666,-1px -1px 1px #666; } .moisrex_m .tbz:hover{ background-color:#666; border-color:#333; } </style>

این کد را درون body قالب خود قرار دهید:

<div class="moisrex_m"><div style="position:absolute;top:-200%;"><a href="http://moisrex.rozblog.com/">&#1705;&#1583;&#1587;&#1578;&#1575;&#1606;</a></div> <a href="/" class="tbz">صفحه اصلی</a> <a href="/Forum" class="tbz">انجمن</a> <a href="/Register" class="tbz">ثبت نام</a> <a href="/Login" class="tbz">ورود به سیستم</a> <a href="/Contact" class="tbz">تماس با ما</a> <a href="http://moisrex.rozblog.com/" class="tbz">کدستان</a> </div>

لطفا و خواهشا حداقل یک لینک به سایت ما بدهید ...