آموزش ساخت منوی آبشاری با jQuery

چهارشنبه , ۱۸ , آبان , ۱۳۹۰ | زاره آوانسیان | ۲۱ دیدگاه

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

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

دمو

شروع کار

ابتدا یک فایل HTML ساخته می توانید برای این کار از نرم افزار هایی همچون Dreamweaver , Aptena و یا Notepad++ استفاده نمایید.

HTML

کد زیر را در فایل html کپی کنید

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery menu</title>
</head>
<body>
</body>
</html>

سپس برای افزودن jQuery به صفحه کد زیر را در قسمت head قرار دهید

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

البته می توانید در قسمت src مکان فایل jquery مورد نظر خود را وارد نمایید.

حال باید عناصر مربوط به منو را در قسمت body قرار دهید.

<ul id="nav">
	<li><a href="#">Parent 01</a></li>
	<li><a href="#" class="selected">Parent 02</a>
		<ul>
			<li><a href="#">Item 01</a></li>
			<li><a href="#" class="selected">Item 02</a></li>
			<li><a href="#">Item 03</a></li>
		</ul>
		<div class="clear"></div>
	</li>
	<li><a href="#">Parent 03</a>
	<ul>
		<li><a href="#">Item 04</a></li>
		<li><a href="#">Item 05</a></li>
		<li><a href="#">Item 06</a></li>
		<li><a href="#">Item 07</a></li>
	</ul>
		<div class="clear"></div>
	</li>
	<li><a href="#">Parent 04</a></li>
</ul>

<div class="clear"></div>

CSS

کدهای مربط به استایل منو رو در قسمت head کپی کنید همچنین می توانید از فایل css خارجی استفاده نمایید که در اینجا برای راحتی کار آنها را در قسمت head گذاشتیم

<style  type="text/css">
body {font-family:arial; font-size:11px;}
.clear {clear:both}
/* remove the list style */
#nav {
	margin:0;
	padding:0;
	list-style:none;
}	

	/* make the LI display inline */
	/* it's position relative so that position absolute */
	/* can be used in submenu */
	#nav li {
		float:right;
		display:block;
		width:100px;
		background:#ccc;
		position:relative;
		z-index:500;
		margin:0 1px;
	}

	/* this is the parent menu */
	#nav li a {
		display:block;
		padding:8px 5px 0 5px;
		font-weight:700;
		height:23px;
		text-decoration:none;
		color:#fff;
		text-align:center;
		color:#333;
	}

	#nav li a:hover {
		color:#fff;
	}

		/* submenu, it's hidden by default */
		#nav ul {
			position:absolute;
			left:0;
			display:none;
			margin:0 0 0 -1px;
			padding:0;
			list-style:none;
		}

		#nav ul li {
			width:100px;
			float:left;
			border-top:1px solid #fff;
		}

		/* display block will make the link fill the whole area of LI */
		#nav ul a {
			display:block;
			height:15px;
			padding: 8px 5px;
			color:#666;
		}

		#nav ul a:hover {
			text-decoration:underline;
		}

/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {
	margin:0 0 0 -2px;
}
</style>

Javascript

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

<script type="text/javascript">
$(document).ready(function () {	

	$('#nav li').hover(
		function () {
			//show its submenu
			$('ul', this).slideDown(100);

		},
		function () {
			//hide its submenu
			$('ul', this).slideUp(100);
		}
	);

});
</script>

همین طور که مشاهده می کنید زمانی که موس را بر روی منو می برید قسمت های زیر مجموعه به صورت کشویی ظاهر می شوند. در رابطه با نحوه کار کد jQuery میتوان گفت ما ابتدا عنصر والد را که در اینجا li مربوط به لیست ul است انتخاب می کنیم سپس برای اکشن hover یعنی زمانی که موس بر روی عنصر می رود دو تابع تعریف می کنیم که پشت سر هم اجرا می شوند و در تابع اولی عنصر ul که مربوط به زیر مجموعه ها می باشد با سرعت ۱۰۰ میلی ثانیه رو به پایین باز می شود و در تابع دوم بر عکس تابع اول ul به سمت بالا بسته می شود همچنین شما می توانید از افکت های دیگر به جای slideDown و slideUp استفاده نمایید مثلا fadeIn و fadeOut

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

