**فرانتیوم** *(Frontiom)* مثل همیشه گرسنه بود و واقعاً همون وقت‌ها بود که می‌شد ترسناک‌ترین صحنه‌هایِ شرکت رو دید.
دقیقا مثل گرگینه که با دیدن ماه شکلش عوض می‌شه. یه روز گرم تابستون، فرانتیوم داشت کم‌کم گرسنه می‌شد که بکندیوم متوجه شد و سریع براش یه همبرگر خوش‌طعم سفارش داد. وقتی فرانتیوم داشت غذاشو می‌خورد فهمید چقدر دوست داره یه همبرگر لایه‌لایه رو؛ فکر کرد: «نگاه کن—نان، همبرگر، کاهو، پیاز، همبرگر، دوباره نان.»
فرانتیوم، که فرانت‌اند دولوپرِ خفنی بود، ناگهان به این فکر افتاد: **«چی می‌شه اگه برای سایتم یه منوی لایه‌لایه بسازم؟»**
# **پروژه‌ی اولیه**
برای دانلود **پروژه‌ی اولیه** روی [این لینک](/contest/assignments/84122/download_problem_initial_project/307256/) کلیک کنید.
<details class="red">
<summary>**ساختار فایل‌ها**</summary>
```
hamburger/
├─ fonts/
├── <mark class="orange" title="این فایل را تکمیل کنید">index.html</mark>
├── <mark class="orange" title="این فایل را تکمیل کنید">index.js</mark>
└── <mark class="orange" title="این فایل را تکمیل کنید">styles.css</mark>
```
</details>
# **جزئیات پروژه**
در گیف زیر می‌توانید عملکرد کلی برنامه را مشاهده کنید:
در این سؤال، قرار است با تمرکز بر مفهوم **ریسپانسیو** *(Responsive)*، منوی موجود را بر اساس توضیحات زیر در حالت‌های مختلف نمایش دهید.
<details class="orange">
<summary>**فایل** `index.html`</summary>
</details>
<details class="blue">
<summary>**فایل** `styles.css`</summary>
### **بزرگتر از** `700px`**:**
+ **منو** *(Menu)* **نمایش داده شود** و **همبرگر منو** *(Hamburger Menu)* **نمایش داده نشود.**
### **کوچکتر از** `700px`**:**
+ **منو** *(Menu)* نمایش داده **نشود** و **همبرگر منو** *(Hamburger Menu)* **نمایش داده شود.**
</details>
<details class="yellow">
<summary>**فایل** `index.js`</summary>
شما باید با نوشتن کد مناسب، کاری کنید که با کلیک بر روی **آیکون سه‌خطی** موجود در navbar، منوی (mobile-menu) مانند تصویر زیر باز شود:
**توجه:** در فایل **styles.css** کلاسی با نام **show** تعریف شده است. شما باید هنگام کلیک بر روی **آیکون سه‌خطی** از این کلاس استفاده کنید تا منو باز و بسته شود.
</details>
# **آن‌چه باید آپلود کنید**
+ **توجه:** در این سوال شما مجاز به ایجاد تغییرات در هر سه فایلِ `index.html` ، `styles.css` و `index.js` هستید.
+ **توجه**: پس از اعمال تغییرات، کل پروژه را _Zip_ کرده و آپلود کنید. **همانند پروژه اولیه در فایل زیپ شده نباید کد در پوشه‌ی دیگری قرار بگیرد در غیر این صورت سیستم داوری فایل را شناسایی نکرده و نمره‌ای دریافت نخواهید کرد.**
+ **توجه:** تنها فایل‌هایی که در **ساختار پروژه** مشخص شده‌اند، در سیستم داوری **مورد پذیرش** قرار خواهد گرفت و سایر تغییرات در سایر فایل‌ها **بی‌تاثیر** خواهند بود.
+ **توجه:** کدهای سی‌اس‌اس خود را پس از کامنتی که در فایل نوشته شده است بنویسید.