لینک آدرس ویدیو در آپارات

نوار منو در html یا سیستم ناوبری با یک رابط کاربری گرافیکی به بازدیدکنندگان در دسترسی به اطلاعات کمک می کند. این عنصر رابط کاربری یک صفحه وب است که شامل پیوندهایی به بخش های دیگر وب سایت است.

نوار منو در html بیشتر در بالای صفحه به صورت لیستی (افقی در رایانه وعمودی در گوشی) از پیوندها نمایش داده می شود. می توان آن را زیر لوگو یا هدر قرار داد، اما همیشه باید قبل از محتوای اصلی صفحه وب قرار گیرد.

برای یک وب سایت مهم است که ناوبری آسان برای استفاده داشته باشد. نوار منو در html نقش مهمی در وب سایت ایفا می کند زیرا به بازدیدکنندگان اجازه می دهد تا به سرعت از هر بخش بازدید کنند.

بیایید در مورد نوار ناوبری افقی و نوار ناوبری عمودی به تفصیل بحث کنیم.

خب برای ساخت انواع منو در html  ابتدا باید ساختار نوارمنو را مشخص کنیم و سپس به وسیله یا فرمت های css آماده مثل(bootstrap)  یا با استفاده از css  های شخصی (که ما از این روش استفاده می کنیم) رابط گرافیکی دلخواه را برای نوار منو خود ایجاد کنیم.

برای ایجاد منو در html از تگ nav استفاده می کنیم

 جهت ساخت منو کشوی لطفا کد های زیر را در هدر قالبی که در جلسات قبل آماده کرده ایم کپی کنید

لطفا فایل css اکسترنال را از لینک زیر کپی کرده ودر css  اکسترنال خود کپی کنید

لینک css اکسترنال

شما باید در این مرحله خروجی زیر را داشته باشد

خاصیت display در css

جهت نحوه نمایش یک تگ در css از خاصیت display استفاده می شود که ما خط زیر را به css مان اضافه می کنیم جهت عدم نمایش زیر منو ها

حال نوبت به این مرحله می رسد که تگ های li در نوار منو را در یک خط افقی نمایش دهیم

خاصیت list-style-type در CSS

برای مشخص کردن شکل کنار لیست های نا مرتب از این خاصیت استفاده می شود.که ما جهت عدم نمایش شکل گرافیکی کنار لیست آن را برابر NONE قرار می دهیم

خاصیت padding در css

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

دراین مرحله برای فاصله دادن به گزینه های نوار منو به گونه ای که هنگام هاور کردن روی آن گزینه خاصیت فکوس ازدست نرود ما از فاصله داخلی یا همان padding استفاده می کنیم.

خروجی باید به صورت زیر باشد

css مربوط به نوارمنوی افقی

لینک ایجاد منوی عمودی در آپارات

جهت ساخت منو عمودی در html ابتدا باید بدانیم منو عمودی بیشتر در مدیا های کوچک مثل گوشی عمودی و گوشی افقی استفاده می شود که ما جهت تنظیمات css مربوطه در css اینترنال ابتدا مدیا را تعریف می کنیم وسپس تنظیمات را انجام می دهیم

که ما در این مرحله مدیایه مربوط به گوشی افقی را مثال زده ایم و کد css آن به صورت زیر است

اگر f12 را در مرورگر بزنیم و اندازه مرورگر را به اندازه مدیا تعریف شده تنظیم کنیم باید همچین منوی را مشاهده کنیم

نکته

اگر نوار منوی شما با این نوار منو تفاوت دارد لطفا کد های css را از صفحه آموزش ریسپانسیو کپی کرده و در css extenal خود کپی کنید.

تغییر حالت منو به پیش فرض

ابتدا با چینش گزینه های نوار منو را تغییر دهیم و آنها را به صورت عمودی یعنی حالت پیش فررض تغییر حالت دهیم 

اینک نوبت به تغییر اندازه فونت،رنگ،پدینگ،پهنا و … تگ a  براساس نیاز و خواست شماست

حال می خواهیم با کلیک کردن روی هر گزینه زیرمنو آن نمایش داده شود بدون اینکه منو ما به هم بریزد و نیز یک بگراند به زیرمنو بدهیم

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

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

در این مرحله ما باید رویداد کلیک برای دکمه منو  را در جاوا اسکریپ تعریف کنیم تا بتوانیم منو را نمایش دهیم.

پس ابتدا آخرین نسخه jquery را از سایت آن دانلود می کنیم و در یک پوشه به اسم java ذخیره می کنیم و کد زیر را به تگ head که قبلا یک فایل در پوشه str با همین نام به آن اختصاص داده ایم اضافه می کنیم .

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

کلیک کنید