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

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

آنچه در این مقاله می خوانید ...

ساخت فهرست تو در تو ! مقادیر ویژگی display! مقادیر ویژگی visibility! مقادیر ویژگی opacity!

در ادامه این آموزش سه مورد فوق را به شما معرفی می کنیم تا بتوانید برای خودتان انواع منوها و زیر منوها و 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 یا حتی از دو یا سه ویژگی به صورت همزمان استفاده می کنند. سپس برای نمایش عناصر پنهان شده این سه ویژگی را به حالت پیش فرض تغییر می دهند.

در زیر یک منوی افقی دارای یک زیر منو را مشاهده می کنید که با استفاده از سه ویژگی ساخته شده که این حالت برای موارد دیگر مانند 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 می باشد.