ساخت منو در HTML به دو روش نویگیشن بار و کشویی
![ساخت منو در HTML به دو روش نویگیشن بار و کشویی](https://blog.faradars.org/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2024/02/Tidy-Office-Programming.jpg.webp)
HTML، مخفف «HyperText Markup Language»، نوعی زبان اساسی نشانهگذاری است که برای ایجاد برنامههای کاربردی وب استفاده میشود. این زبان اولین بار بهوسیله شخصی به نام «برنرز لی» (Berners-Lee) در سال 1991 (۱۳۶۹) مفهومسازی و به طور رسمی در سال 1995 (۱۳۷۴) منتشر شد. یکی از قابلیتهای جذابی که با استفاده از این زبان نشانهگذاری امکانپذیر است ساخت منوهای پیمایشی است که در این مطلب از «مجله فرادرس» به نحوه ساخت منو در HTML به صورت کاملاً عملی خواهیم پرداخت.
در مطلب پیشِ رو ابتدا مقدمات و رسالت منوها را در دنیای طراحی سایت مورد بررسی قرار خواهیم داد و انواع منوها را معرفی خواهیم کرد. به دنبال آن نوعی منوی ناوبری در HTML خواهیم ساخت که به کاربران اجازه میدهد بین صفحات مختلف وبسایت حرکت کنند. علاوه بر این، ما با استفاده از زبان شیوهنامه CSS کمی منوها و صفحات خود را بهبود میبخشیم. همچنین در بخش آخر این مطلب به ساخت نوعی منوی کشویی با HTML خواهیم پرداخت تا به مفهوم ساخت منوها در HTML مسلطتر شویم.
پیش نیازهای ساخت منو در HTML
قبل از شروع این آموزش، توصیه میشود که درک اولیهای از HTML و CSS داشته باشید. در حالی که این آموزش به صورت ساده نگارش شده است اما داشتن درک مفاهیم اساسی از این دو ابزار توسعه وب بسیار مفید خواهد بود. اگر در رابطه با HTML چیزهای زیادی نمیدانید بهتر است که مطلب راهنمای مقدماتی HTML را از مجله حداقل یکبار بخوانید.
برای این آموزش ساخت منو در HTML ما از ویرایشگر کد «ATOM» استفاده خواهیم کرد. اتم نوعی ابزار کاربرپسند و قدرتمند است که از زبانهای برنامه نویسی مختلف از جمله HTML ،CSS و جاوا اسکریپت پشتیبانی میکند. در ادامه با برخی از مفاهیم HTML که با ساخت منو مرتبط بوده و به نوعی از ابزارهای منو هستند، آشنا خواهیم شد.
عنصر Nav در HTML چیست؟
«HTML5» عنصر «<nav>» را معرفی کرد که به عنوان نوعی کانتینر برای ساخت عناصر پیمایشی اصلی وب سایتها عمل میکند. این عنصر میتواند شامل فهرستی از پیوندها یا حتی نوعی جعبه جستجو باشد. استفاده از «<nav>» در مقایسه با محصور کردن بلوکهای عناصر پیمایشی در عنصر کلی «<div>» کار بهتری است زیرا وضوح و تجربه کاربری را بهبود میبخشد. با استفاده از «<nav>»، کاربران میتوانند روش واضح و ثابت برای تعریف مناطق ناوبری اولیه ارائه دهند.
![یک شخص برنامه نویس در حال کدنویسی](https://blog.faradars.org/wp-content/uploads/2024/02/a-html-programmer-revised.jpg)
عنصر نامبرده هم برای بهینهسازی موتورهای جستجو (سئو) و هم برای کاربرانی که دارای اختلالات بینایی هستند مفید است. برای مثال، صفحهخوانها میتوانند راحتتر منطقه پیمایش اصلی را شناسایی کنند و این امر تجربه کاربری را بهبود میبخشد. بلوک ناوبری معمولی با ساختار navممکن است چیزی شبیه به قطعه کد زیر باشد:
1<nav>
2 <ul>
3 <li><a href="#">صفحه اصلی</a></li>
4 <li><a href="#">در باره ما</a></li>
5 <li><a href="#">ارتباط با ما</a></li>
6 </ul>
7</nav>
توجه به این نکته مهم است که navباید برای عناصر پیمایش اصلی صفحه وب، مانند «صفحه اصلی»، «صفحه درباره ما»، «تماس با ما» و غیره استفاده شود. این عنصر نباید برای عناصری مانند پیوندهای تبلیغاتی یا عناصر پیمایش ثانویه مورد استفاده قرار بگیرد.
ابزارهای اصلی برای ساخت منو در HTML
در HTML، منوها و عناصر پیمایشی اغلب شامل استفاده از تگهای linkو aهستند که توضیحات مربوط به آنها به صورت زیر است:
- عناصر پیوند link: اینها روابط بین اسناد مختلف را توصیف میکنند. به عنوان مثال، میتوان به کاربر اطلاع داد که سند فعلی بخشی از یک مجموعه بزرگتر است که چندین سند را در برمیگیرد. این عنصر برای ایجاد روابطی مانند فهرست مطالب در بین اسناد مفید است.
- عنصر a: این تگ به کاربر امکان میدهد به اسناد، منابع یا بخشهای خاص در سندی پیوندی ایجاد کند. برخلاف عناصر link، انکرتکست یا همان عناصر aبه طور خودکار به وسیله عامل کاربر دنبال نمیشوند. بازدیدکنندگان آنها را به وسیله ابزارهایی مانند کلیک ماوس، ورودی صفحهکلید یا تشخیص صدا فعال میکنند.
داشتن انکرتکستها یا پیوندها به طور خودکار آنها را به منو تبدیل نمیکند. ما باید آنها را ساختار و استایل بدهیم تا نقش آنها را به عنوان منوی ناوبری مشخص کنیم. در این رابطه لیستهای HTML برای ساخت منو بسیار مؤثر هستند. اگر ترتیب صفحات مهم نباشد، میتوان از لیست نامرتب استفاده کرد در غیر این صورت میتوان لیستی سفارشی ایجاد کرد.
مزایای استفاده از nav و لیست در ساخت منو
استفاده از navو لیستها برای منوها چندین مزیت را به دنبال دارد که از این مزایا میتوان فهرست موارد زیر را نام برد:
- ایجاد تمایز: قرار دادن لیست و پیوندهای پیمایشی در داخل navروشن میکند که آنها عناصر پیمایش اصلی هستند که این قابلیت به خوانندگان صفحه کمک کرده و هدفگذاری CSS و جاوا اسکریپت را ساده میکنند.
- لیستهای تودرتو: لیستها را میتوان تودرتو قرار داد که امکان ایجاد آسان سطوح چندگانه سلسلهمراتب منوهای ناوبری را فراهم میکند.
- ساختار منطقی: با استفاده از لیستها و navبازدیدکنندگان بهراحتی میتوانند درک کنند که این پیوندها به یکدیگر تعلق دارند و واحدی منسجم را تشکیل میدهند.
هنگام تودرتو کردن لیستها، با جاسازی لیست تودرتو در داخل عنصر li(عناصر لیست) باید از ساختار مناسب اطمینان حاصل کرد. تودرتو کردن لیستها به صورت نادرست میتواند منجر به مشکلاتی در استایلدهی، عملکرد جاوا اسکریپت و تبدیل به فرمتهای دیگر شود. ساختار صحیح باید به صورت زیر باشد:
1<ul>
2 <li>
3 <ul>
4 <li>
5 </li>
6 </ul>
7 </li>
8</ul>
باید از ساختار نادرست اجتناب شود زیرا میتواند بر کیفیت و عملکرد کد تأثیر بگذارد. برای مثال ساختار زیر نادرست است:
1<ul>
2 <li>
3 </li>
4 <ul>
5 <li>
6 </li>
7 </ul>
8</ul>
منوهای انعطاف پذیر و اهمیت ساخت آن ها
منوهای وبسایت اغلب نیاز به تطبیق و تکامل در طول زمان دارند. همانطور که یک سایت رشد و تغییر میکند، ویژگیهای جدیدی به آن اضافه میشود و پایگاه کاربر گسترش مییابد، ساختار منو ممکن است نیاز به تنظیمات و تغییرات داشته باشد. طراحی منوها با در نظر گرفتن قابلیت انعطافپذیری بسیار مهم است و به کاربر امکان میدهد با پیشرفت سایت، آیتمهای منو را به راحتی اضافه یا حذف کند. علاوه بر این، منوها ممکن است نیاز به ترجمه به زبانهای مختلف داشته باشند که این عامل میتواند بر طول انکرتکستها تأثیر بگذارد. بنابراین، ایجاد منوهایی که میتوانند تغییرات طول انکرتکست به دلیل ترجمه زبان را در خود جای دهند، ضروری است.
علاوه بر این، ممکن است با موقعیتهایی مواجه شویم که منوها بهصورت پویا با استفاده از زبانهای سمت سرور تولید میشوند،نه اینکه در HTML ایستا کدگذاری شوند. با این حال، این کار هم از اهمیت دانستن HTML نمیکاهد. در واقع، دانش HTML بسیار مهم است زیرا هنوز هم نیاز به ایجاد قالبهای HTML بسیار روند پر تقاضایی است.
انواع منو در HTML
در HTML، هنگام کار بر روی وبسایتهای مختلف، با انواع منوها مواجه خواهیم شد. در بیشتر موارد میتوان با استفاده از لیستها منوهایی را ایجاد کرد اما شرایطی وجود دارد که محدودیتهای رابط ممکن است به رویکردهای جایگزینی نیاز داشته باشد.
در کل فهرست منوهایی که با لیستها میتوان آن را ساخت به صورت موارد زیر هستند:
- منوی پیمایشی درون صفحه یا فهرست مطالب: این نوع از منوها برای ساخت منو در HTML شامل ایجاد فهرستی از مطالب برای صفحه، با پیوندهایی است که کاربران را به بخشهای مختلف در همان صفحه هدایت میکند.
- منوی ناوبری سایت: این منو مستلزم طراحی نوعی نوار ناوبری برای کل وبسایت یا بخش خاصی از آن است. پیوندهای داخل این نوار پیمایش به صفحات مختلف در همان سایت اشاره میکنند.
- منوهای متنی: این منوها فهرستی از پیوندها هستند که به صفحاتی که نزدیک به موضوع صفحه فعلی مرتبط بوده منتهی میشوند. این پیوندها ممکن است به صفحاتی در همان سایت یا سایتهای خارجی اشاره کنند.
- نقشههای سایت: نقشههای سایت شامل فهرستی بزرگی از لینکها هستند که کاربران را به تمام صفحات وبسایت هدایت میکنند. این پیوندها اغلب در فهرستهای فرعی مرتبط سازماندهی میشوند تا ناوبری را تسهیل کنند.
- صفحهبندی: صفحهبندی شامل ارائه پیوندهایی به صفحات دیگر است که شامل بخشهای بیشتری یا بخشهایی از مجموعهای بزرگتر در کنار صفحه فعلی هستند. به عنوان مثال، پیوندها ممکن است به «بخش ۱»، «بخش ۲» و «بخش ۳» یک مقاله خاص منتهی شوند.
درک این نوع منوها و نحوه پیادهسازی آنها با استفاده از لیستهای HTML در توسعه وبسایتها مهارتی ارزشمند است.
منوی فهرست مطالب
منوی پیمایشی درون صفحه که به عنوان فهرست مطالب نیز شناخته میشود، به کاربران اجازه میدهد تا در صفحه وب خاصی را پیمایش کنند. ساختار هر پیوند منو به این صورت است:
1<nav>
2 <ol>
3 <li><a href="#intro">Introduction</a></li>
4 <!-- Other menu items -->
5 </ol>
6</nav>
ویژگی hrefهر پیوند با استفاده از نوعی انکر تکست به بخش خاصی از صفحه اشاره میکند که با ویژگی idآن مشخص میشود. مانند مثال زیر:
1<h2 id="intro">Introduction</h2>
علاوه بر این، هر بخش معمولاً شامل پیوندی برای بازگشت به منو است که عملکرد مشابهی دارد و کاربران را به منو هدایت میکند. یک اشکال اساسی برای این نوع منو در اینترنت اکسپلورر (نسخههای ۶ و ۷) وجود دارد که در آن پیمایش با صفحهکلید آن طور که انتظار میرود عمل نمیکند. پس از کلیک روی یک لینک در فهرست مطالب، اینترنت اکسپلورر بهجای تمرکز بر روی اولین لینک در بخش انتخاب شده، کاربران را به بالای صفحه برمیگرداند.
برای رفع این مشکل، راهحل شامل ایجاد ویژگی خاص به نام hasLayoutاست. در این رابطه قرار دادن انکر تکست در عنصری مانند sectionو تنظیم عرض آن بر روی ۱۰۰ درصد به وسیله CSS، مشکل را حل میکند. این راهحل ممکن است پیچیده به نظر برسد اما نهتنها باگ اینترنت اکسپلورر را برطرف خواهد کرد، بلکه استایلدهی سادهتر بخشها را نیز امکانپذیر میکند.
منوی ناوبری سایت
ساخت منو در HTML از نوع ناوبری کاری رایج در توسعه وب است. این نوع منو ساختار واضحی از محتوای سایت و گزینههایی برای کاوش در اختیار بازدیدکنندگان قرار میدهد. لیستها اغلب برای این منظور به صورت زیر استفاده میشوند:
1<nav>
2 <ul>
3 <li><strong>Home</strong></li>
4 <li><a href="about.html">About Us</a></li>
5 <li><a href="clients.html">Our Clients</a></li>
6 <li><a href="products.html">Our Products</a></li>
7 <li><a href="services.html">Our Services</a></li>
8 <li><a href="contact.html">Contact Us</a></li>
9 </ul>
10</nav>
یکی از جنبههای مهم منوهای ناوبری وب این است که اطمینان حاصل شود که کاربران همیشه مکان فعلی خود را میدانند. برای این کار انجام کارهای بصری مانند استفاده از عنصر strongمفید است. این قابلیت به کاربران کمک میکند مکان خود را شناسایی کنند. نکته دیگر تعداد گزینههایی است که به طور همزمان به کاربران ارائه میشود. در حالی برخی از منوها برای هر صفحه از سایت کاربرد دارند اما رعایت تعادل بین قابلیت استفاده و سادگی ضروری است. منو با گزینههای زیاد میتوانند منجر به تجربه بد کاربری شود و ممکن است برای قابلیت دید موتورهای جستجو مفید نباشند.
همچنین برای منوهای ناوبری بهتر است بخشهای اصلی سایت را اولویتبندی کرد و در صورت لزوم، زیر منوهایی را برای سادگی در نظر گرفت. ساده کردن منوها برای تمرکز بر بخشهای اصلی میتواند تجربه کاربر و بهینهسازی موتور جستجو را بهبود بخشد.
منوهای متنی
منوهای متنی در طراحی وب اساساً پیوندهایی هستند که اطلاعات اضافی مربوط به صفحه فعلی را ارائه میدهند. همانطور که در تصویر زیر نشان داده شده است، احتمالاً در انتهای مقالات با بخش مطالب مرتبط داشته باشیم. در انتهای مطالب مجله فرادرس چنین منوهایی موجود است. در طراحی وب، منوهای متنی به عنوان وسیلهای برای تبلیغ محتوای مرتبط در سایت عمل میکنند. از دیدگاه HTML، آنها فهرستی از پیوندها هستند.
نقشه سایت چیست؟
نقشه سایت نمایی کلی از تمام صفحات وبسایت ارائه میدهد و بازدیدکنندگان میتوانند بهراحتی ساختار سایت را با آن درک کنند. آنها بهویژه برای وبسایتهای بزرگ که پیدا کردن صفحات خاص ممکن است سخت باشد مفید هستند. نقشههای سایت همچنین قابلیتها و گزینههای بازگشتی را برای بازدیدکنندگانی که گمشدهاند یا عجله دارند ارائه میدهند. از منظر HTML، نقشههای سایت را میتوان بهعنوان نوعی فهرست جامع از پیوندها یا برای سایتهای بسیار بزرگ، بهعنوان سرفصلهای بخش با پیوندهای تودرتو که منعکسکننده سلسلهمراتب بخشهای خاص هستند، نشان داد. علاوه بر این، آنها ممکن است شامل فرمهای جستجو برای هر بخش برای تسهیل دسترسی سریع به محتوای مورد نظر باشند.
منوهای صفحه بندی
«منوی صفحهبندی» (Pagination) برای پیمایش در اسناد بزرگی که به چندین صفحه تقسیم شدهاند ضروری است. این نوع منوها در ساخت منو HTML برای سناریوهایی مانند مرور آرشیو تصاویر یا صفحات نتایج جستجو در موتورهای جستجو مانند گوگل یا یاهو مورداستفاده قرار میگیرند. برخلاف سایر منوهای پیمایشی، منوی صفحهبندی معمولاً به همان سند پیوند داده و در کنار آن گزینههای اضافی یا اطلاعات بیشتر را نمایش میدهد. شکل زیر منوهای صفحهبندی مختلف را نشان میدهد که بازدیدکنندگان را قادر میسازد تا در میان مجموعه دادههای گسترده حرکت کرده و در عین حال موقعیت فعلی خود را پیگیری کنند.
![تصویری که نوعی منوی صفحه بندی یا Pagination را نشان می دهد.](https://blog.faradars.org/wp-content/uploads/2024/02/a-Pagination-menu.png)
از دیدگاه HTML، منوی صفحهبندی شامل ارائه فهرستی از پیوندها است که در آن پیوند فعلی از سایر پیوندها برجسته شده است تا موقعیت فعلی در صفحهبندی را نشان دهد. با این حال، صفحهبندی به منطق برنامهنویسی بیشتری در مقایسه با سایر انواع ناوبری نیاز دارد. بسته به موقعیت موجود در مجموعه داده، ممکن است لازم باشد پیوندهای قبلی، بعدی، اول و آخر را نشان داده یا پنهان کرد. برای مجموعه دادههای گسترده، ارائه پیوندهایی به بخشهای خاص، مانند نتایج 0-100، نتایج 101-200، و غیره نیز معمول است.
ایجاد منوها بدون لیست در HTML
گاهی اوقات، لیستهای استاندارد HTML ممکن است برای ایجاد منوها کافی نباشند و این وضعیت به ویژه در طراحیهای پیچیده خوش را نشان میدهد. در چنین مواردی ممکن است تکنیکهای جایگزین لازم باشد.
یکی از این تکنیکها شامل استفاده از «نقشههای تصویری» (Image Maps) برای ایجاد منوهایی از تصاویر است. نقشههای تصویری به کاربر این امکان را میدهد که مناطقی از تصویر را به عنوان مناطق قابل کلیک مشخص کرده که هرکدام به صفحاتی پیوند داده شدهاند. به عنوان مثال، منویی که در شکل زیر نشان داده شده است، میتواند با کلیک بر روی بخشهای مختلف یک تصویر به دیگر صفحات رفت.
![تصویری برای نمایش منوهای سایت از نوع نقشه های تصویری](https://blog.faradars.org/wp-content/uploads/2024/02/Image-Maps-menue.png)
برای ایجاد نقشه تصویری، باید نقشهای با مناطق مختلف تعریف کرد که به آن «هات اسپات» (Hotspots) نیز میگویند. هر ناحیه با یک URL خاص، متن جایگزین و شکل مرتبط است. مختصات هات اسپات داخل تصویر نیز مشخصشده است. کد زیر نحوه استفاده از هات اسپات را نشان میدهد:
1<nav>
2 <img src="skillset.gif" alt="A web developer's skillset - web standards, browser bugs and user impact" usemap="#skillset_Map">
3 <map name="skillset_Map">
4 <area shape="poly" alt="W3C Guidelines" coords="90,70,113,112,67,112,90,70" href="w3c.html">
5 <area shape="poly" alt="Browser Bugs" coords="61,120,115,120,137,157,40,157,62,120" href="browser.html">
6 <area shape="poly" alt="User Impact" coords="35,166,142,166,171,216,6,216,35,166" href="userimpact.html">
7 </map>
8</nav>
هر منطقه در نقشه مربوط به بخشی از تصویر بوده و شامل ویژگیهایی مانند href ،Alt ،coords و غیره است. استفاده از نقشههای تصویری میتواند رویکردی مناسب باشد ولی کار با آنها کمی خستهکننده است. در این رابطه برای راحتی کار ابزارهای ویرایش تصویر مانند «Adobe Image Ready» یا «Fireworks» ویرایشگرهای بصری را برای ایجاد آسانتر نقشههای تصویری ارائهدهنده میدهد. این ابزارها کد HTML لازم را برای تولید کرده و فرآیند را ساده میکنند.
استفاده از فرم ها به جای منو
یکی دیگر از روشهای ساخت منو در HTML استفاده از فرمها است که با استفاده از آنها میتوان منوهای کشویی ساخت. با این روش میتوان چندین گزینه را بدون اشغال فضای صفحهنمایش به بازدیدکنندگان خود ارائه داد. منوهایی که با فرم ساخته میشوند منو را به صورت یک خط نمایش میدهند که این قابلیت منو را کارآمد میکند. شکل زیر برای بیان این هدف است:
![تصویری از یک منوی ساخته شده با استفاده از فرم](https://blog.faradars.org/wp-content/uploads/2024/02/a-menu-based-form.png)
علاوه بر این، میتوان با استفاده از عنصر optgroup، گزینههای منو را در گروههایی سازماندهی کرد. این قابلیت به کاربر این امکان را میدهد که گزینههای مرتبط را به صورت بصری با هم گروهبندی کرده و تجربه کاربر را افزایش دهد. همانطور که در شکل زیر نشان داده شده است.
![تصویری از یک منوی گروه بندی شده](https://blog.faradars.org/wp-content/uploads/2024/02/a-optgroup-menu.png)
استفاده از منوهای ناوبری مبتنی بر فرم یا همان منوهای کشویی چندین مزیت دارد. در مرحله اول، فضای صفحهنمایش را حفظ میکند و برای وبسایتهایی با صفحات یا بخشهای متعدد مناسب است. ثانیاً، با ارائه نوعی روش پیمایش و ناوبری جایگزین برای کاربرانی که ممکن است جاوا اسکریپت را غیرفعال کرده باشند یا از فناوریهای کمکی استفاده کنند، دسترسی را تضمین میکند.
توجه به این نکته مهم است که منوی ناوبری مبتنی بر فرم برای رسیدگی به ارسال فرمها و هدایت کاربران به صفحات انتخابی به برنامه نویسی سمت سرور نیاز دارد. در این رابطه جاوا اسکریپت میتواند برای بهبود تجربه ناوبری استفاده شود اما نباید به آن اعتماد کرد زیرا ممکن است همه کاربران جاوا اسکریپت را در مرورگر خود فعال نکرده باشند. علاوه بر این، با ارائه گزینههای منو در قالب فرم، از تحت قرار دادن تعداد زیادی لینک در صفحه جلوگیری میشود. این رویکرد هم میتواند هم برای تجربه کاربری و هم برای موتورهای جستجو مفید باشد.
مکان های قرار گیری منو در صفحه
یکی از نکات مهم در ساخت منو در HTML توجه به مکان قرارگیری آنها است. قرار دادن منوی HTML برای تجربه کاربری بسیار مهم است، به خصوص برای کسانی که با استفاده از صفحهکلیدها کارهای پیمایشی را انجام میدهند یا قابلیت اسکرول محدودی دارند. هنگامیکه کاربران سندی را بارگذاری میکنند، ابتدا با منو و سپس با محتوای صفحه مواجه میشوند. اگر منو در بالای سند باشد، کاربران ممکن است قبل از رسیدن به محتوای اصلی نیاز داشته باشند به وسیله لینکهای مخصوص به بخشهای مختلف سایت بروند که این قابلیت ممکن است خستهکننده باشد.
برای رفع این مشکل دو راهحل وجود دارد. در ابتدا، میتوان منو را بعد از محتوای اصلی در منبع HTML قرار داد و این در حالی اتفاق میافتد که همچنان آن را با استفاده از CSS در بالای صفحه میتوانیم قرار بدهیم. از طرف دیگر، میتوان نوعی «لینک پرش» (Skip Link( را قبل از منوی اصلی پیادهسازی کرد. لینکهای پرش، لینکهای سادهای هستند که به کاربران اجازه میدهند منو را دور بزنند و مستقیماً به محتوا بروند. بهعلاوه، میتوانید پیوندهایی با انکر تکست بازگشت به منو را در انتهای سند اضافه کارد تا بازگشت آسان به منو را تسهیل کنید.
رد شدن و نادیده گرفتن پیوندها نهتنها به نفع کاربران معلول است، بلکه ناوبری را برای کسانی که در دستگاههای تلفن همراه با صفحهنمایش کوچک به سایت دسترسی دارند، بهبود میبخشد. با پیادهسازی این ویژگیها میتوان دسترسی و قابلیت استفاده وبسایت خود را برای همه کاربران افزایش داد.
ساخت منو در HTML
برای شروع آموزش ساخت منو در HTML لازم است که یک پوشه جدید در داخل دسکتاپ خود باز کرده و چندین فایل را با ساختاری مانند تصویر زیر برای صفحات خود بسازیم. در پوشه پروژه، متوجه خواهید شد که چهار صفحه در این برنامه گنجانده شده است. هدف اصلی ما این است که کاربران را قادر بسازیم بین این صفحات با استفاده از منوی پیمایشی که به تمام صفحات وب اضافه میشود، حرکت کنند. در نتیجه، ساختار کد اکثراً برای هر چهار صفحه یکسان خواهد بود.
![تصویری از ساختار پوشه یک پروژه برای ساخت منو در HTML](https://blog.faradars.org/wp-content/uploads/2024/02/html-menu.png)
حال در این بخش قطعه کدهای همه فایل های بالا را مورد بررسی قرار خواهیم داد تا با روند ساخت منو آشنا شده و آن را در نهایت اجرا کنیم.
کدهای فایل index.html
فایل index.htmlبه عنوان صفحه اصلی وبسایت ساده ما عمل میکند که قطعه کد آن به صورت زیر است:
1<!DOCTYPE html>
2
3<html lang="en">
4
5 <head>
6
7 <meta charset="UTF-8" />
8
9 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10
11 <link
12
13 href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
14
15 rel="stylesheet"
16
17 />
18
19 <link rel="stylesheet" href="style.css" />
20
21 <title>Home</title>
22
23 </head>
24
25 <body>
26
27 <nav>
28
29 <div class="heading">
30
31 <h4 dir="rtl">ساخت منوی ناوبری - مجله فرادرس</h4>
32
33 </div dir="rtl">
34 <ul class="nav-links">
35
36 <li><a class="active" href="index.html">صفحه اصلی</a></li>
37
38 <li><a href="pages/about.html">درباره ما</a></li>
39
40 <li><a href="pages/services.html">خدمات</a></li>
41
42 <li><a href="pages/contact.html">ارتباط با ما</a></li>
43
44 </ul>
45
46 </nav>
47
48 <div class="body-text"><h1 dir="rtl" >این صفحه اصلی وبسایت ما است</h1></div>
49
50 </body>
51
52</html>
- اعلان !DOCTYPE htmlنوع سند و نسخه HTML مورد استفاده را مشخص میکند.
- در داخل تگ html، تگ headوجود دارد. این بخش برای ارائه اطلاعات متا در مورد سند و وارد کردن فایلهای اضافی موردنیاز برای برنامه وب استفاده میشود.
- همچنین فایل CSS و یک فونت گوگل را با استفاده از تگ linkدر بخش headوارد شده است.
- تگ titleبرای دادن عنوان به صفحه وب استفاده شده که در تب مرورگر ظاهر میشود.
- پس از بستن تگ head، تگ bodyشروع خواهد شد. هر چیزی که در صفحه وب قابلمشاهده است در این تگ تعریف میشود.
- تگ navنوعی نوار ناوبری حاوی پیوندهایی به سایر صفحات وبسایت را تعریف میکند.
- تگ divبرای اعمال سبکهای CSS به محتوای HTML اضافه میشود. به عناصری که نیاز به استایل دارند، نام کلاس اختصاص داده میشود تا آنها را با سبکهای خاص CSS مرتبط کند.
- تگ h4برای ایجاد یک عنوان برای نوار ناوبری استفاده خواهد شد.
- تگ ulنوعی لیست نامرتب را تعریف میکند.
- تگهای liدر تگ ulموارد لیست را به لیست نامرتب اضافه میکنند.
- تگ aپیوندهایی ایجاد میکند و به کاربران امکان میدهد با کلیک بر روی پیوندها بین صفحات حرکت کنند.
- در نهایت، تگ h1برای افزودن متن در اندازه بزرگ استفاده میشود که درون تگ divقرار میگیرد تا آن را در مرکز صفحه وب قرار دهد.
خروجی اولیه صفحه اصلی وبسایت ساده ما به صورت زیر است:
![صفحه اصلی یک وبسایت ساده ساخته شده با HTML](https://blog.faradars.org/wp-content/uploads/2024/02/html-menu1-1024x581.png)
قطعه کد بالا همه کد موردنیاز برای صفحه اصلی است. همانطور که به این آموزش ساخت منو در HTML ادامه میدهیم، سه صفحه دیگر برای نشان دادن منوی پیمایشی در HTML ایجاد خواهیم کرد.
کدهای فایل about.html
صفحه دوم وبسایت ما، about.htmlبوده که قطعه کد آن به صورت زیر است.
1<!DOCTYPE html>
2
3<html lang="en">
4
5 <head>
6
7 <meta charset="UTF-8" />
8
9 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10
11 <link
12
13 href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
14
15 rel="stylesheet"
16
17 />
18
19 <link rel="stylesheet" href="../style.css" />
20
21 <title>About</title>
22
23 </head>
24
25 <body>
26
27 <nav>
28
29 <div class="heading">
30
31 <h4 dir="rtl">ساخت منوی ناوبری - مجله فرادرس</h4>
32
33 </div>
34
35 <ul class="nav-links">
36
37 <li><a href="../index.html">صفحه اصلی</a></li>
38
39 <li><a class="active" href="about.html">در باره ما</a></li>
40
41 <li><a href="services.html">خدمات</a></li>
42
43 <li><a href="contact.html">ارتباط با ما</a></li>
44
45 </ul>
46
47 </nav>
48
49 <div class="body-text"><h1> پلتفرم آموزشی فرادرس </h1></div>
50<p dir="rtl">گامهای نخست راه اندازی پروژه فرادرس، در سال ۱۳۸۷ با ارائه آموزش های مرتبط با هوش مصنوعی و برنامه نویسی برداشته شد. فرادرس، پس از مدت کوتاهی، در زمستان ۱۳۹۰، توانست عنوان بهترین پروژه آنلاین آموزشی ایران به انتخاب کاربران را در چهارمین جشنواره وب ایران کسب کرده و در ادامه به صورت گام به گام، مسیر تبدیل شدن به بزرگترین پلتفرم دروس دانشگاهی کشور را طی کرد.</p>
51 </body>
52
53</html>
بیایید کد بالا را که کاملاً شبیه به صفحه اول است با چند تفاوت بررسی کنیم:
- در کد بالا کار را با اعلان !DOCTYPE htmlشروع کرده و نوع سند را مشخص میکنیم.
- در تگ html، ویژگی زبان را برای انگلیسی روی enقرار خواهد گرفت و برای فارسی رویfa.
- بخش headشامل متادیتا یا ابردادههایی مانند تنظیمات charsetو viewportو همچنین پیوندهایی برای وارد کردن شیوهنامه CSS و فونت Google است، درست مانند صفحه اول.
- عنوان صفحه وب را در تگ headبه aboutبهروز میکنیم.
- در بخش nav، ساختار نوار پیمایش با افزودن کلاس activeبه آیتم فهرست دوم حفظ شده که صفحه فعلی را نشان میدهد.
- پیوندها hrefطوری تنظیم خواهند شد که به صفحات مناسب در پوشه پروژه اشاره کنند.
- تگ h1برای نمایش پیامی به کاربر که در صفحه در باره ما قرار دارد بهروز میشود.
خروجی کدهای فایل about.htmlبه صورت زیر است:
![تصویری از یک صفحه وب ساده ساخته شده با HTML که دارای منوی ناوبری است](https://blog.faradars.org/wp-content/uploads/2024/02/simple-html-menu-1024x564.png)
ساختار کد تا حد زیادی مانند صفحه اصلی است اما ما تنظیمات لازم را برای منعکس کردن محتوا و پیمایش صفحه about.htmlانجام دادهایم.
کدهای فایل services.html در ساخت منو در HTML
صفحه سوم وبسایت ما، services.htmlبوده که قطعه کد آن به صورت زیر است:
1<!DOCTYPE html>
2
3<html lang="fa">
4
5 <head>
6
7 <meta charset="UTF-8" />
8
9 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10
11 <link
12
13 href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
14
15 rel="stylesheet"
16
17 />
18
19 <link rel="stylesheet" href="../style.css" />
20
21 <title>Services</title>
22
23 </head>
24
25 <body>
26
27 <nav>
28
29 <div class="heading">
30
31 <h4 dir="rtl">ساخت منوی ناوبری - مجله فرادرس</h4>
32
33 </div>
34
35 <ul class="nav-links">
36
37 <li><a href="../index.html">صفحه اصلی</a></li>
38
39 <li><a href="about.html">در باره ما</a></li>
40
41 <li><a class="active" href="services.html">خدمات</a></li>
42
43 <li><a href="contact.html">ارتباط با ما</a></li>
44
45 </ul>
46
47 </nav>
48
49 <div class="body-text"><h1>خدمات فرادرس به صورت زیر است</h1></div>
50 <ul dir="rtl">
51
52 <li>آموزش برنامه نویسی</li>
53
54 <li>آموزش هوش مصنوعی</li>
55
56 <li>آموزش کسب و کار</li>
57
58 <li>آموزش توسعه فردی</li>
59
60 </ul>
61 </body>
62
63</html>
این صفحه نیز بسیار شبیه به صفحات قبلی ما بوده اما چند تفاوت جزئی دارد که در زیر بررسی شدهاند.
- دوباره کار با اعلان !DOCTYPE htmlشروع شده و نوع سند را مشخص میکنیم.
- در تگ html، ویژگی زبان را برای فارسی روی faقرار میدهیم.
- بخش headشامل ابردادههایی مانند تنظیمات charsetو viewport، به همراه پیوندهایی برای وارد کردن شیوهنامه CSS و فونت Google است. همانطور که در صفحات قبل نیز مشاهده شد.
- عنوان صفحه وب را در تگ titleبه Services بهروز میکنیم.
- در بخشnav، ساختار نوار ناوبری با افزودن کلاس activeبه آیتم فهرست سوم، که صفحه فعلی را نشان میدهد، ثابت میماند.
- پیوندهای Hrefبرای پیمایش به صفحات مناسب در فهرست پروژه تنظیم میشوند.
- تگ h1برای نمایش پیامی به کاربر است تا بفهمد که در کدام صفحه قرار دارد.
خروجی کدهای بالا به صورت زیر است:
![تصویری از یک صفحه وب ساده که ب استفاده از اچ تی ام ال ساخته شده است.](https://blog.faradars.org/wp-content/uploads/2024/02/html-menu4-1024x511.png)
ساختار کد مشابه صفحات قبلی است و با این حال ما ترفندهای لازم را برای منعکس کردن محتوا و پیمایش صفحه services.htmlرا انجام دادهایم.
کدهای فایل contact.html
صفحه چهارم و آخرین صفحه وبسایت ما در ساخت منو در HTML، contact.htmlبوده که قطعه کد HTML آن به صورت زیر است.
1<!DOCTYPE html>
2
3<html lang="fa">
4
5 <head>
6
7 <meta charset="UTF-8" />
8
9 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10
11 <link
12
13 href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
14
15 rel="stylesheet"
16
17 />
18
19 <link rel="stylesheet" href="../style.css" />
20
21 <title>contact</title>
22
23 </head>
24
25 <body>
26
27 <nav>
28
29 <div class="heading">
30
31 <h4 dir="rtl">ساخت منوی ناوبری - مجله فرادرس</h4>
32
33 </div>
34
35 <ul class="nav-links">
36
37 <li><a href="../index.html">صفحه اصلی</a></li>
38
39 <li><a href="about.html">در باره ما</a></li>
40
41 <li><a class="active" href="services.html">خدمات</a></li>
42
43 <li><a href="contact.html">ارتباط با ما</a></li>
44
45 </ul>
46
47 </nav>
48
49 <div class="body-text"><h1>راههای ارتباطی ما</h1></div>
50
51 </body>
52
53</html>
توضیحات کدهای بالا به صورت زیر است:
- دوباره کار با اعلان !DOCTYPE htmlشروع شده و نوع سند را مشخص میکنیم.
- در تگ html، ویژگی زبان را برای فارسی روی fa قرار خواهند گرفت.
- بخش headشامل ابردادههایی مانند تنظیمات charsetو viewport، به همراه پیوندهایی برای وارد کردن شیوهنامه CSS و فونت Google است. این را در صفحات بالا هم داشتیم.
- عنوان صفحه وب در تگ titleبه Contactبهروز میشود.
- در بخش nav، ساختار نوار ناوبری با افزودن کلاس activeبه چهارمین مورد لیست، که صفحه فعلی را نشان میدهد، ثابت میماند.
- پیوندهای Hrefبرای پیمایش به صفحات مناسب در فهرست پروژه تنظیم میشوند.
- تگ h1برای نمایش پیامی بهروز میشود که نشان میدهد کاربر در صفحه ارتباط با ما قرار گرفته است.
استایل بندی منوی HTML ساخته شده
در این بخش از آموزش ساخت منو در HTML، به بررسی فایل شیوه نامه مربوطه خواهیم پرداخت که قطعه کد آن به صورت زیر است:
1* {
2
3 margin: 0px;
4
5 padding: 0px;
6
7 box-sizing: border-box;
8
9}
10
11.body-text {
12
13 display: flex;
14
15 font-family: "Montserrat", IRANSans;
16
17 align-items: center;
18
19 justify-content: center;
20
21 margin-top: 250px;
22
23}
24
25nav {
26
27 display: flex;
28
29 justify-content: space-around;
30
31 align-items: center;
32
33 min-height: 8vh;
34
35 background-color: teal;
36
37 font-family: "Montserrat", IRANSans;
38
39}
40
41.heading {
42
43 color: white;
44
45 text-transform: uppercase;
46
47 letter-spacing: 0px;
48
49 font-size: 20px;
50
51}
52
53.nav-links {
54
55 display: flex;
56
57 justify-content: space-around;
58
59 width: 30%;
60
61}
62
63.nav-links li {
64
65 list-style: none;
66
67}
68
69.nav-links a {
70
71 color: white;
72
73 text-decoration: none;
74
75 letter-spacing: 0px;
76
77 font-weight: bold;
78
79 font-size: 14px;
80
81 padding: 14px 16px;
82
83}
84
85.nav-links a:hover:not(.active) {
86
87 background-color: lightseagreen;
88
89}
90
91.nav-links li a.active {
92
93 background-color: #4caf50;
94
95}
96p
97 {
98 font-family: "Montserrat", IRANSans;
99 align-items: center;
100 justify-content: center;
101}
102
103ul
104{
105 font-family: "Montserrat", IRANSans;
106 align-items: center;
107 justify-content: center;
108
109}
کد فوق شیوهنامه style.cssاست که ما برای بهبود ظاهر وبسایت خود استفاده کردیم که توضیحات آن به صورت زیر است:
- انتخابگر *سبکهای مشخصشده را برای همه عناصر صفحه وب اعمال میکند. در کد فوق، حاشیه و paddingرا روی صفر پیکسل بازنشانی کرده و ویژگی box-sizingرا روی border-box تنظیم میکنیم تا از اندازه مناسب عناصر اطمینان حاصل کنیم.
- کلاس .body-textعناصر را در بدنه صفحه وب سبکدهی میکند. در اینجا از «فلکس باکس» (Flexbox) برای متمرکز کردن محتوا به صورت عمودی و افقی، همراه با مشخص کردن خانواده فونت و حاشیه استفاده شده است.
- سبکهای نوار پیمایش، که بهوسیله کلاس navتعریف شدهاند، شامل تنظیم آن بهعنوان نوعی کانتینر فلکس با فاصلههای مساوی، رنگ پسزمینه سبز و خانواده فونت مشخص است.
- کلاس .headingعنوان را در نوار پیمایش سبکدهی میکند و رنگ، تغییر متن، فاصله حروف و اندازه فونت را تنظیم خواهد کرد.
- کلاس .nav-linksلیست پیوندهای منو را سبکدهی کرده و آنها را به طور مساوی مرتب میکند.
- سبکهای پیوندهای پیمایش، که بهوسیله پیوندهای navتعریف میشوند، شامل تنظیم رنگ، تزئین متن، فاصله حروف، وزن فونت، اندازه قلم و غیره هستند.
- هنگامی که ماوس روی لینک منو قرار میگیرد، رنگ پسزمینه به سبز روشن تغییر میکند.
- پیوند منوی فعال که با انتخابگر .nav-links li a.activeمشخص میشود، دارای رنگ پسزمینه خاصی برای نشان دادن صفحه فعلی است.
سبکهای CSS بالا با استفاده از نام کلاسها برای هدف قرار دادن عناصر HTML و تعریف ظاهر آنها اعمال میشوند. این سبکها را میتوان با توجه به ترجیحات و نیازهای طراحی سفارشی کرد.
خروجی نهایی ساخت منو در HTML
در تصویر زیر خروجی مورد انتظار ساخت منو در HTML، با ویژگیهای پیمایشی پیادهسازی شده با موفقیت عمل میکند.
![تصویر متحرکی از یک وبسایت ساده ساخته شده در جاوا اسکریپت که یک منوی ناوبری ساده دارد](https://blog.faradars.org/wp-content/uploads/2024/02/menu-in-html5.gif)
میتوان ظاهر برنامههای وب خود را با استفاده از شیوهنامههای CSS بهبود بخشید و ویژگیهای تعاملی را با استفاده از جاوا اسکریپت به آن اضافه کرد. برای توسعه یک وبسایت جامع، داشتن درک اولیه از هر سه زبان HTML ،CSS و JavaScript بسیار مهم است.
ساخت منوی کشویی در HTML
در این بخش از آموزش ساخت منو در HTML به پیادهسازی نوعی منوی کشویی خواهیم پرداخت. در HTML میتوان با استفاده از روشهای مختلف منوی کشویی در صفحه وب ایجاد کرد.
دو رویکرد رایج به صورت موارد زیر هستند:
- استفاده از فرمهای HTML: میتوان نوعی منوی کشویی را با ترکیب عناصر فرم HTML در سند پیادهسازی کرد.
- استفاده از CSS داخلی: روش دیگر شامل استفاده از CSS داخلی برای استایل و قالببندی منوی کشویی در سند HTML است.
هر دو تکنیک راههای سادهای را برای افزودن منوهای کشویی به صفحات وب ارائه میدهند و گزینههای ناوبری بصری را در اختیار کاربران قرار خواهند داد.
استفاده از فرم ها
برای ایجاد یک منوی کشویی با استفاده از فرم HTML، مراحل زیر را باید دنبال کنیم. ابتدا باید سند HTML خود را در ویرایشگر متن باز کرده و کد زیر را در آن قرار دهیم:
1<!DOCTYPE html>
2<html>
3<head>
4<title>Make a Drop Down Menu using HTML Form</title>
5</head>
6<body>
7این صفحه برای نشان دادن نحوه ساخت منوی کشویی است
8</body>
9</html>
تشریح کد بالا به صورت زیر است:
- اعلان !DOCTYPE htmlنوع سند و نسخه HTML مورداستفاده را مشخص میکند.
- عنصر htmlریشه سند HTML را تعریف میکند.
- بخش headحاوی اطلاعات متا در مورد سند، از جمله عنوان نمایش داده شده در برگه مرورگر است.
- عنصر titleعنوان صفحه وب را تعیین میکند.
- بخش bodyحاوی محتوای قابل مشاهده صفحه وب، از جمله متن و سایر عناصر است.
کد بالا ساختار اصلی HTML سند را تنظیم میکند که در آن میتوان عناصر فرم را برای ایجاد منوی کشویی اضافه کرد.
در مرحله بعد، ما باید مکاننما را در تگ bodyدر جایی قرار دهیم که میخواهیم منوی کشویی در آن ظاهر شود. سپس، تگ formرا در آن مکان در سند HTML درج کنیم. این تگ به عنوان کانتینری برای عناصر منوی کشویی ما عمل میکند. قطعه کد انجام این کار به صورت زیر است:
1<Body>
2این صفحه برای نشان دادن نحوه ساخت منوی کشویی است
3<form>
4
5
6</form>
7</Body>
در کد فوق، تگ formابتدای بخش فرم را نشان میدهد، جایی که عناصر را برای ایجاد منوی کشویی اضافه میکنیم.
در این مرحله از آموزش ساخت منو در HTML پس از تنظیم تگ form، با تعریف اجزای منوی کشویی در آن کار را میدهیم. این کار شامل استفاده از تگ labelبرای ارائه نوعی برچسب توصیفی برای منوی کشویی است که نشاندهنده چیزی خواهد بود که نشان میدهد. سپس، تگ selectرا ایجاد خواهیم کرد که شروع خود منوی کشویی را مشخص میکند. قطعه کد انجام این کار به صورت زیر است:
1<form>
2<label> انتخاب دوره آموزشی </label>
3<select>
4
5</select>
6</form>
در قطعه کد بالا، تگ labelنوعی برچسب «انتخاب دوره آموزشی» برای منوی کشویی ایجاد میکند درحالیکه تگ selectساختار منوی کشویی را آغاز خواهد کرد. در مرحله بعد گزینههایی را به منوی کشویی اضافه میکنیم.
پس از تنظیم ساختار کشویی، به تعریف گزینههای موجود در منوی کشویی خواهیم پرداخت. این کار با استفاده از تگ option در تگselectانجام میشود. هر تگ optionگزینه یا انتخاب خاصی را نشان میدهد که کاربران میتوانند از منوی کشویی انتخاب کنند. در اینجا قطعه کد با گزینههایی برای انتخاب دورههای آموزشی آمده است:
1<form>
2<label> انتخاب دوره آموزشی </label>
3<select>
4<option value="js">جاوا اسکریپت</option>
5<option value="python">پایتون</option>
6<option value="java">جاوا</option>
7<option value="base-programming">مبانی برنامه نویسی</option>
8</select>
9</form>
در کد فوق، هر تگ optionشامل نوعی ویژگی valueاست که مقدار مرتبط با گزینه را مشخص میکند. این مقدار همان چیزی است که هنگام ارسال فرم به سرور ارسال میشود. همچنین متن محصور شده در برچسبهای optionهمان چیزی هستند که کاربران در منوی کشویی میبینند.
در نهایت و در این مرحله از ساخت منویی کشویی با HTML پس از تنظیم منوی کشویی، فایل HTML باید ذخیره شود و سپس فایل را میتوان در یک مرورگر وب اجرا کرد تا منوی کشویی قابل مشاهده باشد. قطعه کد اصلی این کار با انجام کار راست چیست در HTML به صورت زیر است:
1<!DOCTYPE html>
2<html dir="rtl" lang="fa">
3<head>
4<title>ساخت یک منو کشویی با استفاده از فرم HTML</title>
5</head>
6<body>
7این صفحه برای نشان دادن نحوه ساخت منوی کشویی است. لطفا دوره آموزشی خود را انتخاب کنید.
8<form>
9<label>انتخاب دوره آموزشی</label>
10<select>
11<option value="js">جاوا اسکریپت</option>
12<option value="python">پایتون</option>
13<option value="java">جاوا</option>
14<option value="base-programming">مبانی برنامه نویسی</option>
15</select>
16</form>
17</body>
18</html>
کد فوق حاوی نوعی منوی کشویی با عنوان «انتخاب دوره آموزشی» را با گزینههایی برای انتخاب از بین دورههای مختلف آموزش زبانهای برنامه نویسی میدهد. کاربران میتوانند دوره مدنظر خود را از منوی کشویی انتخاب کنند. خروجی نهایی کدهای فوق به صورت زیر است:
![تصویری برای نمایش یک منوی کشویی ساخته شده با HTML](https://blog.faradars.org/wp-content/uploads/2024/02/html-menubar.gif)
ساخت منو در HTML با استفاده از CSS داخلی
برای ایجاد یک منوی کشویی با استفاده از شیوهنامه داخلی (CSS) در سند HTML مراحل ادامه این بخش را باید دنبال کنیم.
مرحله ۱. ایجاد فایل HTML
در مرحله اول باید فایل HTML خود را در ویرایشگر متن بازکرده و کدهای ساختار اصلی منو را در آن قرار دهیم. در این بخش از همان ساختار اولین بالا استفاده خواهیم کرد.
مرحله ۲. ایجاد تگ style
حال در بخش headسند HTML، درست بعد از بستن تگ /title، نوعی تگ styleباید تعریف کنیم تا سبکهای CSS داخلی برای منوی کشویی تعریف شوند. در داخل تگ style، کلاسی به نام dropbtnبا ویژگیهای مختلف تعریف خواهند شد که به دکمه کشویی استایل میدهند. این ویژگیها شامل رنگ پسزمینه، رنگ متن، paddingو اندازه فونت است. در اینجا قطعه کد CSS برای تعریف کلاس dropbtnآمده است:
1<style>
2.dropbtn {
3 background-color: yellow;
4 color: black;
5 padding: 10px;
6 font-size: 12px;
7 font-family: 'Iransans', sans-serif;
8}
9</style>
در قطعه کد بالا، کلاس dropbtnبه رنگ پسزمینه زرد، رنگ متن سیاه، ۱۰ پیکسل paddingو اندازه فونت ۱۲ پیکسل استایل داده شده است. این کلاس به عنصر دکمه کشویی در کد HTML اعمال میشود تا بر اساس آن استایل دهی شود. کد CSS داخلی بالا در منوی کشویی در سند HTML اعمال خواهد شد و اطمینان حاصل میکند که سبکهای مشخص شده بدون نیاز به فایل CSS خارجی استفاده میشوند.
مرحله ۳. ایجاد کلاس dropdown
در مرحله بعد، باید کلاس دیگری به نام .dropdownتعریف کنیم که وظیفه نمایش کلی و موقعیت منوی کشویی را بر عهده خواهد داشت. این کلاس اطمینان حاصل میکند که منوی کشویی به صورت هم راستا با سایر عناصر در صفحه ظاهر میشود. در زیر قطعه کد CSS برای تعریف کلاس .dropdownآمده است:
1.dropdown {
2 display: inline-block;
3 position: relative
4}
در قطعه کد بالا، کلاس .dropdownبهگونهای طراحی شده است که صفحهنمایش inline-blockداشته باشد، به این معنی که با سایر عناصر به صورت افقی جریان مییابد و موقعیت relativeیا نسبی که به ما امکان میدهد منوی کشویی را نسبت به آن قرار دهیم. این کلاس در اصل به کانتینر عناصر منوی کشویی در کد HTML اعمال میشود تا نمایش و موقعیت آن را کنترل کند.
مرحله ۴. ایجاد کلاس dropdown-content
در مرحله بعد، کلاس دیگری به نام .dropdown-contentتعریف میکنیم که ظاهر و رفتار خود منوی کشویی را تعیین میکند. این کلاس شامل چندین ویژگی است که موقعیت، اندازه، دید و استایل منوی کشویی را کنترل خواهد کرد. در اینجا قطعه کد CSS برای تعریف کلاس .dropdown-contentآمده است:
1.dropdown-content {
2 position: absolute;
3 background-color: lightgrey;
4 min-width: 200px;
5 display: none;
6 z-index: 1;
7}
در کد فوق، کلاس .dropdown-contentبا position: absoluteاستایل داده شده است که منوی کشویی را کاملاً نسبت به نزدیکترین جد خود با اعمال قانون ackground-color: lightgreyقرار میدهد که رنگ پسزمینه فهرست کشویی را تعیین میکند. قانون min-width: 200pxتضمین میکند منوی کشویی حداقل ۲۰۰ پیکسل عرض دارد و به دنبال آن display: noneدر ابتدا منوی کشویی را از دید پنهان میکند. همچنین z-index: 1، ترتیب انباشتن یا قرارگیری منوی کشویی را کنترل کرده و اطمینان حاصل میکند که بالای سایر عناصر صفحه ظاهر میشود. این کلاس به آیتمهای منوی کشویی واقعی در کد HTML اعمال میشود تا ظاهر و رفتار آنها را مشخص کند.
مرحله ۵. ایجاد کلاس dropdown-content a
در این مرحله از ساخت منو در HTML، کلاس جدید با نام .dropdown-content aایجاد میکنیم تا ظاهر متن را در منوی کشویی مشخص کند. این کلاس ویژگیهایی مانند رنگ، padding، سبک متن و سبک نمایش را برای پیوندهای موجود در آیتمهای منوی کشویی تعیین میکند.
1.dropdown-content a {
2 color: black;
3 padding: 12px 16px;
4 text-decoration: none;
5 display: block;
6}
تنظیم color: black، رنگ متن را سیاه کرده و padding: 12px 16pxفضایی در اطراف متن اضافه میکند. همچنین به دنبال آن Text-decoration: noneآندرلاینها را از پیوندها حذف میکند و display: blockباعث میشود پیوندها بهعنوان عناصر سطح بلوک ظاهر شوند و باعث میشود که به صورت عمودی در منوی کشویی قرار بگیرند.
مرحله ۶. تنظیم رفتارهای شناور عناصر منو
در نهایت برای ساخت منو، رفتار شناور آیتمهای منوی کشویی را باید تعریف میکنیم. با افزودن این سبکها در تگ style، میتوان نحوه نمایش آیتمهای منو را در هنگام نگهداشتن ماوس روی آن مشخص کرد. اولین قانون .dropdown-content a:hoverرنگ پسزمینه آیتمهای منو را هنگامیکه ماوس را روی آن قرار میدهید، مشخص میکند و آنها را به رنگ نارنجی نشان میدهد.
1.dropdown-content a:hover {
2 background-color: orange;
3}
4.dropdown:hover .dropdown-content {
5 display: block;
6}
7.dropdown:hover .dropbtn {
8 background-color: grey;
9}
قانون دوم .dropdown-content a:hoverتضمین میکند که وقتی ماوس روی منوی کشویی قرار میگیرد، محتوای کرکرهای با تنظیم ویژگی نمایش آن برای مسدود کردن قابلمشاهده میشود. این به کاربران اجازه میدهد تا آیتمهای منو را ببینند. آخرین قانون .dropdown:hover .dropbtnرنگ پسزمینه خود دکمه کشویی را با نگهداشتن ماوس روی آن به خاکستری تغییر میدهد و بازخورد بصری را به کاربر ارائه خواهد داد. این سبکها تعامل و تجربه کاربری منوی کشویی را افزایش میدهند.
مرحله ۷. تنظیم رفتارهای شناور عناصر منو
در مرحله بعد، منوی کشویی را در بدنه سند HTML وارد میکنیم. با قرار دادن مکاننما در جایی که میخواهیم منوی کشویی ظاهر شود، قطعه کد زیر را اضافه میکنیم.
1<div class="dropdown">
2<button class="dropbtn"> دورههای آموزش فرادرس</button>
3<div class="dropdown-content">
4<a href="https://faradars.org/how-to-learn/python-programming"> پایتون</a>
5<a href="https://faradars.org/how-to-learn/java-programming"> جاوا </a>
6<a href="https://faradars.org/how-to-learn/javascript"> جاوا اسکریپت </a>
7</div>
8</div>
کد فوق نوعی منوی کشویی با دکمهای با عنوان «دورههای آموزش فرادرس» ایجاد میکند. پس از کلیک روی دکمه، فهرستی از پیوندهای آموزشی در کانتینری با کلاس dropdown-contentرا نشان میدهد. هر پیوند به یک صفحه آموزشی خاص در وبسایت فرادرس، از جمله آموزشهای پایتون، جاوا و جاوا اسکریپت هدایت میشود. با استفاده از این کد، به راحتی میتوان منوی کشویی را در صفحه وب خود قرار داد و دسترسی سریع به آموزشهای مختلف را برای کاربران فراهم کرد.
قدم نهایی ساخت منو در HTML با کلاس های CSS
در نهایت قطعه کد کلی ساخت منوی کشویی در HTML به صورت زیر است که ما عمل راست چین کردن در HTML را نیز برای آن انجام دادهایم:
1<!DOCTYPE html>
2<html dir="rtl">
3<head>
4<title>Make a Dropdown Menu using Internal CSS</title>
5<style>
6body, .dropdown-content a {
7 font-family: IRANSanse, sans-serif; /* Change font for the whole page and dropdown content */
8}
9
10.dropbtn {
11 background-color: yellow;
12 color: black;
13 padding: 10px;
14 font-size: 12px;
15 font-family: 'Iransans', sans-serif;
16
17}
18
19.dropdown {
20 display: inline-block;
21 position: relative
22}
23
24.dropdown-content {
25 position: absolute;
26 background-color: lightgrey;
27 min-width: 200px;
28 display: none;
29 z-index: 1;
30 font-family: 'Iransans', sans-serif;
31
32}
33
34/* Adjusting for RTL */
35.dropdown-content {
36 right: 0; /* Position the dropdown to the right */
37}
38
39.dropdown-content a {
40 color: black;
41 padding: 12px 16px;
42 text-decoration: none;
43 display: block;
44 text-align: right; /* Align the text to the right */
45}
46
47.dropdown-content a:hover {
48 background-color: orange;
49}
50
51.dropdown:hover .dropdown-content {
52 display: block;
53}
54
55.dropdown:hover .dropbtn {
56 background-color: grey;
57}
58</style>
59</head>
60<body>
61 <p> این یک صفحه تستی برای نشان دادن ساخت منوهای کشویی است. </p>
62<div class="dropdown">
63<button class="dropbtn"> دورههای آموزش فرادرس</button>
64<div class="dropdown-content">
65<a href="https://faradars.org/how-to-learn/python-programming"> پایتون</a>
66<a href="https://faradars.org/how-to-learn/java-programming"> جاوا </a>
67<a href="https://faradars.org/how-to-learn/javascript"> جاوا اسکریپت </a>
68</div>
69</div>
70</body>
71</html>
خروجی نهایی کدهای فوق به صورت زیر است:
![تصویری از یک منوی کشویی ساخته شده با استفاده از HTML](https://blog.faradars.org/wp-content/uploads/2024/02/menu-33.gif)
سخن پایانی
منوهای وبسایت یکی از مهمترین عناصر پیمایشی و ناوبری هستند که کاربران با استفاده از آنها قادر خواهند بود که وبسایت را به آسانی زیرورو کرده و بخشهای مختلف آن را ببینند. با استفاده از HTML میتوان منوهای بسیار جذاب و کاربردی را در وبسایتها پیادهسازی کرد و با استفاده از آن تجربه کاربری را بهبود بخشید. اگر چه با استفاده از HTML خالی میتوان منوهای کاربردی ساخت اما برای شکیلتر کردن و همچنین عملگرا کردن منو بهتر است که منوهای ما با استفاده از HTML ،CSS و جاوا اسکریپت ساخته شوند.
در مطلب فوق از مجله فرادرس نحوه ساخت منو در HTML به صورت کاملا عملی مورد بررسی قرار گرفت. در این مطلب ابتدا مقدمات و رسالت منوها را در دنیای طراحی سایت بیان کرده و انواع آنها را مورد بررسی قرار دادیم و به دنبال آن دو نوع منوی جذاب و کاربردی به صورت قدم به قدم پیاده سازی کردیم. منوهای فوق را میتوان شخصیسازی کرده و از آنها در پروژههای طراحی خود استفاده کرد.
سلام. واقعا کیف کردم با این مطلب. خودش یه دوره آموزشی بود. دست شما درد نکنه جناب بهرامی.