در این لحظه بهتون یه منوی زیبا به نام کتاب اسواچ رو معرفی میکنم
این منو به 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>
امیدوارم به کارتون بیاد
راستی اگه از این مطلب خوشتون اومده،لطفا بهش امتیاز بدین،ممنون
نوشته کتاب اسواچ اولین بار در فارس اسکریپت مرجع جی کوئری ایران پدیدار شد.