رفتن به مطلب

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


پست های پیشنهاد شده

سلام و درود

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

<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>

با تشکر و سپاس

ویرایش شده توسط unid_user
لینک به ارسال
  • 2 هفته بعد...
در در 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/

ویرایش شده توسط soma
لینک به ارسال
در 19 ساعت قبل، soma گفته است :

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

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

 

accordion-support

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

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

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

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

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

https://jqueryui.com/accordion/ 

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

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

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

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

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...