درود! در این مقاله سعی بر این است تا یک چالش دیگر از CSS با هم حل کنیم! اینبار قرار است یک منو به زبان فارسی راستچین شده کدنویسی کنیم. به نکات جالبی میرسیم و متوجه جزییاتی مانند تمام عرض بودن منو، سلکتور های css و حتی نامگذاری المنت ها با استفاده از BEM میشویم. اماده هستید! بیایید شروع کنیم!
خوشبختانه این یک منوی ساده است و هیچ پیش نیازی نمیخواهد. کافیست با html css اشنا باشید. کمی سلکتور های ان را بشناسید! مثلا بدانید hover چه میکند؟ یا مثلا first-child چه کار میکند! اگر هم اشنا نیستید، هیچ عیبی ندارد، همراه هم در این مقاله می اموزیم! کافیست نکاتی که زیر هر قطعه کد ذکر میشود را بخوانید و در بروزر خود تمرین کنید! تا در حافظه بلند مدت شما ملکه بشود!
بیایید قبل از شروع کدنویسی یک نگاه به نتیجه بیندازیم! فرانت اند دولوپرها هم برای کدنویسی نیاز به یک ui design دارند تا مطابق همان کدنویسی انجام دهند. تصویر نهایی این پروژه، منویی به زیبایی تصویر زیر است. کدهای ان را میتوانید در قالب فایل zip ازاینجا دانلود کنید!
در قسمتی از صفحه این قطعه کد را مشاهده می نمایید! به تفسیر ان می پردازیم!
<div class="menu"> <div class="menu__div"> <ul class="menu__ul"> <li class="menu__item"><b>نام شرکت</b></li> <li class="menu__item">خانه</li> <li class="menu__item"> بلاگ <ul class="menu__ul1"> <li class="menu__submenu"> علمی</li> <li class="menu__submenu"> تکنولوژی</li> <li class="menu__submenu"> برنامه نویسی </li> </ul> </li> <!-- bootcamps --> <li class="menu__item">درباره ما</li> <li class="menu__item">سوالات رایج</li> </ul> </div> <!-- menu__div --> </div> <!-- menu -->
نکته 1: نامگذاری کلاس ها بر اساس استاندارد BEM است. همانطور که میدانید BEM مخفف Block Element Modifier است. بلاک المنت و مدیفایر! اینجا یک کلاس بلاک است و بقیه کلاس های المنت هستند. کلاس مدیفایر نداریم.
نکته 2: تنها کلاس بلاک menu است که بزرگترین div را تشکیل میدهد.
نکته 3: کلاس های المنت با دوتا اندرلاین دیده میشوند. تعداد زیادی دارند. همانطور که در جریان هستید هر کلاس المنت متعلق به یک کلاس بلاک است. اینجا همه المنت ها به تک بلاک menu باز میگردند به همین دلیل اول نامشان با menu اغاز میشود و با دو اندرلاین نام خودشان پیوند میخورد.
نکته 4: به تگ <b> نگاه کنید! داخل ان نوشته "نام شرکت" وجود دارد. شاید این را هم میدانستید که برای حالت bold از این تگ html استفاده میشود.
اینجا مجالی برای توضیح تمام کدها نیست اما بخش های مهمش بیان میشوند.
وبلاگ با برنامه
مطلب مرتبط
آموزش Communication در هوانوردیbody{
background-color: skyblue;
margin: 0;
}
/* کدهای بالا برای این هستند که نوبار تمام صفحه باشد */
در قسمتی از کدهایی که دانلود کردید و از حالت زیپ خارج کردید، در فایل style.css قطعه کد بالا را ببینید!
نکته: به تگ بزرگ body که تمام محتوای ما را میپوشاند، مارجین صفر دادیم تا منوی ما به قسمت های دور لبه بروزر هم کشیده شود و کاملا تمام صفحه شود. هیچ گپی و فاصله اندکی هم با دور ان نداشته باشد.
ul, li{margin: 0;padding: 0}
/* خط بالا برای چسبیدن منو به بالای بروزر است */
به تگ های ul و li مارجین و پدینگ صفر داده شد تا کاملا فاصله از دور منو برداشته شود. تا قبل از اینکه مارجین و پدینگ را صفر بدهیم با بالای بروزر کمی فاصله داشت. این فاصله هم اکنون صفر است.
.menu__item li{ display: none }
.menu__item:hover li{ display: inline-block }
در این قطعه کد نکته جالبی به چشم میخورد. همیشه برای اینکه ساب منو زیر منو نمایش داده شود از جاوااسکریپت استفاده میشد اما حالا بدون ان هم میتوان فقط با سلکتور css این کار را انجام داد. آیا شما قبلا با این ویژگی از css اشنا بودید؟ ایا قبلا از این قطعه کدها نوشته بودید؟ تفسیر کد بالا اینچنین است:
نکته: در حالت عادی ساب منو نمایش داده نمیشود. مقدار display برابر با none قرار داده شده است.
نکته: در حالت هاور (وقتی موس روی ایتمی که ساب منو دارد برود) مقدار display تغییر میکند و بصورت inline-block ساب منو ها زیر هم نمایش داده میشوند.
از اینکه این مقاله را خواندید سپاسگدارم!
تبلیغات افزایش بازدید و افزایش فروش در ارم بلاگ
مشاهده
