در این مطلب ساخت یک منوی درختی با استفاده از کدهای jquery را مرور می کنیم توضیح اینکه این منو می تونه در وردپرس یا هر سند html دیگه ای مثل قالبهای بلاگفا و بلاگ اسکای و … ساخته بشه
فرض کنید چنین لیستی داریم

  • آیتم اول
    • آیتم اول از اولین آیتم
    • آیتم دوم از اولین آیتم
  • آیتم دوم
    • آیتم اول از دومین آیتم
    • آیتم دوم از دومین آیتم
    • آیتم سوم از دومین آیتم
    • آیتم چهارم از دومین آیتم
  • آیتم سوم
    • آیتم اول از سومین آیتم
    • آیتم دوم از سومین آیتم
    • آیتم سوم از سومین آیتم

کد چنین منویی می شود

<ul class="parentList">
	<li class="folderList"><a href="#" title="آزمایش">آیتم اول</a> 
		<ul class="childrenList">
				<li class="itemList"> آیتم اول از اولین آیتم 	</li>
		        <li class="itemList"> آیتم دوم از اولین آیتم 	</li>
		</ul>
	</li>
	<li class="folderList"><a href="#" title="آزمایش">آیتم دوم</a> 
		<ul class="childrenList">
			<li class="itemList"> آیتم اول از دومین آیتم 	</li>
		        <li class="itemList"> آیتم دوم از دومین آیتم 	</li>
		        <li class="itemList"> آیتم سوم از دومین آیتم 	</li>
		        <li class="itemList"> آیتم چهارم از دومین آیتم 	</li>
		</ul>

	</li>
	<li class="folderList"><a href="#" title="آزمایش">آیتم سوم </a> 
		<ul class="childrenList">
				<li class="itemList"> آیتم اول از سومین آیتم 	</li>
		        <li class="itemList"> آیتم دوم از سومین آیتم 	</li>
		        <li class="itemList"> آیتم سوم از سومین آیتم 	</li>
		</ul>
	</li>
</ul>

حالا به li های گروه اول که عناوین اصلی هستند یک کلاس مثل folderList و به زیر مجموعه ها itemList را نسبت می دهم همینطور نام اولین ul را parentList و نام ul های بعدی را childrenList می گذارم برای زیبایی بیشتر با سه تصویر

filefolderfolder-closed (برای ذخیره تصاویر راست کلیک کنید و save as image را بزنید)

براشون به وسیله کدهای استایل بندی list-style-image مناسب قرار می دم با کدهایی شبیه

.parentList li a {
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	color:#aaa;
	font-weight:100;
}
.parentList li:hover>a,.parentList li.open>a {
	color:#000;
	font-weight:800;	
}
li.folderList {
	list-style-image:url('images/folder-a.png');
}
li.folderList.open {
	list-style-image:url('images/folder-b.png');
}
li.itemList {
	list-style-image:url('images/document.png');
}

و اگر قالب سایتم به کتابخانه جی کوئری متصل نیست کد

<script src="http://code.jquery.com/jquery-latest.js"></script>'

به head سایت و اگر متصل است کدهای زیر را به بخشی پایین تر از محل کدهای منو در کدهای html سایت

<script type="text/javascript">
$(".childrenList").hide();
$(".folderList>a").filter(function() {	
if($(this).parent("li.folderList"))	{
	$(this).replaceWith('<a title="نمایش زیر دسته های دسته بندی '+$(this).text()+'" href="javascript:void()">'+$(this).text()+'</a>');
}
});
$(".folderList>a,.itemList>a").click(function() {
if($(this).parent("li.folderList").find("ul").hasClass("childrenList")){
	$(this).parent("li.folderList").toggleClass("open");
	$(this).parent("li.folderList").find("ul.childrenList").slideToggle("slow");
}
});

</script>

