با استفاده از این پلاگین می توانید تبی داشته باشید که با پایین آوردن اسکرول ، تب ظاهر می شود (این تب کاملا ریسپانسیو است) .
آموزش استفاده
۱- فراخوانی کتابخانه پلاگین و خصوصیت ها
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../js/jquery.fluidContentScroller.js"></script> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="../css/jquery.fluidContentScroller.css" />
2- کد html جهت استفاده پلاگین
<div id="content"> <div class="col right"> <div id="scroll-content"> <div class="post"> <h4 data-cs-title="1">مطلب 1</h4> <p><!-- مطلب مورد نظر خود را اینجا وارد کنید --></p> </div> <div class="post"> <h4 data-cs-title="2">مطلب 2</h4> <p><!-- مطلب مورد نظر خود را اینجا وارد کنید --></p> </div> <div class="post"> <h4 data-cs-title="3">مطلب 3</h4> <p><!-- مطلب مورد نظر خود را اینجا وارد کنید --></p> </div> <div class="post"> <h4 data-cs-title="4">مطلب 4</h4> <p><!-- مطلب مورد نظر خود را اینجا وارد کنید --></p> </div> <div class="post"> <h4 data-cs-title="5">مطلب 5</h4> <p><!-- مطلب مورد نظر خود را اینجا وارد کنید --></p> </div> <div class="post"> <h4 data-cs-title="6">مطلب 6</h4> <p><!-- مطلب مورد نظر خود را اینجا وارد کنید --></p> </div> <div class="post"> <h4 data-cs-title="7">مطلب 7</h4> <p><!-- مطلب مورد نظر خود را اینجا وارد کنید --></p> </div> <div class="post"> <h4 data-cs-title="8">مطلب 8</h4> <p><!-- مطلب مورد نظر خود را اینجا وارد کنید --></p> </div> </div> </div> </div> <script type="text/javascript"> $(function () { $('#scroll-content').find("> .post").fluidContentScroller({ container: '#scroll-content', navItem: { title: '[data-cs-title]' } }); }); </script>
جالب بود.
مرسی بهنام عزیز
سلام ، خسته نباشید ، خیلی مطالب فوق العاده ای دارید . موفق باشید .
من خیلی دنبال یه افزونه یا اسکریپتی گشتم برای سایت ولی تو سایتهای ایرانی پیداش نکردم . اگر سایت ورزش 3 یا بعضی دیگه از سایت ها رو دیده باشین برای نمایش هفته های لیگ برتر یا برنامه بازیها از منو خاصی استفاده میکنند . اگر ممکنه برای ساختش یا پیدا کردن یه افزونه شبیه به اون راهنمایی بفرمایید .
http://www.varzesh3.com/
ممنون از لطف شما