جی کوئری ایجاد منوی آکاردئونی ساده با جی کوئری

[unid_user 63]

سلام و درود

دوستان گرامی ، می خوام یه منوی آکاردئونی ساده با جی کوئری ایجاد کنم که وقتی روی هر کدوم از آیتم های منو کلیک میکنی، زیر منوی سایر آیتم ها بسته بشه.

<nav>
	<ul id="first-ul">
      <li>
        <a>صفحه اصلی</a>
      </li>
      <li>
        <a>خدمات</a>
        <ul class="second-ul">
        	<li>
              <a>آموزش رباتیک</a>  
         	</li>
          	<li>
              <a>طراحی و ساخت ربات</a>  
         	</li>
        </ul>
      </li>
      <li>
        <a>محصولات</a>
        <ul class="second-ul">
        	<li>
              <a>ربات مسیریاب</a>  
         	</li>
          	<li>
              <a>ربات حل ماز</a>  
         	</li>
        </ul>
      </li>
 	</ul>
</nav>

با تشکر و سپاس

ویرایش شده اردیبهشت 98 توسط unid_user

[unid_user 63]

دوستان لطفا راهنمایی کنید.

[soma 63]

در در 5/2/2019 at 20:03، unid_user گفته است :

سلام و درود

دوستان گرامی ، می خوام یه منوی آکاردئونی ساده با جی کوئری ایجاد کنم که وقتی روی هر کدوم از آیتم های منو کلیک میکنی، زیر منوی سایر آیتم ها بسته بشه.

<nav>
	<ul id="first-ul">
      <li>
        <a>صفحه اصلی</a>
      </li>
      <li>
        <a>خدمات</a>
        <ul class="second-ul">
        	<li>
              <a>آموزش رباتیک</a>  
         	</li>
          	<li>
              <a>طراحی و ساخت ربات</a>  
         	</li>
        </ul>
      </li>
      <li>
        <a>محصولات</a>
        <ul class="second-ul">
        	<li>
              <a>ربات مسیریاب</a>  
         	</li>
          	<li>
              <a>ربات حل ماز</a>  
         	</li>
        </ul>
      </li>
 	</ul>
</nav>

با تشکر و سپاس

سلام وقت به خیر 

از بوت استراپ استفاده میکنید این سورس میتونه بهتون کمک کنه ، دقیقا بخش زیر همون موردی هست که توضیح دادید

 

accordion-support

https://bootstrap-vue.js.org/docs/components/collapse/

ویرایش شده اردیبهشت 98 توسط soma

[unid_user 63]

در 19 ساعت قبل، soma گفته است :

سلام وقت به خیر 

از بوت استراپ استفاده میکنید این سورس میتونه بهتون کمک کنه ، دقیقا بخش زیر همون موردی هست که توضیح دادید

 

accordion-support

https://bootstrap-vue.js.org/docs/components/collapse/

ممنون از راهنمایی تون اما نمیخوام از بوت استرپ یا فریم ورک دیگه ای استفاده کنم.

[soma 63]

در ۱ ساعت قبل، unid_user گفته است :

ممنون از راهنمایی تون اما نمیخوام از بوت استرپ یا فریم ورک دیگه ای استفاده کنم.

برای درست کردن چنین منوی آکاردئونی بدون فریمورک باید از ترکیب css و جیکوئری استفاده کنید .بنابر این سورس jqurey زیر رو بهتون پیشنهاد میدم : 

https://jqueryui.com/accordion/ 

برای اینکه آموزش های بیشتری پیدا کنید میتونید عبارات زیر رو جستجو کنید ، اموزشهای فارسی خوبی میتونید پیدا کنید 

آموزش CSS | ساخت منوی آکاردئونی (کشویی) با CSS
ساخت منوی آکاردئون با جیکوئری 

ساخت منوی آکاردئونی با css

امیدوارم تونسته باشم کمک کنم