نتیجه می شود:

  • آیتم اول
    • آیتم اول از اولین آیتم
    • آیتم دوم از اولین آیتم
  • آیتم دوم
    • آیتم اول از دومین آیتم
    • آیتم دوم از دومین آیتم
    • آیتم سوم از دومین آیتم
    • آیتم چهارم از دومین آیتم
  • آیتم سوم
    • آیتم اول از سومین آیتم
    • آیتم دوم از سومین آیتم
    • آیتم سوم از سومین آیتم



۳۷ پاسخ برای “ایجاد منوی درختی”

  • سلام
    خیلی ممنون از آموزشتون
    خیلی به دردم خورد
    از سایت های دیگه پیدا کردم اما انگلیسی بود و از چپ به راست…

  • چه بد…
    الان که گذاشتم این کدهای جاوا اسکریپت آخر کار نمی کنه
    جی کوئری هم گذاشتم اما کار نمی کنه

  • درست شد …
    ممنون…
    مشکل چیزی دیگه ای بود.
    باید این جی کوئری رو قبل از جی کوئری دات مین خود صفحه می زاشتم…

    بازم ممنون به خاطر این آموزش

  • default-avatar

    ing :

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

    
    
    
    
    Untitled Document
    
    
    .parentList li a {
        text-decoration:none;
        font-family:Arial, Helvetica, sans-serif;
        color:#aaa;
        font-weight:100;
    }
    .parentList li:hover>a,.parentList li.open>a {
        color:#000;
        font-weight:800;    
    }
    li.folderList {
        list-style-image:url('desktop/folder-a.png');
    }
    li.folderList.open {
        list-style-image:url('desktop/folder-b.png');
    }
    li.itemList {
        list-style-image:url('desktop/document.png');
    }
    
    
    
        
        آیتم اول
            
                     آیتم اول از اولین آیتم     
                     آیتم دوم از اولین آیتم     
            
        
        آیتم دوم
            
                 آیتم اول از دومین آیتم     
                     آیتم دوم از دومین آیتم     
                     آیتم سوم از دومین آیتم     
                     آیتم چهارم از دومین آیتم     
            
     
        
        آیتم سوم 
            
                     آیتم اول از سومین آیتم     
                     آیتم دوم از سومین آیتم     
                     آیتم سوم از سومین آیتم     
            
    • سلام ممنون بابت ایت آموزش ولی من نفهمیدم...

      سلام این کدها را بعد از کدهای منو (در این نمونه بعد از

        <li class="folderList"><a href="#" title="آزمایش">آیتم سوم </a> 
      <ul class="childrenList">
      <li class="itemList"> آیتم اول از سومین آیتم </li>
      <li class="itemList"> آیتم دوم از سومین آیتم </li>
      <li class="itemList"> آیتم سوم از سومین آیتم </li>
      </ul>
      </li>
      </ul>

      بگذارید

      <script type="text/javascript">
      $(".childrenList").hide();
      $(".folderList>a").filter(function() { 
      if($(this).parent("li.folderList")) {
      $(this).replaceWith('<a title="نمایش زیر دسته های دسته بندی '+$(this).text()+'" href="javascript:void()">'+$(this).text()+'</a>');
      }
      });
      $(".folderList>a,.itemList>a").click(function() {
      if($(this).parent("li.folderList").find("ul").hasClass("childrenList")){
      $(this).parent("li.folderList").toggleClass("open");
      $(this).parent("li.folderList").find("ul.childrenList").slideToggle("slow");
      }
      });
      
      </script>
  • default-avatar

    f :

    سلام
    اون کدهایی که واسه استایل فولدر ها گذاشتین رو باید کجا قرار بدیم؟(عکس ها رو هم آپلود کردم و در کد گذاشتم و کد رو هم در بین دو تا head گذاشتم،ولی نشون نداد!)

  • default-avatar

    f :

    سلام
    میخواستم بدونم میشه به جای گزینه های اصلی،تصویر قرار بدیم و با کلیک روی اون تصاویر منو درختی باز بشه؟!(توی یه وبلاگ دیدم!)

  • default-avatar

    f :

    آدرس وبلاگ خودم:www.namazmag.blogfa.com
    آدرس وبلاگی که دیدم:www.salat-90.blogfa.com
    راستی تو این وبلاگ فقط گزینه های آرشیو، منوی کشویی دارند.ولی من می خوام منوی درختی به این شکل باز شه. منوی درختی شما رو قرار دادم ولی نمیدونم چطوری تصویر قرار بدم.ممنون میشم کمکم کنید.

  • default-avatar

    f :

    وقتی تو این کد نشانی تصاویر رو گذاشتم،کجا قرارش بدم؟

  • default-avatar

    f :

    من اینو امتحان کردم ولی وقتی به وبلاگم رفتم دیدم گزینه ای که به جاش آدرس عکسو در image url گذاشتم حذف شده!!

  • default-avatar

    f :

    سلام ببخشید که هی مزاحمتون میشم ولی این روشم امتحان کردم.ولی وقتی اون گزینه رو میزنم، منو مثل قبل باز نمیشه!
    الان این کارو کردم. خودتون اگه تونستید برید وبلاگم تا ببینید چه شکلی شده.ممنون.

  • این کد را

    <a href="#" title="آزمایش" rel="nofollow" ><image src="http://www.8pic.ir/images/20244802750421415373.jpg"></a>

    به

    <a href="javascript:void(0)" title="آزمایش" rel="nofollow" ><image src="http://www.8pic.ir/images/20244802750421415373.jpg"></a>
    

    تغییر بدهید
    ودر موارد مشابه هم بجای # در کدهاتون

    javascript:void(0)

    بگذارید

  • default-avatar

    f :

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

  • default-avatar

    f :

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

  • default-avatar

    f :

    اینجا کادری نیست! ولی تو صفحه ای که من باز می کنم دور عکسا یه کادر هستش!!!

  • default-avatar

    f :

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

  • default-avatar

    f :

    ممنون آخه تو سیستم دانشگاهم امتحان کرده بودم همین مشکلات وجود داشت.خیلی ممنون.

  • default-avatar

    f :

    از اکسپلورر استفاده میکنم!ویندوز ۸.(البته تو وینوز ۷ هم همین شرایط بود.)

  • این کدها را جایگزین کدهای محل مشابه کنید

    <BlogPreviousItemsBlock>
    <div class="menu-ali1"><div class="m-t">دسته بندی موضوعات</div></div>
    <div class="m-p">
    <ul class="parentList">
    <li class="folderList"><image src="http://www.8pic.ir/images/36064705396747883754.png"> 
    <ul class="childrenList">
    <li><a href="http://namazmag.blogfa.com/post/25">نماز از دیدگاه آیات قرآن</a></li>
    <li><a href="http://namazmag.blogfa.com/post/26">آثار و برکات نماز از دیدگاه احادیث</a></li>
    <li><a href="http://namazmag.blogfa.com/post/27">احادیثی در رابطه با آمرزش گناهان با نماز</a></li>
    <li><a href="http://namazmag.blogfa.com/post/34">نماز جمعه از دیدگاه آیات قرآن</a></li>
    <li><a href="http://namazmag.blogfa.com/post/41">نماز شب در آیات قرآن</a></li>
    <li><a href="http://namazmag.blogfa.com/post/42">نماز شب در احادیث معصومین(ع)</a></li>
    </ul>
    </li> 
    <li class="folderList"><image src="http://www.8pic.ir/images/48163870682757027973.png"> 
    <ul class="childrenList">
    <li><a href="http://namazmag.blogfa.com/post/28">به خاطر نماز جنگ را به تاخیر انداختند!</a></li>
    <li><a href="http://namazmag.blogfa.com/post/29">اولین شهید نماز در کربلا.</a></li>
    <li><a href="http://namazmag.blogfa.com/post/30">بهترین اصحاب امام حسین (ع)</a></li> 
    </ul>
    </li>
    <li class="folderList"><image src="http://www.8pic.ir/images/68159877441842651507.png">
    <ul class="childrenList">
    <li><a href="http://namazmag.blogfa.com/post/19">بستن طناب تا در مسجد!</a></li>
    <li><a href="http://namazmag.blogfa.com/post/35">داستانی درباره نماز جمعه</a></li>
    <li><a href="http://namazmag.blogfa.com/post/20">سفارش امام زمان درباره نماز صبح و مغرب</a></li>
    <li><a href="http://namazmag.blogfa.com/post/21">نماز صالحان</a></li> 
    <li><a href="http://namazmag.blogfa.com/post/22">تاکید پیامبر به شرکت در نماز جماعت</a></li>
    <li><a href="http://namazmag.blogfa.com/post/23">عبادت این سرباز را ببینید.</a></li>
    <li><a href="http://namazmag.blogfa.com/post/24">حکایت عبرت انگیز پیامبر و سعد.</a></li> 
    </ul>
    </li>
    <li class="folderList"><image src="http://www.8pic.ir/images/03604775147442474618.png"> 
    <ul class="childrenList"> 
    <li><a href="http://namazmag.blogfa.com/post/5">تاثیر نماز بر بهداشت خواب</a></li>
    <li><a href="http://namazmag.blogfa.com/post/31">فایده طبی رکوع و سجود!</a></li>
    <li><a href="http://namazmag.blogfa.com/post/6">تاثیر نماز بر بیماری افسردگی</a></li>
    <li><a href="http://namazmag.blogfa.com/post/8">تاثیر نماز بر آرامش عضلات</a></li> 
    <li><a href="http://namazmag.blogfa.com/post/7">تاثیر نماز بر شادابی جسم و روان</a></li>
    <li><a href="http://namazmag.blogfa.com/post/11">تاثیر نماز بر عفونت های گوارشی</a></li>
    <li><a href="http://namazmag.blogfa.com/post/10">تاثیر نماز بر عفونت کلیه و مجاری ادراری</a></li>
    <li><a href="http://namazmag.blogfa.com/post/9">تاثیر نماز بر بیماری فشار خون</a></li>
    <li><a href="http://namazmag.blogfa.com/post/13">تاثیر نماز بر عفونت های تنفسی</a></li>
    <li><a href="http://namazmag.blogfa.com/post/14">تاثیر نماز بر بیماری ههای دهان و دندان</a></li>
    <li><a href="http://namazmag.blogfa.com/post/15">تاثیر نماز بر بیماری های پوستی</a></li>
    <li><a href="http://namazmag.blogfa.com/post/16">تاثیر نماز بر بیماری های اپیدرمیک</a></li>
    <li><a href="http://namazmag.blogfa.com/post/12">تاثیر نماز بر ایمنی حواس</a></li>
    <li><a href="http://namazmag.blogfa.com/post/17">تاثیر نماز بر بیماری های اضطرابی</a></li>
    </ul>
    </li>
    <li class="folderList"><image src="http://www.8pic.ir/images/25829224945191148455.png"> 
    <ul class="childrenList">
    <li><a href="http://namazmag.blogfa.com/post/32">چرا جمعه را جمعه نامیدند؟!</a></li>
    <li><a href="http://namazmag.blogfa.com/post/33">اهمیت نماز جمعه</a></li>
    <li><a href="http://namazmag.blogfa.com/post/36">نماز عبادی-سیاسی</a></li>
    <li><a href="http://namazmag.blogfa.com/post/37">وجوب نماز جمعه</a></li>
    <li><a href="http://namazmag.blogfa.com/post/38">نماز جمعه و بخشش گناهان</a></li>
    <li><a href="http://namazmag.blogfa.com/post/39">عقوبت ترک نماز جمعه</a></li>
    <li><a href="http://namazmag.blogfa.com/post/40">مومنان سکوت!</a></li> 
    </ul>
    </li>
    <li class="folderList"><image src="http://www.8pic.ir/images/52072891601643438895.png"> 
    <ul class="childrenList">
    <li><a href="http://namazmag.blogfa.com/post/41">نماز شب در آیات قرآن </a></li>
    <li><a href="http://namazmag.blogfa.com/post/42">نماز شب در احادیث معصومین(ع)</a></li>
    <li><a href="http://namazmag.blogfa.com/post/43">احکام و آداب نماز شب</a></li>
    <li><a href="http://namazmag.blogfa.com/post/44">کیفیت خواندن نماز شب</a></li>
    <li><a href="http://namazmag.blogfa.com/post/45">سفارش امام زمان(ع)</a></li>
    <li><a href="http://namazmag.blogfa.com/post/46">سفارش دیگری درباره نماز شب</a></li>
    <li><a href="http://namazmag.blogfa.com/post/47">کیفیت شب زنده داری و نافله شب</a></li>
    <li><a href="http://namazmag.blogfa.com/post/48">دعایی مجرب برای بیدارشدن به موقع برای نماز شب</a></li> 
    </ul>
    </li>
    <li class="folderList"><image src="http://www.8pic.ir/images/70878299099010159909.png"> 
    <ul class="childrenList">
    <li><a href="http://namazmag.blogfa.com/post/53">مبطلات وضو</a></li>
    <li><a href="http://namazmag.blogfa.com/post/55">مافی الذمه...</a></li>
    <li><a href="http://namazmag.blogfa.com/post/56">مکان نمازگزار</a></li>
    <li><a href="http://namazmag.blogfa.com/post/57">لباس نمازگزار</a></li>
    </ul>
    </li>
    <li class="folderList"><image src="http://www.8pic.ir/images/38494789771619181495.png"> 
    <ul class="childrenList">
    <li><a href="http://namazmag.blogfa.com/post/52">"کتاب "نماز شناسی </a></li>
    <li><a href="http://namazmag.blogfa.com/post/51"> کتاب "چرا نماز بخوانیم؟"</a></li>
    <li><a href="http://namazmag.blogfa.com/post/50">"کتاب "نقش نماز در شخصیت جوانان</a></li>
    <li><a href="http://namazmag.blogfa.com/post/49">کتاب "اسرار نماز"</a></li>
    <li><a href="http://namazmag.blogfa.com/post/3">کتاب "پرتوی از اسرار نماز"</a></li>
    <li><a href="http://namazmag.blogfa.com/post/2">کتاب "نماز راز دوست"</a></li>
    <li><a href="http://namazmag.blogfa.com/post/58">کتاب "راز نماز برای جوانان"</a></li>
    <li><a href="http://namazmag.blogfa.com/post/59">کتاب "نماز و عبادت فاطمه زهرا (س)" </a></li>
    <li><a href="http://namazmag.blogfa.com/post/1">کتاب ورق زن زیارت عاشورا</a></li>
    </ul>
    </li>
    </ul>
    <image src="http://www.8pic.ir/images/34434552648032569161.png">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
    </div>
    </BlogPreviousItemsBlock>
    <script type="text/javascript">
    $(".childrenList").hide();
    
    $(".folderList>img").click(function() {
    if($(this).parent("li.folderList").find("ul").hasClass("childrenList")){
    $(this).parent("li.folderList").toggleClass("open");
    $(this).parent("li.folderList").find("ul.childrenList").slideToggle("slow");
    }
    });
    </script>
    <style type="text/css">
    .folderList>img {
    cursor:pointer;
    cursor:hand;
    border-color:transparent;
    border-style:none;
    border-width:0;
    outline:invert none 0;
    }
    </style>
    
  • default-avatar

    f :

    کادر دور عکسا رفت. خیلی ممنون.
    فقط میخواستم بدنم مرورگر شما چیه؟ آخه نه اون کادرو نشون میداد نه توش پرش بود؟!

  • مرورگر کاملا سازگار بانسل جدید کدها گوگل کروم در مرحله اول و فایر فاکس در مرحله ی بعدیه
    گوگل کروم رونصب و تست کنید تفاوتها را چه در سرعت چه در تفسیر صحیح کدهاش متوجه می شید

  • default-avatar

    حسین :

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

    <ul class="parentList">                                     <?php  wp_list_categories("");  ?>                                           </ul>
  • default-avatar

    مهدی رزاقی :

    چگونه منوی درختی را سمت راست صفحه قرار دهم. باتشکر

موبایلتو شارژ کن