با استفاده از این پلاگین می توانید در سایت خود از منویی در گوشه چپ و به صورت ساید بار داشته باشید.
آموزش استفاده
۱- فراخوانی کتابخانه پلاگین و خصوصیت ها
<link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/icons.css" /> <link rel="stylesheet" type="text/css" href="css/component.css" /> <script src="js/modernizr.custom.js"></script>
2- کد html جهت استفاده پلاگین
<div id="st-container" class="st-container"> <nav class="st-menu st-effect-1" id="menu-1"> <ul> <li><a class="icon icon-data" href="#"><span>مدیریت داده ها</span></a></li> <li><a class="icon icon-location" href="#"><span>محل</span></a></li> <li><a class="icon icon-study" href="#"><span>مطالعات</span></a></li> <li><a class="icon icon-photo" href="#"><span>تصاویر</span></a></li> <li><a class="icon icon-wallet" href="#"><span>اعتبارات</span></a></li> </ul> </nav> <nav class="st-menu st-effect-2" id="menu-2"> <h2 class="icon">دنیای جی کوئری</h2> <ul> <li><a class="icon icon-data" href="#"><span>مدیریت داده ها</span></a></li> <li><a class="icon icon-location" href="#"><span>محل</span></a></li> <li><a class="icon icon-study" href="#"><span>مطالعات</span></a></li> <li><a class="icon icon-photo" href="#"><span>تصاویر</span></a></li> <li><a class="icon icon-wallet" href="#"><span>اعتبارات</span></a></li> </ul> </nav> <nav class="st-menu st-effect-4" id="menu-4"> <h2 class="icon">دنیای جی کوئری</h2> <ul> <li><a class="icon icon-data" href="#"><span>مدیریت داده ها</span></a></li> <li><a class="icon icon-location" href="#"><span>محل</span></a></li> <li><a class="icon icon-study" href="#"><span>مطالعات</span></a></li> <li><a class="icon icon-photo" href="#"><span>تصاویر</span></a></li> <li><a class="icon icon-wallet" href="#"><span>اعتبارات</span></a></li> </ul> </nav> <nav class="st-menu st-effect-5" id="menu-5"> <h2 class="icon">دنیای جی کوئری</h2> <ul> <li><a class="icon icon-data" href="#"><span>مدیریت داده ها</span></a></li> <li><a class="icon icon-location" href="#"><span>محل</span></a></li> <li><a class="icon icon-study" href="#"><span>مطالعات</span></a></li> <li><a class="icon icon-photo" href="#"><span>تصاویر</span></a></li> <li><a class="icon icon-wallet" href="#"><span>اعتبارات</span></a></li> </ul> </nav> <nav class="st-menu st-effect-9" id="menu-9"> <h2 class="icon">دنیای جی کوئری</h2> <ul> <li><a class="icon icon-data" href="#"><span>مدیریت داده ها</span></a></li> <li><a class="icon icon-location" href="#"><span>محل</span></a></li> <li><a class="icon icon-study" href="#"><span>مطالعات</span></a></li> <li><a class="icon icon-photo" href="#"><span>تصاویر</span></a></li> <li><a class="icon icon-wallet" href="#"><span>اعتبارات</span></a></li> </ul> </nav> <nav class="st-menu st-effect-10" id="menu-10"> <h2 class="icon">دنیای جی کوئری</h2> <ul> <li><a class="icon icon-data" href="#"><span>مدیریت داده ها</span></a></li> <li><a class="icon icon-location" href="#"><span>محل</span></a></li> <li><a class="icon icon-study" href="#"><span>مطالعات</span></a></li> <li><a class="icon icon-photo" href="#"><span>تصاویر</span></a></li> <li><a class="icon icon-wallet" href="#"><span>اعتبارات</span></a></li> </ul> </nav> <nav class="st-menu st-effect-11" id="menu-11"> <h2 class="icon">دنیای جی کوئری</h2> <ul> <li><a class="icon icon-data" href="#"><span>مدیریت داده ها</span></a></li> <li><a class="icon icon-location" href="#"><span>محل</span></a></li> <li><a class="icon icon-study" href="#"><span>مطالعات</span></a></li> <li><a class="icon icon-photo" href="#"><span>تصاویر</span></a></li> <li><a class="icon icon-wallet" href="#"><span>اعتبارات</span></a></li> </ul> </nav> <nav class="st-menu st-effect-12" id="menu-12"> <h2 class="icon">دنیای جی کوئری</h2> <ul> <li><a class="icon icon-data" href="#"><span>مدیریت داده ها</span></a></li> <li><a class="icon icon-location" href="#"><span>محل</span></a></li> <li><a class="icon icon-study" href="#"><span>مطالعات</span></a></li> <li><a class="icon icon-photo" href="#"><span>تصاویر</span></a></li> <li><a class="icon icon-wallet" href="#"><span>اعتبارات</span></a></li> </ul> </nav> <nav class="st-menu st-effect-13" id="menu-13"> <h2 class="icon">دنیای جی کوئری</h2> <ul> <li><a class="icon icon-data" href="#"><span>مدیریت داده ها</span></a></li> <li><a class="icon icon-location" href="#"><span>محل</span></a></li> <li><a class="icon icon-study" href="#"><span>مطالعات</span></a></li> <li><a class="icon icon-photo" href="#"><span>تصاویر</span></a></li> <li><a class="icon icon-wallet" href="#"><span>اعتبارات</span></a></li> </ul> </nav> <div class="st-pusher"> <nav class="st-menu st-effect-3" id="menu-3"> <h2 class="icon">دنیای جی کوئری</h2> <ul> <li><a class="icon icon-data" href="#"><span>مدیریت داده ها</span></a></li> <li><a class="icon icon-location" href="#"><span>محل</span></a></li> <li><a class="icon icon-study" href="#"><span>مطالعات</span></a></li> <li><a class="icon icon-photo" href="#"><span>تصاویر</span></a></li> <li><a class="icon icon-wallet" href="#"><span>اعتبارات</span></a></li> </ul> </nav> <nav class="st-menu st-effect-6" id="menu-6"> <h2 class="icon">دنیای جی کوئری</h2> <ul> <li><a class="icon icon-data" href="#"><span>مدیریت داده ها</span></a></li> <li><a class="icon icon-location" href="#"><span>محل</span></a></li> <li><a class="icon icon-study" href="#"><span>مطالعات</span></a></li> <li><a class="icon icon-photo" href="#"><span>تصاویر</span></a></li> <li><a class="icon icon-wallet" href="#"><span>اعتبارات</span></a></li> </ul> </nav> <nav class="st-menu st-effect-7" id="menu-7"> <h2 class="icon">دنیای جی کوئری</h2> <ul> <li><a class="icon icon-data" href="#"><span>مدیریت داده ها</span></a></li> <li><a class="icon icon-location" href="#"><span>محل</span></a></li> <li><a class="icon icon-study" href="#"><span>مطالعات</span></a></li> <li><a class="icon icon-photo" href="#"><span>تصاویر</span></a></li> <li><a class="icon icon-wallet" href="#"><span>اعتبارات</span></a></li> </ul> </nav> <nav class="st-menu st-effect-8" id="menu-8"> <h2 class="icon">دنیای جی کوئری</h2> <ul> <li><a class="icon icon-data" href="#"><span>مدیریت داده ها</span></a></li> <li><a class="icon icon-location" href="#"><span>محل</span></a></li> <li><a class="icon icon-study" href="#"><span>مطالعات</span></a></li> <li><a class="icon icon-photo" href="#"><span>تصاویر</span></a></li> <li><a class="icon icon-wallet" href="#"><span>اعتبارات</span></a></li> </ul> </nav> <nav class="st-menu st-effect-14" id="menu-14"> <h2 class="icon">دنیای جی کوئری</h2> <ul> <li><a class="icon icon-data" href="#"><span>مدیریت داده ها</span></a></li> <li><a class="icon icon-location" href="#"><span>محل</span></a></li> <li><a class="icon icon-study" href="#"><span>مطالعات</span></a></li> <li><a class="icon icon-photo" href="#"><span>تصاویر</span></a></li> <li><a class="icon icon-wallet" href="#"><span>اعتبارات</span></a></li> </ul> </nav> <div class="st-content"> <div class="st-content-inner"> <div class="main clearfix"> <div id="st-trigger-effects" class="column"> <button data-effect="st-effect-1">Slide in on top</button> <button data-effect="st-effect-2">Reveal</button> <button data-effect="st-effect-3">Push</button> <button data-effect="st-effect-4">Slide along</button> <button data-effect="st-effect-5">Reverse slide out</button> <button data-effect="st-effect-6">Rotate pusher</button> <button data-effect="st-effect-7">3D rotate in</button> <button data-effect="st-effect-8">3D rotate out</button> <button data-effect="st-effect-9">Scale down pusher</button> <button data-effect="st-effect-10">Scale Up</button> <button data-effect="st-effect-11">Scale & rotate pusher</button> <button data-effect="st-effect-12">Open door</button> <button data-effect="st-effect-13">Fall down</button> <button data-effect="st-effect-14">Delayed 3D Rotate</button> </div> </div><!-- /main --> </div><!-- /st-content-inner --> </div><!-- /st-content --> </div><!-- /st-pusher --> </div><!-- /st-container --> <script src="js/classie.js"></script> <script src="js/sidebarEffects.js"></script>
بسیار زیبا بود .
آفرین به همتتون دوستان .
خواهش می کنم اقای منصوری
عالی بود
خواهش می کنم داوود جان