لطفا جاواسکریپت مرورگر خود را فعال سازید!

نحوه فعال سازی در کروم
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
نحوه فعال سازی در فایرفاکس
  1. ابتدا باید اینکارو بگنید
  2. بعدش اونکارو
طراحی منوی تخت با استفاده از سی اس اس

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

با پیشرفت های 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 یک طرح تخت منوی راهنما طراحی کنیم؟