آموزش پلاگین مگامنو چندین ستونه – MegaMenu

آموزش, اسکریپت
93-12-15
mega-menu--tarahsite.net

سلام
امروز میخوام روش استفاده از یک مگا منو زیبا را آموزش بدم .
مگا منو ها ، منو هایی هستند که زیر منو های آن می توانند چندین ستون بهمراه عکس و آیکون داشته باشند .

پیش نمایش

نکته :
در این آموزش ها نیازی به دانش جی کوئری و جاوا اسکریپت نیست و شما فقط با کپی پیس کنید کردن میتوانید از پلاگین استفاده کنید. در جا هایی که تنظیمات دلخواهی در کد های جاوا اسکریپت باشد در آموزش حتما قید میشود.( البته که شما اگر دانش کد نویسی جاوا اسکریپت داشته باشید خیلی بهتر می توانید از پلاگین استفاده کنید)

چگونگی استفاده از پلاگین مگا منو :
فایل های تابع کتابخانه ای جی کوئری را فراخوانی میکنیم :

<script src="js/jquery.min.js"></script>
<script src="js/megamenu.jquery.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>

کد های html را ما به چهار نوع نوشته ایم که همه آنها را درون کلاس زیر میگذاریم شما برحسب نیاز میتونید هرکدام که خواستید استفاده کنید :

<nav>
<ul class="megamenu">
.
.
.
</div>
</nav>

مثلا برای منوی دو ستونه باید کد های زیر را درون کلاس megamenu کپی کنید:

<ul class="megamenu">

<li data-hover="mega"> <a href="http://tarahsite.net/">دو ستونه</a>
	<div class="mega">
		<div class="inner">

			<ul class="level-2 picture-based two-columns">
				<li> <a href="http://tarahsite.net/"> <span class="mm-icon-10"></span> <strong>tarahsite.net</strong>
				<p> طراحی سایت ارزان قیمت </p>
				</a> </li>
				<li> <a href="http://tarahsite.net/"> <span class="mm-icon-11"></span> <strong>tarahsite.net</strong>
				<p>پوسته های واکنشگرا</p>
				</a> </li>
				<li> <a href="http://tarahsite.net/"> <span class="mm-icon-12"></span> <strong>tarahsite.net</strong>
				<p>بسته های گرافیکی </p>
				</a> </li>
				<li> <a href="http://tarahsite.net/"> <span class="mm-icon-13"></span> <strong>tarahsite.net</strong>
				<p>پوسته ها با پشتیبانی ۴ ماهه</p>
				</a> </li>
				<li> <a href="http://tarahsite.net/"> <span class="mm-icon-14"></span> <strong>tarahsite.net</strong>
				<p>طراحی سایت ارزان قیمت</p>
				</a> </li>
				<li> <a href="http://tarahsite.net/"> <span class="mm-icon-9"></span> <strong>tarahsite.net</strong>
				<p>طراحی سایت ارزان قیمت</p>
				</a> </li>
			</ul>
		<ul class="level-2 link-based two-columns">
		<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
		<p>طراحی سایت ارزان قیمت</p>
		</a> </li>
		<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
		<p>طراحی سایت ارزان قیمت</p>
		</a> </li>
		<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
		<p>طراحی سایت ارزان قیمت</p>
		</a> </li>
		<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
		<p>طراحی سایت ارزان قیمت</p>
		</a> </li>
		</ul>
		<ul class="level-2 list-based two-columns">
		<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
		<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
		<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
		<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
		<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
		<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
		</ul>
		</div>
	</div>
</li>   <!-- پایان دو ستونه -->

 

و برای سه ستونه کد های زیر را کپی کنید :

<li data-hover="mega"> <a href="http://tarahsite.net/">سه ستونه</a>
<div class="mega">
<div class="inner">
<ul class="level-2 picture-based three-columns">
<li> <a href="http://tarahsite.net/"> <span class="mm-icon-10"></span> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <span class="mm-icon-11"></span> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <span class="mm-icon-12"></span> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <span class="mm-icon-13"></span> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <span class="mm-icon-14"></span> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <span class="mm-icon-9"></span> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
</ul>
<ul class="level-2 link-based three-columns">
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
</ul>
<ul class="level-2 list-based three-columns">
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
</ul>
</div>
</div>
</li> <!-- پایان سه ستونه -->

و برای چهار ستونه هم کد های زیر را کپی کنید :

<li data-hover="mega"> <a href="http://tarahsite.net/">چهار ستونه</a>
<div class="mega">
<div class="inner">
<ul class="level-2 picture-based four-columns">
<li> <a href="http://tarahsite.net/"> <span class="mm-icon-10"></span> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <span class="mm-icon-11"></span> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت </p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <span class="mm-icon-12"></span> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <span class="mm-icon-13"></span> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <span class="mm-icon-14"></span> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <span class="mm-icon-9"></span> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <span class="mm-icon-8"></span> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <span class="mm-icon-7"></span> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
</ul>
<ul class="level-2 link-based four-columns">
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong>
<p>طراحی سایت ارزان قیمت</p>
</a> </li>
</ul>
<ul class="level-2 list-based four-columns">
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
<li> <a href="http://tarahsite.net/"> <strong>tarahsite.net</strong> </a> </li>
</ul>
</div>
</div>
</li> <!-- پایان چهار ستونه -->

خو در مرحله آخر  هم یک فایل CSS ایجاد مثلا megamenu-css.css و انرابا دستور زیر به فایل قالبتون اضافه کند:

<link href="megamenu-css.css" rel="stylesheet" type="text/css">

 

و حال کد های زیر را درون آن قرار دهید ::

