نوار منو در html یا سیستم ناوبری با یک رابط کاربری گرافیکی به بازدیدکنندگان در دسترسی به اطلاعات کمک می کند. این عنصر رابط کاربری یک صفحه وب است که شامل پیوندهایی به بخش های دیگر وب سایت است.
نوار منو در html بیشتر در بالای صفحه به صورت لیستی (افقی در رایانه وعمودی در گوشی) از پیوندها نمایش داده می شود. می توان آن را زیر لوگو یا هدر قرار داد، اما همیشه باید قبل از محتوای اصلی صفحه وب قرار گیرد.
برای یک وب سایت مهم است که ناوبری آسان برای استفاده داشته باشد. نوار منو در html نقش مهمی در وب سایت ایفا می کند زیرا به بازدیدکنندگان اجازه می دهد تا به سرعت از هر بخش بازدید کنند.
بیایید در مورد نوار ناوبری افقی و نوار ناوبری عمودی به تفصیل بحث کنیم.
ساخت انواع منو در html
ساخت منو کشویی در html
جهت ساخت منو کشوی لطفا کد های زیر را در هدر قالبی که در جلسات قبل آماده کرده ایم کپی کنید
سورس منو html
لطفا فایل css اکسترنال را از لینک زیر کپی کرده ودر css اکسترنال خود کپی کنید
شما باید در این مرحله خروجی زیر را داشته باشد
خاصیت display در css
جهت نحوه نمایش یک تگ در css از خاصیت display استفاده می شود که ما خط زیر را به css مان اضافه می کنیم جهت عدم نمایش زیر منو ها
حال نوبت به این مرحله می رسد که تگ های li در نوار منو را در یک خط افقی نمایش دهیم
خاصیت list-style-type در CSS
برای مشخص کردن شکل کنار لیست های نا مرتب از این خاصیت استفاده می شود.که ما جهت عدم نمایش شکل گرافیکی کنار لیست آن را برابر NONE قرار می دهیم
خاصیت padding در css
اگر بخواهیم از فاصله داخلی در یک تگ استفاده کنیم از خاصیت padding استفاده می کنیم.
دراین مرحله برای فاصله دادن به گزینه های نوار منو به گونه ای که هنگام هاور کردن روی آن گزینه خاصیت فکوس ازدست نرود ما از فاصله داخلی یا همان padding استفاده می کنیم.
خروجی باید به صورت زیر باشد
css مربوط به نوارمنوی افقی
ساخت منو عمودی در html
جهت ساخت منو عمودی در html ابتدا باید بدانیم منو عمودی بیشتر در مدیا های کوچک مثل گوشی عمودی و گوشی افقی استفاده می شود که ما جهت تنظیمات css مربوطه در css اینترنال ابتدا مدیا را تعریف می کنیم وسپس تنظیمات را انجام می دهیم
که ما در این مرحله مدیایه مربوط به گوشی افقی را مثال زده ایم و کد css آن به صورت زیر است
اگر f12 را در مرورگر بزنیم و اندازه مرورگر را به اندازه مدیا تعریف شده تنظیم کنیم باید همچین منوی را مشاهده کنیم
نکته
اگر نوار منوی شما با این نوار منو تفاوت دارد لطفا کد های css را از صفحه آموزش ریسپانسیو کپی کرده و در css extenal خود کپی کنید.
تغییر حالت منو به پیش فرض
ابتدا با چینش گزینه های نوار منو را تغییر دهیم و آنها را به صورت عمودی یعنی حالت پیش فررض تغییر حالت دهیم
اینک نوبت به تغییر اندازه فونت،رنگ،پدینگ،پهنا و … تگ a براساس نیاز و خواست شماست

حال می خواهیم با کلیک کردن روی هر گزینه زیرمنو آن نمایش داده شود بدون اینکه منو ما به هم بریزد و نیز یک بگراند به زیرمنو بدهیم
پس از انجام تمام این تنظیمات حال باید یک دکمه یه نوشته در کدهای html اضافه کنیم و برای آن تعریف کنیم که در صورتی که این نوشته یا دکمه کلیک شد منو را نمایش دهد در غیر این صورت منو را نمایش ندهد.پس کد html منو ما به صورت زیر خواهد بود
کد های زیر را به css اضافه می کنیم و نتیجه را مشاهده می کنیم.در جلسات آتی نحوه اضافه کردن فونت ها به وب سایتمان جهت نمایش سه خط منو را خدمت شما عزیزان ارائه خواهم کرد

در این مرحله ما باید رویداد کلیک برای دکمه منو را در جاوا اسکریپ تعریف کنیم تا بتوانیم منو را نمایش دهیم.
پس ابتدا آخرین نسخه jquery را از سایت آن دانلود می کنیم و در یک پوشه به اسم java ذخیره می کنیم و کد زیر را به تگ head که قبلا یک فایل در پوشه str با همین نام به آن اختصاص داده ایم اضافه می کنیم .
آموزش نصب و استفاده از jquery در صفحات وب
1-در روت هاست یا لوکال هاست یک پوشه به نام js ایجاد می کنیم .
بعد از اینکه لینک مربوط به آخرین نسخه jquery را باز کردیم اگر دانلود منیجر داشتیم کلیک راست و فایل را دانلود می کنیم و اگر نه
2-روی صفحه کلیک کرده و ctl+a همه متن را انتخاب می کنیم
3-بعد از انتخاب ctl+c فایل jquery را کپی می کنیم
4-یک فایل javaScript ایجاد کرده و با استفاده از ctr+v فایل را پیست می کنیم و با نام jquery-3.6.1.min در پوشه js ذخیره یا آپلود می کنیم.
پس تگ head به صورت زیر تغییر خواهد کرد
در انتها کد جاوا اسکریپت مربوط به نمایش و عدم نمایش نمو را به انتهای صفحه header اضافه می کنیم
css نوار منوی عمودی
نتیجه گیری
یکی سخت ترین تنظیمات در بحث html , css قطعا تنظیمات مربوط به نوار منو چه در نوارمنی افقی و چه در نوار منوی عمودی خواهد بود پس تلاش در یادگیری آن مباحث دیگر مربوط به فرانت اند را برای شما راحت تر خواهد کرد
لینک مربوط به سورس کد جلسه 6
[…] تگ imageقدرت گرفته از افزونه نوشتههای مرتبط هوشمندادامه مطلب آموزش ساخت منو nav و زیرمنو subnavبا html و css – ج…قدرت گرفته از افزونه نوشتههای مرتبط […]