روز دوم فرانت اند:ساخت منوی ابشاری متریال
در این پست می خواهیم با ساخت یک منوی ابشاری ریسپانسیو و با استایل متریال آشنا شویم.اما پیش از شروع اموزش توصیه می کنم برای درک بهتر کدهای نوشته شده در اموزش دوره های مربوط به HTML5 و Css3 می توانید راهنمای خوبی برایتان باشد.
قدم اول:ساخت سند html
برای شروع کار در داخل سند html از تگ Header برای ساخت منو استفاده می کنیم چرا که بیشتر استفاده از منوی ابشاری در سطح هدر وب سایت اتفاد می افتد.
<header> <nav> <div> <a><span>Menu </span>1</a> <div> <a>Submenu 1</a> <a>Submenu 2</a> <a>Submenu 3</a> <a>Submenu 4</a> <a>Submenu 5</a> <a>Submenu 6</a> </div> </div> <div> <a><span>Menu </span>2</a> <div> <a>Submenu 1</a> <a>Submenu 2</a> <a>Submenu 3</a> <a>Submenu 4</a> <a>Submenu 5</a> <a>Submenu 6</a> </div> </div> <div> <a><span>Menu </span>3</a> <div> <a>Submenu 1</a> <a>Submenu 2</a> <a>Submenu 3</a> <a>Submenu 4</a> <a>Submenu 5</a> <a>Submenu 6</a> </div> </div> </nav> </header>
دقت داشته باشید که ما از تگ div به صورت تو در تو استفاده کردیم تا هم بتوانیم منو های متعددی بسازیم و هم بتوانیم برای منو ها ساب منو یا زیر منو هم تعریف کنیم.از تگ a هم استفاده کردیم تا اگر نیاز باشد برای ساب منو ها لینک تعریف کنیم به مشکل بر نخوریم.
قدم دوم:استایل دهی به عناصر html در منوی ابشاری
در ادامه ما برای قسمت های مختلفی که در سند html تعریف کردیم استایل دهی میکنم.این قسمت ها عبارت اند از : header,nav,div,a
header { width: 100%; height: 50px; background-color: #3498DB; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } header > nav > div { float: left; width: 16.6666%; height: 100%; position: relative; } header > nav > div > a { text-align: center; width: 100%; height: 100%; display: block; line-height: 50px; color: #fbfbfb; transition: background-color 0.2s ease; text-transform: uppercase; } header > nav > div:hover > a { background-color: rgba(0, 0, 0, 0.1); cursor: pointer; } header > nav > div > div { display: none; overflow: hidden; background-color: white; min-width: 200%; position: absolute; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); padding: 10px; } header > nav > div:not(:first-of-type):not(:last-of-type) > div { left: -50%; border-radius: 0 0 3px 3px; } header > nav > div:first-of-type > div { left: 0; border-radius: 0 0 3px 0; } header > nav > div:last-of-type > div { right: 0; border-radius: 0 0 0 3px; } header > nav > div:hover > div { display: block; } header > nav > div > div > a { display: block; float: left; padding: 8px 10px; width: 46%; margin: 2%; text-align: center; background-color: #3498DB; color: #fbfbfb; border-radius: 2px; transition: background-color 0.2s ease; } header > nav > div > div > a:hover { background-color: #212121; cursor: pointer; }
قدم سوم:ریسپانسیو یا واکنش گرا کردن عناصر منوی ابشاری:
در فایل Css از دستور مدیا @Media برای هماهنگ کردن بخش های مختلف منو با دستگاهای با حداکثر عرض 600px استفاده می کنیم.
@media (max-width:600px) { header > nav > div > div > a { margin: 5px 0; width: 100%; } header > nav > div > a > span { display: none; } }
به همین سادگی میتوانید دموی این منوی زیبا را در صفحه کدپن Codepen سایت مشاهده کنید.
برچسب:آشنایی با مفهوم Front-End و Back-End, آموزش front-end, آموزش responsive, آموزش طراحی سایت واکنش گرا, برنامه نویسی front end چیست, تگ Header, دانلود آموزش طراحی سایت واکنش گرا, دستور مدیا @Media, ریسپانسیو کردن, ساخت منوی ابشاری در css, ساخت منوی ابشاری متریال, ساخت منوی کشویی در css, طراحی متریال, طراحی متریال در وب, فرانت اند, فرانت اند چیست, فیلم آموزش طراحی ریسپانسیو, متریال, مفهوم front-end, منوی آبشاری ریسپانسیو, منوی ابشاری, منوی کشویی, واکنش گرا کردن عناصر