ijquery

منو آکاردیون

14 دیدگاه / آکارديون، منو / از

screenshot

با استفاه از این جی کوئری می توانید یک منو آکاردیونی برای پروژه خودتون پیاده کنید

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

  1. قبل از تگ <head/> 
    <style>
.topnav {
	direction:rtl;
	width: 213px;
	padding: 40px 28px 25px 0;
	font-family: tahoma, Arial, Helvetica, sans-serif;
	float:right;
}
ul.topnav {
	padding: 0;
	margin: 0;
	font-size: 1em;
	line-height: 0.5em;
	list-style: none;
	border: 1px solid #B4B4B4;
}
ul.topnav li {
	background: #F5F5F5; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #e7e7e7 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e7e7e7)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%, #e7e7e7 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%, #e7e7e7 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%, #e7e7e7 100%); /* IE10+ */
	background: linear-gradient(to bottom, #ffffff 0%, #e7e7e7 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7e7e7', GradientType=0 ); /* IE6-9 */
	padding-left: 0;
	border-bottom: 1px solid #B4B4B4;
	list-style:none;
}
ul.topnav li a {
    color: #8B8B8B;
    display: block;
    font-size: 13px;
    font-weight: bolder;
    line-height: 10px;
    padding: 14px;
    text-decoration: none;
    text-shadow: 1px 1px #FFFFFF;
}

ul.topnav li a:hover {

}
ul.topnav ul {
	margin: 0;
	padding: 0;
	display: none;
}
ul.topnav ul li {
	margin: 0;
	padding: 0;
	clear: both;
}
ul.topnav ul li a {
    background: none repeat scroll 0 0 #5A5A5A;
    color: #F4F4F4;
    font-size: 13px;
    font-weight: normal;
    outline: 0 none;
    padding-left: 20px;
    text-shadow: none;

}
ul.topnav ul li a:hover {

}
ul.topnav ul ul li a {
	background:#828282;
	color: silver;
	padding-left: 40px;
	color: #F4F4F4;
}
ul.topnav ul ul li a:hover {
}
ul.topnav span {
	float: right;
}
</style>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="scriptbreaker-multiple-accordion-1.js"></script>
<script language="JavaScript">

$(document).ready(function() {
	$(".topnav").accordion({
		accordion:false,
		speed: 500,
		closedSign: '',
		openedSign: ''
	});
});

</script>

     

  2. بعد از تگ <body> 
    <ul class="topnav">
  <li><a href="#">اضافه کردن مطلب</a>
    <ul>
      <li><a href="#">مطالب من</a>
        <ul>
          <li><a href="#">زیر منو 1</a></li>
          <li><a href="#">زیر منو  2</a></li>
          <li><a href="#">زیر منو  3</a></li>
          <li><a href="#">زیر منو  4</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">پروفایل من</a></li>
  <li><a href="#">برنده / خرید</a></li>
  <li><a href="#">فروخته مطالب</a></li>
  <li><a href="#">در انتظار پرداخت</a></li>
  <li><a href="#">حساب کاربری</a></li>
  <li><a href="#">جستجو در محتوا</a></li>
</ul>

     


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

14 دیدگاه دربارهٔ «منو آکاردیون»

  1. محمد محسنی

    سلام. ممنون از سایت خوبتون.
    میشه یاد بدید چطوری این پلاگین رو طوری تغییر بدیم که بجای کلیک کردن و نمایش زیر دسته ها، با رفتن موس روی اونها زیر دسته ها نمایش داده بشه؟!؟
    یعنی کلیک کردن از فرایند نمایش زیر دسته ها حذف بشه!

    پاسخ
  2. mahdi

    سلام
    scriptbreaker-multiple-accordion-1.js موجود در فایل رو باز کنید و لاین 48 click رو به mouseover تغییر بدید حالا هر بخشی که میخواید رو به جای رویداد کلیک از mouseover استفاده میکنید

    پاسخ
  5. پارسا نامی

    سلام
    من توانستم این منو را در جای مناسب بگذارم اما نمی توانم زیرمنو بازشونده اش را فعال کنم. منو مثل سنگ هیچ عکس العملی نشان نمی دهد.

    پاسخ
    1. مهدی

      سلام پارسا جان .
      احتمالاً یا درست از پلاگین استفاده نکردی منظورم اینه که فایل ها رو درست فراخوانی نکردیو و جاهاشونو درست نزاشتی یا تداخلی بین کتابخانه jQuery قالبت هست یا مشکل از css هست .
      برای عیب یابی بهتر از console میتونی دیباگ کنی اما اگر نتونستی آنلاین بهم لینک بده چک کنم

      پاسخ
  6. علی

    سلام
    میخوام وقتی از زیر منو صفحه ای باز میشه ، توی صفحه باز شده همون زیر منو بطور خودکار بازشده باشه (active باشه )
    متوجه منظورم شدین ؟
    چجوری اینکار رو بکنم ؟ کلاسی چیزی باید بهش معرفی کنم ؟

    پاسخ
  7. saeed

    سلام.برای منم که توی قالب وردپرسم استفاده کردممشکلتداخل وجود داره و زیر منو ها باز نمیشه.میشه راهنماییم کنی

    پاسخ
  8. sara

    با عرض سلام و تشکر از سایت خوبتون میشه یکم بیشتر راهنمایی کنید من همه کارایی که امر کردید را کردم ولی منوام حرکت نمیکنه چرا؟؟

    پاسخ
  9. مهمان

    سلام با تشکر از مطالب خوبتون ببخشید اگه بخوایم به جای تب اول پیش فرض تب دوم باز باشد باید چکار کنیم؟؟؟؟

    پاسخ
    1. مهدی

      سلام
      شما میخواین قبل از کلیک بر روی منو به صورت پیش فرض دومی باز باشه یا وقتی که کلیک میشه ؟

      پاسخ
  11. شایان

    سلام خیلی خوبه
    درست به موقع به دردم خورد
    فقط یه راهنمایی میخام ازتون
    اگه دقت کرده باشین وقتی برای منوهای دیگه هم مثل منوی اول ساب منو اضافه میکنم با کلیک روی اونا باز میشن اما منوی قبلی که باز بود بسته نمیشه این باعث طولانی شدن لیست میشه اگه همزمان چندتا منو باز باشن

    چه تغییری ایجاد کنیم تا هر لحظه فقط ساب منوهای یک منو اصلی بتونن باز باشن یعنی با کلیک روی یک منوی اصلی دیگه منوی قبلی بسته بشه و این باز بشه؟؟؟؟

    پاسخ

دیدگاه‌ خود را بنویسید

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