نمادها

شما اینجا هستید

آموزش Bootstrap جلسه بیست و سوم (navbar)

در خدمت شما هستیم با آموزش Bootstrap جلسه بیست و سوم (navbar)

آموزش Bootstrap جلسه بیست و سوم (navbar) از سری آموزش های تک قسمتی است

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

منویی که در این آموزش یاد داده می شود موارد زیر را در خود جای داده است

  • منو رسپانسیو
  • منو Dropdown (زیر منو)
  • دکمه ورود
  • دکمه ثبت نام
  • باکس جستجو
  • لوگو سایت

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

شما به سادگی می توانید جایگاه هر کدام از المان های بالا را در منو تعیین کنید

 

کلاس navbar

درباره این کلاس در بخش بالا توضیح دادیم با این کلاس ساخت تمام منو های رسپاسیو امکانپذیر است در html5 با آمدن تگ های جدید تگ nav نیز اضافه شد که برای موتور های جستجو امکان خواندن منو ها را راحتتر کرد پس به شما پیشنهاد میدهیم از این تگ برای ساخت منو های خود استفاده کنید. همچنین به کمک این آموزش میتوانید بخش های مختلف را در منو خود جای دهید از این رو تا انتها با آموزش Bootstrap جلسه بیست و سوم (navbar) که مربوط به ساخت منو است همراه باشید.

در حالت پیشفرض برای ساخت منو یا همان Navigation Bar از کلاس <nav class=”navbar navbar-default”> استفاده میشود که از آن برای شما مثالی خواهیم زد.

همانطور که در کد بالا مشخص است در کنار کلاس navbar از کلاس navbar-default نیز استفاده شد این کلاس باعث به وجود آمدن بکگراندی خاکستری در منو شما میشود.

اگر قصد دارید رنگ منو خود را برعکس حالت فعلی کنید یعنی از رنگ نوشته مشکی و رنگ بکگراند سفید به رنگ نوشته سفید و بکگراند مشکی تبدیل کنید کافیست جای کلاس navbar-default از کلاس navbar-inverse استفاده کنید در کلاس هم کاملا این موضوع مشهود است Inverse به معنی برعکس است.

تا اینجای کار ما منو ساده ای ساختیم اگر میخواهید به منو های خود قابلیت زیرمنو نیز اضافه کنید باید از قابلیت dropdown نیز در منو خود استفاده کنید قبلا در آموزش آموزش Bootstrap جلسه بیستم (Dropdown) به این موضوع اشاره کردیم اما باز برای شما مثالی میزنیم:

 

قرار دادن ثبت نام و لاگین در منو

اگر میخواهید دکمه لاگین و ثبت نام نیز در خود منو جای بگیرید میتوانید کد زیر را استفاده کنید البته برای استفاده از آیکن لازم است از گلیف آیکن یا fontawesome استفاده کنید که قبلا در آموزش Bootstrap جلسه سیزدهم (Glyphicons) به صورت مفصل به آن پرداخته ایم.

 

قرار دادن دکمه در منو

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

 

قرار دادن باکس سرچ در منو

یکی از مواردی که در بسیاری از سایت ها میبینید قرار دادن باکس جستجو در منو سایت است که به کاربران شما این امکان را میدهد که به صورت سریع اگر موردی را نتوانستند بیابند از جستجو در سایت شما استفاده کنند اگر این مورد هم برای شما جذاب است میتوانید از کد زیر استفاده کنید:

 

ثابت بودن موقعیت منو با اسکرول

حتما سایت هایی را دیده اید که منو سایت با اسکرول کردن شما به پایین صفحه به صورت ثابت با شما حرکت میکند به این حالت اصطلاحا پوزیشن fixed گفته میشود و میتوانید با تعیین نوع پوزیشن منو خود را در بالایی ترین قسمت مرورگر یا پایین ترین حالت آن قرار دهید ما برای شما پوزیشن بالا را در کد زیر قرار داده ایم:

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

 

می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه بیست و دوم (Tabs)

آموزش Bootstrap جلسه بیست و چهارم (Forms)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

 

و یا آن را در آپارت ببینید

و یا آن را از مسیر زیر در یوتویب دنبال کنید
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (3 رای, میانگین: 4٫67 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه بیست و سوم (navbar): نوع فایل:mp4 حجم فایل:72.04 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.