آموزش CSS پیشرفته : مثال‌های عملی موقعیت‌یابی

این مقاله نشان می‌دهد که چگونه می‌توان چند مثال از دنیای واقعی ساخت تا نشان دهد چه کارهایی می‌توان با جایگاه‌یابی انجام داد.

یک جعبه اطلاعات تب‌بندی‌شده

اولین مثالی که بررسی خواهیم کرد، یک جعبه اطلاعات تب‌بندی‌شده کلاسیک است - یک ویژگی بسیار رایج که وقتی می‌خواهید اطلاعات زیادی را در یک فضای کوچک جای دهید، استفاده می‌شود. این شامل برنامه‌های سنگین اطلاعاتی مانند بازی‌های استراتژیک/جنگی، نسخه‌های موبایل وب‌سایت‌ها که صفحه نمایش باریک و فضای محدودی دارند و جعبه‌های اطلاعات فشرده می‌شود که ممکن است بخواهید اطلاعات زیادی را بدون اینکه کل رابط کاربری را پر کند، در دسترس قرار دهید. مثال ساده ما پس از اتمام کار، به این شکل خواهد بود:

شاید با خودتان فکر کنید «چرا تب‌های جداگانه را به صورت صفحات وب جداگانه ایجاد نکنیم و کاری نکنیم که تب‌ها با کلیک روی صفحات جداگانه این اثر را ایجاد کنند؟» بله، این کد ساده‌تر خواهد بود، اما در آن صورت هر نمای «صفحه» جداگانه در واقع یک صفحه وب تازه بارگذاری شده خواهد بود که ذخیره اطلاعات در نماهای مختلف و ادغام این ویژگی در یک طراحی رابط کاربری بزرگتر را دشوارتر می‌کند.

HTML

بنابراین در اینجا یک عنصر با کلاس info-box داریم که شامل دو است. div اول شامل سه دکمه است که به زبانه‌های واقعی برای کلیک روی آنها برای نمایش پنل‌های محتوای ما تبدیل می‌شوند. div دوم شامل سه عنصر است که پنل‌های محتوای مربوط به هر زبانه را تشکیل می‌دهند. هر پنل شامل محتوای نمونه است. ایده این است که ما زبانه‌ها را طوری سبک‌بندی می‌کنیم که مانند یک منوی ناوبری افقی استاندارد به نظر برسند و پنل‌ها را طوری سبک‌بندی کنیم که با استفاده از موقعیت‌یابی مطلق روی یکدیگر قرار گیرند. همچنین کمی جاوا اسکریپت به شما می‌دهیم تا در صفحه خود قرار دهید تا پنل مربوطه را هنگام فشردن یک زبانه نمایش دهید و خود زبانه را سبک‌بندی کنید. در این مرحله نیازی به درک خود کد جاوا اسکریپت نخواهید داشت، اما باید در اسرع وقت به یادگیری برخی از جاوا اسکریپت‌های اساسی فکر کنید - هرچه ویژگی‌های رابط کاربری شما پیچیده‌تر شوند، احتمال بیشتری وجود دارد که برای پیاده‌سازی عملکرد مورد نظر خود به مقداری جاوا اسکریپت نیاز داشته باشید.

تنظیمات عمومی

برای شروع، کد زیر را بین تگ‌های باز و بسته‌ی خود اضافه کنید:

CSS

این فقط یک تنظیم کلی برای تنظیم فونت sans-serif در صفحه ما، استفاده از مدل border-box box-sizing و حذف حاشیه پیش‌فرض است. در مرحله بعد، کد زیر را درست زیر CSS قبلی خود اضافه کنید.

CSS

این یک عرض و ارتفاع مشخص برای محتوا تعیین می‌کند و آن را با استفاده از مارجین قدیمی: در مرکز صفحه قرار می‌دهد. قبلاً در این دوره، توصیه می‌کردیم که در صورت امکان، ارتفاع ثابتی برای محتوا تعیین نکنید؛ در این شرایط مشکلی ندارد زیرا ما در تب‌های خود محتوای ثابتی داریم.

استایل‌دهی به تب‌های ما

