آموزش پروژه محور html-css

ویدیو نوار منو در html,css

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

نوار منو در html

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

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

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

ساخت انواع منو در html

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

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

ساخت منو کشویی در html

سورس منو html

نمایش کپی در حافظه

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

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

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

ساخت منو کشویی در html

خاصیت display در css

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

نمایش کپی در حافظه

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

نمایش کپی در حافظه

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

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

نمایش کپی در حافظه

خاصیت padding در css

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

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

نمایش کپی در حافظه

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

ساخت منو کشویی در html

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

نمایش کپی در حافظه

فیلم آموزش ایجاد نوارمنوی عمودی

ساخت منو عمودی در html

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

ادامه مطلب  چند مثال ساده از نمونه کد php - سئوکان

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

 

نمایش کپی در حافظه
ساخت منو عمودی در html

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

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

نمایش کپی در حافظه
ساخت منو باز شونده با css

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

نمایش کپی در حافظه
سورس منو html

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

نمایش کپی در حافظه
ساخت منو افقی در html

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

نمایش کپی در حافظه

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

نمایش کپی در حافظه
ساخت منوی ثابت در css

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

ادامه مطلب  آموزش ساخت اسلایدر با Owl Carousel - جلسه 9

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

آموزش نصب و استفاده از jquery در صفحات وب

1-در روت هاست یا لوکال هاست یک پوشه به نام js ایجاد می کنیم .

ادامه مطلب  آموزش کامل تگ header در html – جلسه 7

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

2-روی صفحه کلیک کرده و ctl+a همه متن را انتخاب می کنیم

3-بعد از انتخاب ctl+c فایل jquery را کپی می کنیم

4-یک فایل javaScript ایجاد کرده و با استفاده از ctr+v فایل را پیست می کنیم و با نام jquery-3.6.1.min در پوشه js ذخیره یا آپلود می کنیم.

پس تگ head به صورت زیر تغییر خواهد کرد

نمایش کپی در حافظه

در انتها کد جاوا اسکریپت مربوط به نمایش و عدم نمایش نمو را به انتهای صفحه header اضافه می کنیم

نمایش کپی در حافظه
ساخت منو متحرک برای سایت

css نوار منوی عمودی

 

نمایش کپی در حافظه

نتیجه گیری

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

لینک مربوط به سورس کد جلسه 6

کلیک کنید

یک دیدگاه

  1. […] تگ imageقدرت گرفته از افزونه نوشته‌های مرتبط هوشمندادامه مطلب  آموزش ساخت منو nav و زیرمنو subnavبا html و css – ج…قدرت گرفته از افزونه نوشته‌های مرتبط […]

ارسال دیدگاه