/*-------------------------------------*/
/*---- tarahsite.net -- طراح سایت -------*/

ul , li{
	margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: top;
background: transparent;
vertical-align: baseline;
direction: rtl;
list-style: none;
	}
/* Wrapper  */
.wrapper {
  margin: 0 auto;
  width: 980px;
  text-align: right;
  background-color:#FFFFFF;
	box-shadow: 1px 1px 3px #7d7d7d;
	border-radius: 10px;
}
nav {
  text-align: center;
  background: #333;
  height: 50px;
  direction:rtl;
   display: block;
  direction:rtl;
}
/* Footer */
/*************/
/* Megamenu */
.megamenu {
  display: inline-block;
  margin: 0 auto;
  float:right;
}
.megamenu > li {
  float: right;
  padding: 7px 0;
}
.megamenu > li.is-active > a,
.megamenu > li[data-hover="mega"]:hover > a {
  background: rgba(0, 0, 0, 0.3);
}
.megamenu > li.is-active > a:after,
.megamenu > li[data-hover="mega"]:hover > a:after {
  opacity: 1;
}
.megamenu > li > a {
  transition: all 0.25s linear;
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  -ms-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  text-shadow: 0 1px 1px #000;
  font-weight: bold;
  text-transform: capitalize;
  border-radius: 10px;
  color: #fff;
  height: 36px;
  line-height: 2.5em;
  margin: 0 4px 0 0;
  padding: 0 16px;
  display: inline-block;
  position: relative;
}
.megamenu > li > a:hover {
  background: rgba(0, 0, 0, 0.3);
}
.megamenu > li > a:after {
  transition: none;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  z-index: 9999;
  top: 43px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #333333;
  border-width: 6px;
  left: 50%;
  margin-left: -6px;
  opacity: 0;
}
/* Actual hover mega menues */
.mega {
  display: none;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.9);
  position: absolute;
  margin: 7px 0 0 0;
  width: 650px;
  z-index: 9998;
  text-align: right;
}
.mega .inner {
  height: 100%;
  padding: 15px 15px 0;
}
/* Mixins */
.sprite-ui {
  background: transparent url('../images/sprite-ui.png') 0 0 no-repeat;
}
.transition-all {
  transition: all 0.25s linear;
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  -ms-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
}
.transition-none {
  transition: none;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
}
/* Sub menu inside a mega menu */
.level-2 {
  margin: 0 0 10px;
  overflow: hidden;
}
.level-2 li {
  float: left;
  display: block;
}
.level-2 a {
  overflow: hidden;
  display: block;
  border-radius: 5px;
  height: 55px;
  padding: 10px 5px 5px 0;
  margin: 0 5px 0 0;
}
.level-2 a:hover,
.level-2 a.is-active {
  background: rgba(75, 75, 75, 0.7);
}
.level-2 strong {
  font-size: 12px;
  word-wrap: break-word;
  display: block;
}
.level-2 p {
  font-size: 11px;
  color: #fff;
  word-wrap: break-word;
}
.level-2.picture-based span {
  background: transparent url(images/sprite-ui.png) 0 0 no-repeat;
  display: inline-block;
  width: 50px;
  height: 50px;
  float: left;
}
.level-2.picture-based strong {
  margin: 0 0 0 60px;
}
.level-2.picture-based p {
  margin: 3px 0 0 60px;
}
.level-2.link-based a {
  padding: 10px 5px 10px 0;
}
.level-2.link-based strong {
  margin: 0 0 0 10px;
}
.level-2.link-based p {
  margin: 3px 0 0 10px;
}
.level-2.list-based a {
  height: auto;
  padding: 10px 5px 10px 0;
}
.level-2.list-based strong {
  margin: 0 0 0 10px;
}
.level-2.list-based p {
  margin: 3px 0 0 10px;
}
.level-2.two-columns li {
  width: 50%;
}
.level-2.three-columns li {
  width: 33%;
}
.level-2.four-columns li {
  width: 25%;
}
.mm-icon-1 {
  background-position: -950px -4px !important;
}
.mm-icon-2 {
  background-position: -900px -4px !important;
}
.mm-icon-3 {
  background-position: -850px -4px !important;
}
.mm-icon-4 {
  background-position: -800px -4px !important;
}
.mm-icon-5 {
  background-position: -750px -4px !important;
}
.mm-icon-6 {
  background-position: -700px -4px !important;
}
.mm-icon-7 {
  background-position: -650px -4px !important;
}
.mm-icon-8 {
  background-position: -600px -4px !important;
}
.mm-icon-9 {
  background-position: -950px -54px !important;
}
.mm-icon-10 {
  background-position: -900px -54px !important;
}
.mm-icon-11 {
  background-position: -850px -54px !important;
}
.mm-icon-12 {
  background-position: -800px -54px !important;
}
.mm-icon-13 {
  background-position: -750px -54px !important;
}
.mm-icon-14 {
  background-position: -700px -54px !important;
}

 

پیش نمایش

 

دانلود فایل آموزش 
برای دانلود فایل واردشوید
ورود ثبت نام
برچسب ها : ، ، ، ، ، ، ، ، ، ، ، ، ، ، ، ،
برچسب ها :

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.

افزايش رتبه سايت در گوگل

جستجو
تماس با تیم طراح سایت

آیدی تلگرام : ferasat66@

کانال ما : tarahsitenet@

شماره تماس : ۰۹۳۷۲۰۸۸۷۷۱

آدرس : اصفهان امام خمینی شهرک کوثر

عضویت آموزش ربات تلگرام
[mc4wp_form id="5024"]

logo-samandehi