حالا می‌خواهیم تب‌ها را طوری استایل‌دهی کنیم که شبیه تب‌ها به نظر برسند - اساساً، این‌ها یک منوی ناوبری افقی هستند، اما به جای اینکه وقتی روی آن‌ها کلیک می‌شود صفحات وب مختلفی بارگذاری شوند، همانطور که قبلاً در این دوره دیده‌ایم، باعث می‌شوند پنل‌های مختلفی در همان صفحه نمایش داده شوند. ابتدا، قانون زیر را در پایین CSS خود اضافه کنید تا لیست تب‌ها به یک ظرف انعطاف‌پذیر تبدیل شود و عرض آن ۱۰۰٪ باشد:

CSS

ما در این مثال از انتخابگرهای فرزند با در ابتدای زنجیره استفاده می‌کنیم - این به این دلیل است که بتوانیم این ویژگی را در صفحه‌ای که محتوای دیگری از قبل روی آن است، بدون ترس از تداخل با سبک‌های اعمال شده در سایر قسمت‌های صفحه، وارد کنیم. در مرحله بعد، دکمه‌ها را طوری سبک‌بندی می‌کنیم که شبیه تب‌ها به نظر برسند. CSS زیر را اضافه کنید:

CSS

در مرحله بعد، حالت‌های و تب‌ها را طوری تنظیم می‌کنیم که وقتی روی آنها فوکوس/هاور می‌شود، ظاهر متفاوتی داشته باشند و به کاربران بازخورد بصری ارائه دهند.

CSS

سپس قانونی تنظیم می‌کنیم که وقتی ویژگی aria-selected روی یکی از تب‌ها روی true تنظیم می‌شود، آن را هایلایت کند. ما این کار را با استفاده از جاوا اسکریپت و با کلیک روی یک تب انجام می‌دهیم. CSS زیر را زیر سایر استایل‌های خود قرار دهید:

CSS

استایل دادن به پنل‌ها

کار بعدی استایل‌دهی به پنل‌هایمان است. شروع می‌کنیم! اول از همه، قانون زیر را برای استایل‌دهی به کانتینر با پسوند اضافه می‌کنیم. در اینجا یک ارتفاع ثابت تعیین می‌کنیم تا مطمئن شویم پنل‌ها به طور کامل درون جعبه اطلاعات قرار می‌گیرند، موقعیت نسبی را طوری تنظیم می‌کنیم که به عنوان زمینه موقعیت‌یابی قرار گیرد، بنابراین می‌توانید عناصر فرزند موقعیت‌یابی شده را نسبت به آن و نه نسبت به نمای اولیه قرار دهید، و در نهایت مقدار float را در CSS بالا پاک می‌کنیم تا با بقیه طرح‌بندی تداخل نداشته باشد.

CSS

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

CSS

قانون دومی که اینجا اضافه خواهیم کرد، باعث می‌شود پنلی که کلاس is-hidden روی آن تنظیم شده است، پنهان شود. باز هم، این کلاس را با استفاده از جاوا اسکریپت در زمان مناسب اضافه/حذف خواهیم کرد. وقتی یک تب انتخاب می‌شود، کلاس is-hidden پنل مربوطه حذف می‌شود و تمام پنل‌های دیگر کلاس is-hidden را تنظیم می‌کنند، بنابراین فقط یک پنل در یک زمان قابل مشاهده خواهد بود.

CSS

جاوا اسکریپت

آخرین بخشی که این ویژگی را فعال می‌کند، کد جاوا اسکریپت است. فایل با استفاده از تگ اضافه شده است:

HTML

JAVASCRIPT