۲۱ دیدگاه برای این نوشته ثبت شده است
  • مهدی ۳,بهمن,۱۳۹۰

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

  • زاره آوانسیان ۳,بهمن,۱۳۹۰

    با سلام
    بله بسیار ساده است شما باید از تابع wp_nav_menu استفاده کنید
    این تابع منوهایی را که شما در قسمت فهرست های وردپرس ساخته اید به صورت کامل نمایش میده
    در مورد این تابع از اینجا می توانید اطلاعات بیشتری کسب کنید

  • ایاد ۵,اسفند,۱۳۹۰

    سلام خیلی ممنون دستت درد نکنه
    خسته نباشی

  • نام شما … ۲,فروردین,۱۳۹۱

    با سلام برای استفاده در جوملا چطور باید استفاده بشه
    لطفاً توضیح بدید
    باتشکر

  • زاره آوانسیان ۲,فروردین,۱۳۹۱

    برای جوملا می بایست فایل های js و css را در قسمت head در فایل index.php پوسته فراخوانی نمایید سپس ماژول منو را در پوسته لود کرده و id مورد نظر در قسمت menuid را در تنظیمات ماژول و در قسمت شناسه منو وارد نمایید.

  • ARG ۱۱,مرداد,۱۳۹۱

    سلام.ممنون از مطلب خوبتون.فقط ۲ تا مشکل هست اگه راهنمایی کنید ممنون میشم.اول اینکه صفحه لود میشه منو ها بازند.دوم اینکه هر چقدر موس و از روی منو ها رد کنیم همون قدر باز و بسته میشن.مثلا اگه ده بار از روشون رد بشیم ده بار باز و بسته میشه !

  • زاره آوانسیان ۱۱,مرداد,۱۳۹۱

    با سلام
    منوها بازند رو متوجه نمی شوم منظورتون چی هست چون تو دمو چیزی نیست اگر قالب شما مشکل داره می تونید در css مربوط به ul ها display را none کنید
    در مورد مشکل دومی هم همه منوها این جوری هستن اگر می خواین کمی نرمال تر بشه از delay برای اجرا شدن افکت استفاده کنید تا وقتی موس در مکان قرار می گیرد بعد از یه مدتی مثلا ۲ ثانیه باز شود
    موفق باشد

  • زینب ۲۷,مرداد,۱۳۹۱

    ممنونم خیلی مفید بود.

  • M ۱۳,مهر,۱۳۹۱

    سلام . جدا عالی بود . خیلی ممنون . یه گوشه از کار پروژه ام که درگیر این بود , درست شد

  • زاره آوانسیان ۱۳,مهر,۱۳۹۱

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

  • علی رخ ۲۱,مهر,۱۳۹۱

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

  • زاره آوانسیان ۲,آبان,۱۳۹۱

    سلام
    برای این که فقط بر روی همان زیر مجموعه انجام شود شما باید با استفاده از عبارت this فقط ul مورد نظر رو انتخاب کنید
    به این صورت $(‘ul’, this)

  • روزبه ۱,آذر,۱۳۹۱

    سلام و خسته نباشید ، آموزش خیلی عالی بود . آیا میشه راهنمایی کنید چطور تو بعضی سایت ها لینک منو آبشاری در همون صفحه لود میشه مثل سایت ورزش ۳ – اگر اسکریپت یا آموزشی سراغ دارید لطفا راهنمایی کنید مرسی

  • زاره آوانسیان ۱,آذر,۱۳۹۱

    سلام
    ببینید این که فقط قسمتی از سایت refresh میشه و بقیه ثابت میمونه در واقع از ajax استفاده میشه که خوب مبحث گسترده ای هستش البته در این زمینه یک آموزش پایه داریم به نام آموزش بارگزاری صفحات وب به صورت ای‌جکس به وسیله jQuery که می تونید اون رو بررسی کنید

  • روزبه ۱,آذر,۱۳۹۱

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

  • hamid ۲۴,آذر,۱۳۹۱

    سلام
    عالی بود خدا قوت
    لطفاً ادامه بدهید

  • مهدی ۵,تیر,۱۳۹۲

    بابا احسن به این سایت پر بار تا حالا کجا بودین من تو وب ندیده بودمتون.
    بسیار تشکر

  • زاره آوانسیان ۶,تیر,۱۳۹۲

    مرسی شما لطف دارین

  • پیمان ۸,اردیبهشت,۱۳۹۳

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

  • ایـــــران وردپــــــــرس ۱۷,تیر,۱۳۹۳

    عالی بود خیلی ممنون بابت وقتی که قرار دادید

  • zahra ۳۰,تیر,۱۳۹۳

    عالی بود

دیدگاه خود را بیان کنید ...


up