ijquery

منو جی کوئری شناور

5 دیدگاه / منو، منو عمودی / از

screenshot

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

آموزش استفاده

  1. قبل از تگ <head/> 
    <script language="javascript" src="jquery_mini.js"></script>
<script language="javascript" src="jquery.dimensions.js"></script>
<script language="javascript">
	var name = "#floatMenu";
	var menuYloc = null;

		$(document).ready(function(){
			menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
			$(window).scroll(function () { 
				offset = menuYloc+$(document).scrollTop()+"px";
				$(name).animate({top:offset},{duration:500,queue:false});
			});
		}); 
	 </script>

<link href="page.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body {
	background-color:#000;
	height:2000px;
	color:#ccc;
	font:12px Tahoma, Arial;
}
	#floatMenu {
		position:absolute;
		top:150px;
		left:50%;
		margin-left:235px;
		width:200px;
		}
		#floatMenu ul {
			margin-bottom:20px;
			}
			#floatMenu ul li a {
				display:block;
				border:1px solid #999;
				background-color:#222;
				border-left:6px solid #999;
				text-decoration:none;
				color:#ccc;
				padding:5px 5px 5px 25px;
			}
			#floatMenu ul li a:hover {
				color:#fff;
				background-color:#333333;
			}
			#floatMenu ul.menu1 li a:hover {
				border-color:#09f;
			}
			#floatMenu ul.menu2 li a:hover {
				border-color:#9f0;
			}
			#floatMenu ul.menu3 li a:hover {
				border-color:#f09;
			}
.style1 {
	text-align: right;
}
</style>

     

  2. بعد از تگ <body> 
    <div id="floatMenu" style="left: 50%; top: 150px; width: 198px">
  <ul class="menu1">
    <li class="style1"><a href="#" onclick="return false;">منو1 </a></li>
  </ul>
  <ul class="menu2">
    <li class="style1"><a href="#" onclick="return false;"> منو2 </a></li>
    <li class="style1"><a href="#" onclick="return false;"> منو3</a></li>
    <li class="style1"><a href="#" onclick="return false;"> منو4 </a></li>
  </ul>
  <ul class="menu3">
    <li class="style1"><a href="#" onclick="return false;"> منو5 </a></li>
  </ul>
</div>

     


پیش نمایش دانلود فایل پلاگین

5 دیدگاه دربارهٔ «منو جی کوئری شناور»

  1. maria

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

    پاسخ

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *