طراحی منوی تخت با استفاده از CSS

طراحی منوی تخت با استفاده از CSS

با پیشرفت های CSS و CSS3 در سالهای اخیر به جایی رسیده ایم که خیلی از تکنیک های قدیمی کدنویسی که به تصاویر پس زمینه نیاز داشته اند حالا کاملا با CSS طراحی می شوند. در این آموزش ما با نحوه ساخت یک منوی Breadcrumb با استفاده از روش طراحی مسطح بدون استفاده از تصویر نگاهی خواهیم انداخت. اما پیش از هر چیز بهتر است تا با مفهوم Breadcrumb در طراحی صفحات وب آشنا شویم. در واقع Breadcrumb یک راه بسیار ساده و مفید برای راهنمایی بهتر کاربران می باشد که تاثیر بسیار زیادی بر روی سئوی سایت دارد.

منویی که قرار است طراحی کنیم با استفاده از اشکال Chevron طراحی خواهد شد تا از ایده های محتواهای Drilled Down استفاده کند. قبلا برای اینکار باید از یک تصویر PNG برای ساخت شکل Chevron استفاده می کردیم اما حالا با استفاده از تکنیک Border های هوشمند می توانیم آن را با استفاده از CSS طراحی کنیم. حال شروع به طراحی قالب HTML منوی خود می کنیم. همانطور که می دانید در کد زیر هر <li> برابر با ایجاد یک گزینه است.

<div id="crumbs">
    <ul>
        <li><a href="#">Breadcrumb</a></li>
    </ul>
</div>

ابتدا کدهای سی اس اس مربوط به کل صفحه را به صورت زیر وارد ویرایشگر کد خود می کنیم:

body {
    margin: 200px;
    font-family: Helvetica;
    background: #d4f2ff;
}

در کدهای فوق صرفا سعی نموده ایم نوع فونت، رنگ کلی صفحه و Margin را تعریف کنیم.

#crumbs ul li a {
    display: block;
    float: left;
    height: 50px;
    background: #3498db;
    text-align: center;
    position: relative;
    margin: 0 10px 0 0;
    font-size: 20px;
    text-decoration: none;
    color: #fff;
}

کد اولیه CSS ما یک مستطیل آبی ساده بوجود می آورد. موقعیت متن نیز در مرکز شکل با ایجاد فضای خالی و فرورفتگی برابر از هر طرف قرار گرفته است. برای آن که عناصر صفحه کاملا بعد از شکل قرار گیرند ;position: relative اضافه شده است بنابرین عناصر بعدی صفحه با فاصله نسبی از این عناصر قرار خواهند گرفت.

 طراحی منوی تخت با استفاده از CSS

برای آنکه عناصر را در وسط صفحه قرار داده و نقطه ای هم که در کنار نوشته قرار گرفته را حذف کنیم، می بایست کدهای سی اس اس زیر را به کدهای قبل اضافه کنیم:

#crumbs {
    text-align: center;
}
#crumbs ul {
    list-style: none;
    display: inline-table;
}
#crumbs ul li {
    display: inline;
}

(لازم به ذکر است که کدهای فوق می بایست پس از Selector مرتبط با body قرار گیرند). حالا وقت آن رسیده تا شکل Chevron را با استفاده از CSS طراحی کرده و حالتی همچون تصویر زیر را ایجاد کنیم:

 طراحی منوی تخت با استفاده از CSS

برای همین از انتخابگر :after برای ساخت یک عنصر جدا از شکل استفاده می کنیم که بتوانیم آن را جداگانه طراحی کنیم. شکل مثلث با استفاده از Border های گوناگون CSS قابل طراحی است و همانطور که در تصویر می بینید یک مثلث آبی با ایجاد Border بالا و پایین طراحی شده است. رنگ قرمز تنها برای نمایش چگونگی انجام کار است اما وقتی آن را پنهان بسازیم فقط یک مثلث آبی خواهیم داشت. سپس موقعیت آن را absolute قرار می دهیم تا حرکت نکند.

#crumbs ul li a:after {
    content: "";
    border-top: 40px solid red;
    border-bottom: 40px solid red;
    border-left: 40px solid blue;
    position: absolute; right: -40px; top: 0;
}

پس از اعمال کدهای فوق با تصویری همچون تصویر زیر مواجه خواهیم شد:

 طراحی منوی تخت با استفاده از CSS

می بینیم که کار کمی مشکل دارد. برای رفع این مشکل می بایست به کدهایی که پیش از در نظر گرفتیم یک padding هم به صورت زیر بیفزاییم:

#crumbs ul li a {
    display: block;
    float: left;
    height: 50px;
    background: #3498db;
    text-align: center;
    position: relative;
    margin: 0 10px 0 0;
    font-size: 20px;
    text-decoration: none;
    color: #fff;
    padding: 30px 40px 0 80px;
}

افکت Border با مقادیر درست رنگ، به ما همان مثلث مورد نظر را تحویل می دهد که لینک منوی ما را درست شبیه شکل Chevron ایجاد می کند. به عبارت دیگر کدهای مربوط به رنگ که در ادامه آمده اند را در کد فوق جایگزین می کنیم:

#crumbs ul li a:after {
    content: "";
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #3498db;
    position: absolute; right: -40px; top: 0;
    z-index: 1;
}

به روش قبل ما می توانیم یک مثلث دیگر در سمت چپ شکل نیز ایجاد کنیم. البته این بار رنگ Border را همرنگ با پس زمینه صفحه قرار می دهیم تا قسمتهای آبی لینک را پنهان سازد.

#crumbs ul li a:before {
    content: "";
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #d4f2ff;
    position: absolute; left: 0; top: 0;
}

اکنون خروجی کدهای ما به صورت زیر در خواهد آمد:

 طراحی منوی تخت با استفاده از CSS

حال کدهای اچ تی ام ال خود را به صورت زیر تکمیل می کنیم:

<div id="crumbs">
    <ul>
        <li><a href="#1">One</a></li>
        <li><a href="#2">Two</a></li>
        <li><a href="#3">Three</a></li>
    </ul>
</div>

اکنون کار ما به پایان رسیده و پس از ذخیره کردن فایل HTML خود می توانیم خروجی کدها را در مرورگر مد نظر خود مشاهده کنیم:

 طراحی منوی تخت با استفاده از CSS

همانطور که در تصویر فوق مشاهده می شود هر گزینه با یک شکل Chevron جالب ایجاد می شود که دلیل آن هم خاصیت Border های مثلث سی اس اس و کمی Margin است که در کدهای خود استفاده کرده ایم. حال قصد داریم تا با تکمیل کدهای خود، افکتی به صورت تصویر زیر ایجاد کنیم:

 طراحی منوی تخت با استفاده از CSS

منوی Breadcrumb ما زمانی کامل می شود که افکت مثلث ها از ابتدای اولین گزینه و انتهای آخرین گزینه با استفاده از انتخاب کننده های :first-child و :last-child حذف شود. سپس کمی انحنا به گوشه های آنها با border-radius می دهیم. برای این منظور، کدهای زیر را به کدهای قبلی اضافه می کنیم:

#crumbs ul li:first-child a {
    border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
#crumbs ul li:first-child a:before {
    display: none;
}
#crumbs ul li:last-child a {
    padding-right: 80px;
    border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
    display: none;
}

و در انتها اضافه کردن Hover به لینک ها به جذابیت آنها کمک می کند. یادتان نرود که border-left-color را نیز تغییر دهید تا همراه با دیگر قسمتهای تغییر رنگ دهد.

#crumbs ul li a:hover {
    background: #fa5ba5;
}
#crumbs ul li a:hover:after {
    border-left-color: #fa5ba5;
}

در نهایت خروجی کدهای ما به صورت زیر خواهد بود:

 طراحی منوی تخت با استفاده از CSS