وبلاگ با برنامه
» ساختن menu با استفاده از display: inline-block
ساختن menu با استفاده از display: inline-block
درود! در این مقاله سعی بر این است تا یک چالش دیگر از CSS با هم حل کنیم! کار بسیار ساده است و ساب منو هم ندارد. منو تمام صفحه است و بین گزینه های منو هیچ فاصله ای دیده نمیشود. همچنین از دیو های اضافی و تگ ها میان ایتم ها استفاده نشده و کدهای html بسیار کمی خواهیم داشت.
پیشنیاز
کافیست با html css اشنا باشید. همچنین بدانید تفاوت بین display: inline-block با گزینه های display: none و یا display: block چیست. ایا میدانید اگر display نگذاریم حالت پیشفرض برای مقدار دیسپلی چیست؟ static است. این ها استفاده میشوند تا ایتم های منو داخل دیو مادر قرار بگیرند.
نگاه کلی بر نتیجه نهایی
بیایید قبل از شروع کدنویسی یک نگاه به نتیجه بیندازیم! تصویر زیر نتیجه کدنویسی های ماست. کدهای ان را میتوانید در قالب فایل zip ازاینجا دانلود کنید! شما در تصویر منویی تمام صفحه میبینید. برای تمام صفحه شدن ان از width با مقدار 25 درصد استفاده کردیم. در نکات پایانی مقاله درباره اش میخوانید!
بررسی کدهای index.html
در قسمتی از صفحه این قطعه کد را مشاهده می نمایید! به شرح ان پرداخته میشود.
<nav class="dis"> <a href="#">home</a> <a href="#">good</a> <a href="#">shop</a> <a href="#">about</a> </nav>
هیچ نکته خاصی ندارد. کدهای html شبیه هم هستند. تنها چیز جالب این است که اینبار به جای استفاده از تگ های ul و li هایی که درونش قرار میگیرند امده ایم و از تگ nav به همراه تگ های a استفاده کردیم.
در این رابطه از html برای نوبار استفاده شده است. قبلا استایل دهی ها با css بود. مثلا برای inline-block کردن ایتم های li باید از display استفاده میشد البته اینبار هم استفاده میشود اما نه برای اینکه انها در یک خط کنار هم قرار بگیرند بلکه برای اینکه در تگ nav مادر قرار بگیرند. زیرا در حالت عادی دیو مادر کوچک تر است.
بررسی مختصر کدهای style.css
کدهای مختصری نوشته شده است و این خوب است. یک کد بهینه است.
html{
box-sizing: border-box;
}
* , *:after, *:before{
box-sizing: inherit;
}
/* این کد ها را حفظ کنید */
/* برای تمام پروژه ها استفاده میشود */
در قسمتی از کدهایی که دانلود کردید و از حالت زیپ خارج کردید، در فایل style.css قطعه کد بالا را ببینید! این درباره box-sizing است و بسیار پر چالش است. در مصاحبه های حرفه ای هم سوال از ان پرسیده میشود.
بهتر است این قطعه کد برای محکم کاری همیشه در همه پروژه های کوچک و بزرگ در بالا برگه استایل نوشته شود. باعث میشود باکس ها یا همان دیو ها بدون فاصله داشتن از هم کنار هم بنشینند. به هم چسبیده و تمیز دیده شوند. Layout را تنظیم میکند.
.dis{
background-color: gold;
text-align: center;
font-size: 0;
}
.dis a{
text-decoration: none;
background-color: lightgray;
padding: 5px;
width: 25%;
font-size: 16px;
display: inline-block;
}
نکته 1: دراین قطعه کد دو کلاس مادر و بچه ان را مشاهده مینمایید. قطعه کد اصلی ما همین است که کد نویسی اش را خود انجام دادیم. مثل قبلی حفظ کردنی نیست. قطعه کد background-color کاملا واضح است که رنگ پس زمینه دیو مادر را تنظیم میکند. بچه div ها نیز هیچ رنگ پس زمینه ای ندارند.
نکته 2: نکته جالب این پروژه علاوه بر اخرین خط که display: inline-block است یک خط دیگر هم هست. به فونت سایز های مادر و بچه دقت کنید. در دیو مادر فونت صفر است و در دیو بچه فونت شانزده پیکسل تنظیم شده! همین باعث شده است تا فاصله بین دیو ها از بین برود.
نکته 3: شاید این سوال برایتان پیش امده که وقتی از تگ a استفاده میکنیم یک خط زیر متن نمایان میشود درحالیکه در این منو چنین نشده! راز ان text-decoration: none است. اگر مقدار text-decoration بجای none مقادیری مثل underline بود انگاه خط نشان داده میشد. در حالت پیشفرض مقدارش همین اندرلاین است به همین دلیل نمایان است.
نکته 4: عرض را برابر 25 درصد قرار دادیم چون 4 ایتم در منو وجود داشت.
نکته 5: قطعه کدی که از اول مقاله تا کنون چندبار درباره اش گفته شد همین display: inline-block است که اگر نباشد ارتفاع دیو مادر از ارتفاع دیو بچه ها کمتر میماند.
از اینکه این مقاله را خواندید سپاسگدارم!