این کد موارد زیر را انجام می‌دهد: - در رویداد بارگذاری پنجره، کلاس TabsManual را برای همه عناصر لیست جدول مقداردهی اولیه می‌کند. - هنگامی که یک شیء TabsManual ایجاد می‌شود، در سازنده، همه ارجاعات تب و پنل در متغیرهای tabs و tabpanels جمع‌آوری می‌شوند، بنابراین می‌توانیم بعداً به راحتی کارهایی را با آنها انجام دهیم. سازنده همچنین کنترل‌کننده‌های رویداد click و keydown را در همه تب‌ها ثبت می‌کند. کنترل‌کننده‌های رویداد شامل منطقی در مورد آنچه باید هنگام انتخاب یک تب با استفاده از کلیک یا فشار کلید اتفاق بیفتد، هستند. - در تابع ، موارد زیر رخ می‌دهد: - یک حلقه for برای گردش در تمام تب‌ها و لغو انتخاب آنها با تنظیم ویژگی aria-selected به false و با تنظیم کلاس is-hidden در پنل‌های مربوطه استفاده می‌شود. در تب انتخاب شده (currentTab)، aria-selected به true تنظیم می‌شود و کلاس is-hidden از پنل مربوطه حذف می‌شود. این کد همچنین دارای منطقی برای پشتیبانی از پیمایش صفحه کلید با استفاده از کلیدهای جهت چپ، جهت راست، Home و End است.

یک جعبه اطلاعات با تب‌های ثابت

در مثال دوم، مثال اول - جعبه اطلاعات - را در نظر می‌گیریم و آن را به متن یک صفحه وب کامل اضافه می‌کنیم. اما نه تنها این - بلکه به آن یک موقعیت ثابت می‌دهیم تا در پنجره مرورگر در همان موقعیت باقی بماند. وقتی محتوای اصلی اسکرول می‌شود، جعبه اطلاعات در همان موقعیت روی صفحه باقی می‌ماند. مثال نهایی ما به این شکل خواهد بود:

اضافات HTML

اول از همه، ما به مقداری HTML اضافی برای نمایش محتوای اصلی صفحه وب نیاز داریم. زیر را درست زیر تگ آغازین و قبل از بخش موجود اضافه کنید:

اگر دوست دارید، می‌توانید محتوای جعلی را با محتوای واقعی جایگزین کنید.

تغییرات در CSS موجود

در مرحله بعد، باید تغییرات کوچکی در CSS موجود ایجاد کنیم تا کادر اطلاعات در جای خود قرار گیرد و موقعیت آن مشخص شود. قانون خود را تغییر دهید تا (دیگر نمی‌خواهیم کادر اطلاعات در مرکز صفحه باشد) حذف شود، را اضافه کنید و آن را به بالای نمای مرورگر بچسبانید. حالا باید به این شکل باشد:

CSS

استایل‌دهی به محتوای اصلی

تنها چیزی که برای این مثال باقی مانده است، ارائه استایل به محتوای اصلی است. قانون زیر را در زیر بقیه CSS خود اضافه کنید: برای شروع، به محتوا همان رنگ پس‌زمینه، رنگ و فاصله‌گذاری پنل‌های جعبه اطلاعات را می‌دهیم. سپس یک حاشیه بزرگ از سمت چپ به آن می‌دهیم تا به سمت راست منتقل شود و فضایی برای قرارگیری جعبه اطلاعات ایجاد شود، بنابراین با هیچ چیز دیگری همپوشانی ندارد. این پایان مثال دوم است؛ امیدواریم مثال سوم نیز به همان اندازه جالب باشد.

CSS

یک پنل مخفی کشویی

آخرین مثالی که در اینجا ارائه خواهیم داد، پنلی است که با فشار دادن یک آیکون، صفحه را باز و بسته می‌کند - همانطور که قبلاً اشاره شد، این پنل برای موقعیت‌هایی مانند طرح‌بندی‌های موبایل محبوب است، جایی که فضای صفحه نمایش کوچک است، بنابراین نمی‌خواهید بیشتر آن را با نمایش یک منو یا پنل اطلاعات به جای محتوای مفید، اشغال کنید. مثال نهایی ما به این شکل خواهد بود:

این مثال ادامه‌ی مثال قبلی نیست، بنابراین به یک فایل شروع تازه نیاز است. بیایید نگاهی به HTML موجود در فایل بیندازیم:

HTML

برای شروع، در اینجا یک عنصر با یک کاراکتر علامت سوال خاص به عنوان متن دکمه داریم. این دکمه برای نمایش/پنهان کردن پنل اطلاعات کناری فشرده می‌شود. در بخش‌های بعدی نحوه‌ی عملکرد این موارد را توضیح خواهیم داد.

استایل دادن به دکمه

ابتدا بیایید به دکمه بپردازیم - CSS زیر را بین تگ‌های خود اضافه کنید:

