پلاگین BigSlide برای منوی ریسپانسیو

همانطور که می دانید در هنگام طراحی سایت ارزان برای صفحات موبایل بحث ریسپانسیو بودن مطرح می شود که در مقاله "طراحی ریسپانسیو" به تفضیل توضیح داده شد. از طریق این پلاگین شما میتوانید دکمه ای تعبیه کنید که با کلیک بر روی آن، منو به همراه افکت، ظاهر و با کلیک دوباره منو مخفی شود. و در طراحی سایت های ریسپانسیو از آن استفاده کنید.

نمایش دمو

در مرحله اول از طریق سایت Github فایل های مربوطه را دانلود کنید.

 

کدهای html  پلاگین BigSlide

<div id="menu" class="panel" role="navigation">
	    <ul>
	        <li><a href="#">Home</a></li>
	        <li><a href="#">The Ballad of El Goodo</a></li>
	        <li><a href="#">Thirteen</a></li>
	        <li><a href="#">September Gurls</a></li>
	        <li><a href="#">What's Going Ahn</a></li>
	    </ul>
	</div>
	
<div class="wrap push">
    <a href="#" class="menu-link">&#9776;</a>
    <p id="info">برای باز شدن منو روی آیکون بالا کلیک کنید</p>
</div>

 

کدهای css  پلاگین BigSlide

	body {
			overflow-x: hidden;
			margin: 0;
			padding: 0;
			border: 0;
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.panel {
		    position: fixed;
		    left: -20.6em; /*left or right and the width of your navigation panel*/
		    width: 20.6em; /*should match the above value*/
		}

		.wrap { 
		    position: relative;
		    height: 100%;
		}

		#menu ul {
			background-color: gray;
			height: 100%;
			margin-top: 0;
			padding-left: 0;
		}

		#menu ul li {
			list-style: none;
		}

		#menu ul li a {
			display: block;
			border-bottom: 2px solid rgb(52, 73, 93);
			padding: 1em;
			text-decoration: none;
			color: white;
		}

		#menu ul li a:hover {
			background-color: rgb(111, 101, 101);
		}

		.menu-link {
			color: rgb(255, 255, 255);
			background: rgba(0, 0, 0, 0.4);
			border-radius: 4px;
			padding: 0.2em 0.4em;
			font-size: 20px;
			text-decoration: none;
			position: relative;
			left: 50px;
			top: 50px;
		}

		#info {
			position: relative;
			left: 50px;
			top: 100px;
			font-family: tahoma;
		}

 

کتابخانه جی کوئری و و فایل جی کوئری BgSlideرا ضمیمه کنید.

<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/bigSlide.min_.js"></script>

کدهای جاوااسکریپت  پلاگین BigSlide

<script type="text/javascript">
  $(document).ready(function() {
	        $('.menu-link').bigSlide({
	        	side:"left",
	        	menuWidth: "20.6em",
	        	speed: "1000"
	        });
	    });
</script>