چند مرحله ساده و ایجاد منو جهت طراحی ریسپانسیو از طریق پلاگین BigSlide

+989352589150

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

پلاگین BigSlide,منو ریسپانسیو,منو برای موبایل,منو کنار سایت,منوی عمودی

چند مرحله ساده و ایجاد منو جهت طراحی ریسپانسیو از طریق پلاگین BigSlide

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

نمایش دمو

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

 

کدهای html:

<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

	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>

کدهای جاوااسکریپت

<script type="text/javascript">
  $(document).ready(function() {
	        $('.menu-link').bigSlide({
	        	side:"left",
	        	menuWidth: "20.6em",
	        	speed: "1000"
	        });
	    });
</script>
اگر سوالی در رابطه با این مطلب دارید می توانید از طریق فرم زیر ارسال کنید
  • ایمیل شما به هیچ عنوان در سایت نمایش داده نمی شود
  • شماره تماس اختیاری است می توانید آن را وارد نکنید
  • کامنت شما بعد از تایید مدیر سایت نمایش داده می شود