ساخت tooltips با تغییر نوع نمایش

display , opacity , visibility جهت ایجاد tooltips

یکی از موارد مهم در سایت ها تغییر نوع نمایش عناصر برای ایجاد dropdown , popup , tooltips ها و مواردی از این قبیل می باشد. در برخی از موارد ذکر شده نیاز دارید تا با جاوا اسکریپت نیز آشنایی داشته باشید ولی بقیه آن ها را تنها با ویژگی های visibility و opacity و display می توانید ایجاد نمایید. این ویژگی ها طریقه نمایش عناصر html را حتی تا پنهان نمودن عنصر از منظر کاربران تغییر می دهند.

در ادامه این آموزش سه مورد فوق را به شما معرفی می کنیم تا بتوانید برای خودتان انواع منوها و زیر منوها و tooltips ها را بسازید. فهرست ها (list) یکی از مهمترین قسمت های طراحی سایت هستند، طریقه ساخت فهرست ها را قبلا مشاهده نمودید اما در اینجا می خواهیم طریقه ساخت زیر منو ها و منوی کشویی را با هم بررسی کنیم.
 

ساخت فهرست تو در تو

همان طور که قبلا گفته شد شما می توانید عناصر را داخل یکدیگر قرار دهید، پس شما در li های یک فهرست می توانید یک فهرست دیگر ایجاد نمایید. با قرار دادن فهرست در li ها شما یک زیر منو را در اختیار دارید و می توانید به آن سبک دهید. برای استایل دادن به زیر منو ها ابتدا باید آن ها را از نظر ناپدید و سپس با کلیک بر روی پدرشان یا رفتن بر روی منوی اصلی آن ها را ظاهر نمایید. این کار توسط سه ویژگی visibility و opacity و display می تواند صورت گیرد. اما برای استفاده از این سه ویژگی ابتدا می بایست مقادیر مورد استفاده در آن ها را یاد بگیرید:
 

مقادیر ویژگی display

مقادیر توضیحات خودتان امتحان کنید
inline عنصر درون خطی که در آن خواص ارتفاع و عرض هیچ تاثیری ندارد inline »
block عنصر بلاک که از ابتدای خط شروع و کل خط را می گیرد block »
contents عناصر فرزند را ناپدید می کند contents »
flex عنصر را انعطاف پذیر در سطح بلاک نمایش می دهد flex »
grid عنصر را grid در سطح بلاک نمایش می دهد grid »
inline-block عنصر خود به صورت inline فرمت شده عنصر، اما شما می توانید مقادیر ارتفاع و عرض را اعمال کنید inline-block »
inline-flex عنصر را به صورت یک کانتینر انعطاف پذیر در سطح نمایش می دهد inline-flex »
inline-grid عنصر را به صورت یک کانال شبکه درون خطی نمایش می دهد inline-flex »
inline-table عنصر به عنوان یک جدول درون خطی نمایش داده می شود inline-table »
list-item اجازه می دهید عنصر رفتار کند مانند < li > عنصر list-item »
table اجازه می دهید عنصر رفتار کند مانند < table > عنصر table »
table-caption اجازه می دهید عنصر رفتار کند مانند < caption > عنصر table-caption »
table-cell اجازه می دهید عنصر رفتار کند مانند < td > عنصر table-cell »
table-column اجازه می دهید عنصر رفتار کند مانند < col > عنصر table-column »
table-row اجازه می دهید عنصر رفتار کند مانند < tr > عنصر table-row »
none عنصر به طور کامل ناپدید می شود none »
initial به مقدار پیش فرض آن تنظیم می کند. initial »
inherit از عنصر والد خود به ارث می برد inherit

 

مقادیر ویژگی visibility

مقادیر توضیحات خودتان امتحان کنید
visible مقدار پیش فرض. عنصر قابل مشاهده است visible »
hidden عنصر پنهان است اما هنوز هم فضا را می گیرد hidden »
collapse فضایی که توسط ردیف یا ستون جداول گرفته شده است برای محتوای دیگر در دسترس می گذارد (درغیر جدول پنهان می کند). collapse »
initial به مقدار پیش فرض آن تنظیم می کند. initial »
inherit از عنصر والد خود به ارث می برد inherit

 

مقادیر ویژگی opacity

  • opacity: 0<number<1|initial|inherit;

از خاصیت opacity برای تغییر مقدار شفافیت یک عنصر و محتوای آن استفاده می شود و با اعداد بین 0 تا 1 آن را مقدار دهی می کنیم و هرچه مقدار opacity به 1 نزدیک تر باشد شفافیت عنصر کمتر می شود و هرچه مقدار آن به 0 نزدیک تر باشد عنصر شفاف تر خواهد بود.

توجه شاید در برخی از موارد استفاده از خاصیت visibility یا display برای شما بهتر باشد و opacity کارایی لازم را نداشته باشد، پس باید برای استفاده از خاصیت شفافیت شما نیاز به کمی تجربه و تفکر دارید.

همانطور که بالاتر به آن اشاره شد برای ایجاد dropdown , popup , tooltips ها و مواردی از این قبیل ابتدا باید آن ها را از نظر کاربران مخفی و نامرعی نمود سپس با یک رویداد که ما آن را مشخص می کنیم به کاربران نمایش داد. برای پنهان کردن عناصر از دید کاربر از display:none یا visibility:hidden یا opacity:0 یا حتی از دو یا سه ویژگی به صورت همزمان استفاده می کنند. سپس برای نمایش عناصر پنهان شده این سه ویژگی را به حالت پیش فرض تغییر می دهند.

Tooltip-Popup

در زیر یک منوی افقی دارای یک زیر منو را مشاهده می کنید که با استفاده از سه ویژگی ساخته شده که این حالت برای موارد دیگر مانند tooltips نیز قابل اجرا می باشد.


display
HomeProductsCarBusAbout
visibility
HomeProductsCarBusAbout
opacity
HomeProductsCarBusAbout

html :
<ul><li>Home</li>
<li>Products
<ul><li>Car</li><li>Bus</li></ul>
</li>
<li>About</li></ul>
style:
ul {list-style-type: none;
width: 30%;}
ul >li{float:right;
padding: 2% 6%;
background-color:black;}
ul li ul{display:none or opacity:0 or visibility:hidden}
li:hover ul{display:block or opacity:1 or visibility:visible}


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

همچنین بخوانید...!

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

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