دانلود منبع CSS نقشه سایت یا Breadcrumbs

ایجاد ساختار

ساختار HTML بسیار ساده است: یک لیست مرتب از اقلام، پیچیده را به یک <nav>عنصر.

<nav>
   <ol class="cd-breadcrumb">
      <li><a href="#0">Home</a></li>
      <li><a href="#0">Gallery</a></li>
      <li><a href="#0">Web</a></li>
      <li class="current"><em>Project</em></li>
   </ol>
</nav>

افزودن سبک و دستورالعمل

ما 2 کلاس اصلی برای <ol>عنصر ایجاد کردیم : .cd-breadcrumbو .cd-multi-steps. اگر چه آنها یک سبک مشابه دارند، ما می خواستیم دو عنصر وب را از هم جدا کنیم، زیرا هدف آنها متفاوت است.

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

.cd-breadcrumb li::after, .cd-multi-steps li::after {
  display: inline-block;
  content: '\00bb';
  margin: 0 .6em;
  color: #959fa5;
}

ما یک کلاس از پیش تعیین شده CSS ایجاد کردیم - برای اضافه شدن به <ol>عنصر، که سبک کامپوننت وب را تغییر می دهد.

به عنوان مثال: اگر می خواهید از آیکون سفارشی به عنوان جدا کننده بین اقلام (مثلا شماره 2) استفاده کنید، فقط از.custom-separatorکلاس استفاده کنید .

<nav>
   <ol class="cd-breadcrumb custom-separator">
      <li><a href="#0">Home</a></li>
      <li><a href="#0">Gallery</a></li>
      <li><a href="#0">Web</a></li>
      <li class="current"><em>Project</em></li>
   </ol>
</nav>

سپس به یاد داشته باشید که تصویر پس زمینه :: پس از شبه عنصری از آیتم لیست:

.cd-breadcrumb.custom-separator li::after, 
.cd-multi-steps.custom-separator li::after {
  /* replace the default separator with a custom icon */
  content: '';
  height: 16px;
  width: 16px;
  background: url(../img/cd-custom-separator.svg) no-repeat center center;
  vertical-align: middle;
}

 .custom-iconsکلاس برای اضافه کردن آیکون های سفارشی قبل از هر مورد لیست است. یک بار دیگر شما باید CSS را بر اساس تصاویری که میخواهید استفاده کنید به روز کنید. در نسخه ی نمایشی ما یک فایل .svg به عنوان نمایه های تصویر مورد استفاده قرار دادیم:

.cd-breadcrumb.custom-icons li > *::before, 
.cd-multi-steps.custom-icons li > *::before {
  /* add a custom icon before each item */
  content: '';
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-right: .4em;
  margin-top: -2px;
  background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0;
  vertical-align: middle;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2) > *::before, 
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(2) > *::before {
  /* change custom icon using image sprites */
  background-position: -20px 0;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3) > *::before, 
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(3) > *::before {
  background-position: -40px 0;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4) > *::before, 
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(4) > *::before {
  background-position: -60px 0;
}
.cd-breadcrumb.custom-icons li.current:first-of-type > *::before, 
.cd-multi-steps.custom-icons li.current:first-of-type > *::before {
  /* change custom icon for the current item */
  background-position: 0 -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(2) > *::before, 
.cd-multi-steps.custom-icons li.current:nth-of-type(2) > *::before {
  background-position: -20px -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(3) > *::before, 
.cd-multi-steps.custom-icons li.current:nth-of-type(3) > *::before {
  background-position: -40px -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(4) > *::before, 
.cd-multi-steps.custom-icons li.current:nth-of-type(4) > *::before {
  background-position: -60px -20px;
}

.triangleکلاس تولید مثلث CSS پس از هر قلم از لیست. برای ایجاد جدایی بین اقلام ما از یک ترفند که در CSS-Tricks یافتیم استفاده کردیم.

.cd-breadcrumb.triangle li::after, 
  .cd-breadcrumb.triangle li > *::after {
    /* 
      li > *::after is the colored triangle after each item
      li::after is the white separator between two items
    */
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    content: '';
    height: 0;
    width: 0;
    /* 48px is the height of the <a> element */
    border: 24px solid transparent;
    border-right-width: 0;
    border-left-width: 20px;
  }
  .cd-breadcrumb.triangle li::after {
    /* this is the white separator between two items */
    z-index: 1;
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
    border-left-color: #ffffff;
    /* reset style */
    margin: 0;
  }
  .cd-breadcrumb.triangle li > *::after {
    /* this is the colored triangle after each element */
    z-index: 2;
    border-left-color: inherit;
  }
  .cd-breadcrumb.triangle li:last-of-type::after, 
  .cd-breadcrumb.triangle li:last-of-type > *::after {
    /* hide the triangle after the last step */
    display: none;
  }

کلاس های دیگر به خاطر داشته باشید عبارتند از: .text-center، .text-topو .text-bottomبه توان با استفاده .cd-multi-stepsاز کلاس برای تنظیم موقعیت از برچسب، و .countاگر شما می خواهید برای اضافه کردن یک شمارنده به شاخص چند مرحله است.

<nav>
   <ol class="cd-multi-steps text-bottom count">
      <li class="visited"><a href="#0">Cart</a></li>
      <li class="visited" ><a href="#0">Billing</a></li>
      <li class="current"><em>Delivery</em></li>
      <li><em>Review</em></li>
   </ol>
</nav>

ساده ترین راه برای فهم این که چگونه این منبع کار می کند میتواند فایل دانلودی موجود در باکس دانلود را دانلود فرمایید.