طراحی وب سایت | طراحی سایت | شرکت طراحی وب سایت پروگ پارس

منوی ساید بار

با استفاده از این پلاگین می توانید در سایت خود از منویی در گوشه چپ و به صورت ساید بار داشته باشید.

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

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

		<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 &amp; 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>

 

4 نظر

دانلود و پیش نمایش

دانلود و پیش نمایش فایل منوی ساید بار

دانلود پلاگین پیش نمایش آنلاین

سوالی دارید؟

● در تلگرام، پاسخگوی شما :)