CSS

اولین قانون، را استایل می‌دهد؛ در اینجا داریم: اندازه فونت را بزرگ تنظیم کنید تا آیکون زیبا و بزرگ شود. حاشیه را حذف کنید و پس‌زمینه را شفاف کنید تا به جای دکمه، فقط آیکون ? نمایش داده شود. موقعیت را مطلق (position absolute) روی آن تنظیم کنید و از top و right برای قرار دادن آن در گوشه بالا سمت راست استفاده کنید. z-index را روی ۱ تنظیم کنید - این به این دلیل است که وقتی پنل اطلاعات استایل‌بندی و نمایش داده می‌شود، آیکون را نپوشاند؛ در عوض، آیکون روی آن قرار می‌گیرد تا بتوان دوباره آن را فشار داد تا پنل اطلاعات پنهان شود. از ویژگی cursor برای تغییر مکان‌نمای ماوس هنگام قرار گرفتن روی آیکون به یک اشاره‌گر دست (مانند چیزی که هنگام قرار گرفتن ماوس روی لینک‌ها می‌بینید) استفاده کنید، به عنوان یک سرنخ بصری اضافی برای کاربران که آیکون کار جالبی انجام می‌دهد.

استایل دادن به پنل

حالا وقت آن رسیده که خود پنل کشویی را استایل‌دهی کنید. قانون زیر را به انتهای CSS خود اضافه کنید:

CSS

اینجا خیلی چیزها در جریان است - بیایید کم‌کم در مورد آن بحث کنیم: ابتدا، یک رنگ پس‌زمینه و رنگ ساده برای کادر اطلاعات تنظیم می‌کنیم. بعد، یک عرض ثابت برای پنل تنظیم می‌کنیم و ارتفاع آن را برابر با کل ارتفاع نمای مرورگر قرار می‌دهیم. همچنین مقداری فاصله افقی برای آن در نظر می‌گیریم تا کمی فاصله داشته باشد. بعد، را روی پنل تنظیم می‌کنیم تا همیشه در یک مکان ظاهر شود، حتی اگر صفحه محتوایی برای پیمایش داشته باشد. آن را به بالای نمای صفحه می‌چسبانیم و طوری تنظیم می‌کنیم که به طور پیش‌فرض در سمت راست و خارج از صفحه باشد. در نهایت، یک گذار (transition) روی عنصر تنظیم می‌کنیم. گذار یک ویژگی جالب است که به شما امکان می‌دهد تغییرات بین حالت‌ها را به طور روان انجام دهید، نه اینکه فقط ناگهان "روشن" یا "خاموش" شود. در این حالت، قصد داریم وقتی کادر انتخاب علامت زده می‌شود، پنل به آرامی روی صفحه حرکت کند. (یا به عبارت دیگر، وقتی روی نماد علامت سوال کلیک می‌شود.)

تنظیم وضعیت بررسی‌شده

یک بخش CSS نهایی برای اضافه کردن وجود دارد - موارد زیر را در انتهای CSS خود قرار دهید:

CSS

این قانون بیان می‌کند که وقتی کلاس روی info-panel تنظیم شده باشد، ویژگی صحیح را روی 0px تنظیم کنید، که باعث می‌شود پنل دوباره روی صفحه نمایش داده شود (به دلیل انتقال، به طور روان). حذف کلاس دوباره پنل را پنهان می‌کند. برای اضافه کردن/حذف کلاس از info-panel با کلیک روی دکمه، باید از جاوا اسکریپت استفاده کنیم. کد زیر را بین تگ‌های اضافه کنید:

JAVASCRIPT

این کد یک کنترل‌کننده رویداد کلیک به دکمه اضافه می‌کند. کنترل‌کننده کلیک، کلاس باز (open) را در پنل جعبه اطلاعات (info-box) فعال یا غیرفعال می‌کند که پنل را به داخل یا خارج از نما می‌لغزاند. این کنترل‌کننده رویداد همچنین ویژگی aria-expanded را روی دکمه تنظیم می‌کند تا دسترسی‌پذیری را بهبود بخشد. خب، این هم ساده‌ترین راه برای ایجاد یک افکت پنل اطلاعات فعال و غیرفعال.