کتاب اسواچ

در این لحظه بهتون یه منوی زیبا به نام کتاب اسواچ رو معرفی میکنم

این منو به 5 صورت به شما نمایش داده میشه

این منو با جی کوئری و css3 ساخته شده و از اون می تونید به عنوان یه منو در ساخت صفحه ایندکس استفاده کنید

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

1-جهت افزودن استایل،کتابخانه ها ی جی کوئری به تگ head ساتتون کدهای زیر رو اضافه کنید(به طور مثال پیشنمایش شماره 5):

<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/style5.css" />
		<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
		<script type="text/javascript" src="js/modernizr.custom.79639.js"></script> 
		<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.swatchbook.js"></script>
		<script type="text/javascript">
			$  (function() {

				$  ( '#sb-container' ).swatchbook( {
					openAt : 0
				} );

			});
		</script>

2- جهت افزودن این کتای اسواچ کدهای زیر رو در سایت قرار بدین

<section class="main">

				<div id="sb-container" class="sb-container">

					<div>
						<span class="sb-icon icon-cog"></span>
						<h4><span>همه تنظیمات</span></h4>
					</div>
					<div>
						<span class="sb-icon icon-flight"></span>
						<h4><span>کاربر</span></h4>
					</div>	
					<div>
						<span class="sb-icon icon-eye"></span>
						<h4><span>مرور</span></h4>
					</div>	
					<div>
						<span class="sb-icon icon-install"></span>
						<h4><span>نصب برنامه</span></h4>
					</div>	
					<div>
						<span class="sb-icon icon-bag"></span>
						<h4><span>تولیدات</span></h4>
					</div>	
					<div>
						<span class="sb-icon icon-globe"></span>
						<h4><span>همه کاربران</span></h4>
					</div>	
					<div>
						<span class="sb-icon icon-picture"></span>
						<h4><span>تصویر کاربر</span></h4>											
					</div>	
					<div>
						<span class="sb-icon icon-video"></span>
						<h4><span>کلیپ کاربر</span></h4>											
					</div>	
					<div>
						<span class="sb-icon icon-download"></span>
						<h4><span>دانلود برنامه</span></h4>											
					</div>	
					<div>
						<span class="sb-icon icon-mobile"></span>
						<h4><span>تم موبایل</span></h4>											
					</div>
					<div>
						<span class="sb-icon icon-camera"></span>
						<h4><span>برنامه دیجیتالی</span></h4>											
					</div>
					<div>
						<h4><span>پروفایل</span></h4>
						<h5><span>فارس اسکریپت</span></h5>											
					</div>

امیدوارم به کارتون بیاد

راستی اگه از این مطلب خوشتون اومده،لطفا بهش امتیاز بدین،ممنون

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

فارس اسکریپت مرجع جی کوئری ایران