سبک سازی آرد سوخاری. استفاده از لیست ها شفافیت را با حاشیه اضافه کنید

تعداد زیادی از مطالب، مانند مقالات سایت، اغلب به صفحات جداگانه با 10-15 مقاله در هر صفحه تقسیم می شوند که منجر به کاهش بار سایت می شود. انتقال بین صفحات جداگانه از طریق شماره گذاری آنها انجام می شود، جایی که هر شماره به عنوان پیوندی به صفحه مربوطه عمل می کند. امکان نمایش تمام صفحات، تعداد معینی از آنها و یا فقط لینک های صفحه بعدی و قبلی وجود دارد. اینکه کدام گزینه را انتخاب کنید به طراحی سایت و ترجیحات شما بستگی دارد. یکی از راه های ممکنشماره گذاری در شکل نشان داده شده است. 2.

برنج. 2. صفحه بندی

برای انجام این شماره گذاری دوباره از یک لیست ساده استفاده می کنیم، حالا با کلاس پیجر، هر آیتم از این لیست لینکی به صفحه خواهد بود. برای برجسته کردن صفحه فعلی، اجازه دهید کلاس فعال را اضافه کنیم (مثال 2).

مثال 2: صفحه بندی

• 1
• 2
• 3
• 4
• 5
• 6

خط بین آیتم ها از طریق ویژگی border-bottom روی عنصر انجام می شود

. از آنجا که
یک عنصر بلوک است و تمام عرض موجود را اشغال می کند، باید با تنظیم عرض یا همانطور که در مثال نشان داده شده است با تنظیم نمایش با مقدار inline-block محدود شود. خط زیر اعداد است، بنابراین آیتم های منو تا نصف ارتفاعشان به پایین جابه جا می شوند.

اندازه تمام دایره ها دقیقاً از طریق عرض و ارتفاع تنظیم می شود و بنابراین دو مشکل وجود دارد. اولین مورد این است که پیوند بسیار کوچکتر از خود دایره است و کاربر از دست می دهد. دوم - پیوند در بالای دایره قرار دارد، اما نه در وسط آن. اولین مشکل به سادگی حل می شود - باید پیوندها را بلوک کنید، سپس آنها کل عرض و ارتفاع دایره را اشغال می کنند. در عین حال، پیوندها مربع باقی می مانند و کمی از پس زمینه رنگی فراتر می روند. اما این قابل مشاهده نیست و تنها زمانی قابل توجه می شود که ماوس را روی یکی از گوشه های پیوند قرار دهید. تراز متن با استفاده از ویژگی line-height که مقدار آن برابر با ارتفاع عنصر است انجام می شود. این روش به شما امکان می دهد متن را تا وسط ارتفاع عنصر تراز کنید و در آینده برای ما مفید خواهد بود.

ایجاد منو

منوی سایت یکی از راه های پیمایش در آن است. ساده ترین گزینه مجموعه ای از پیوندهای افقی است که شبیه خرده نان است. تفاوت این است که هیچ اشاره گر بین پیوندها وجود ندارد (شکل 3).



برنج. 3. منوی افقی

برای ایجاد چنین منویی از اصولی که در مثال های قبلی استفاده کرده بودیم استفاده می کنیم اما برای تغییر تغییرات تزئینی ایجاد می کنیم. منو دارای شیب کمی است، سایه ای کم رنگ در زیر آن وجود دارد و آیتم های منو با یک خط عمودی از هم جدا شده اند. خط خود غیر استاندارد است و از نوارهای خاکستری و سفید تشکیل شده است، بنابراین ما به طور جداگانه خط خود را به عناصر اضافه می کنیم.

• و (مثال 3). آنها به خوبی در کنار هم قرار می گیرند و جلوه یک نوار را ایجاد می کنند.

  مثال 3. منوی افقی

  • اولین وعده غذایی
  • دوره های اصلی
  • کمپوت

  گرادیان در این مثال با استفاده از تابع خطی-gradient اضافه می شود و سایه با استفاده از ویژگی box-shadow اضافه می شود.

  فهرست کشویی

  نوع پیچیده تری از منو، منوی کشویی نامیده می شود. هنگامی که نشانگر را روی آیتم ها نگه می دارید، یک منوی فرعی ظاهر می شود که قبلا نامرئی است (شکل 4). به محض دور شدن نشانگر از متن، منو دوباره پنهان می شود.

  

  برنج. 4. نمای منوی کشویی

  این نوع منو از نظر چیدمان کاملاً پیچیده است، بنابراین اجازه دهید آن را با جزئیات بیشتری تجزیه و تحلیل کنیم. ابتدا یک لیست تودرتو ایجاد می کنیم - آیتم های لیست اول به عنوان متن منوی اصلی عمل می کنند، لیست دوم در داخل عنصر است.

• به عنوان یک زیر منو عمل خواهد کرد. اگر منوی فرعی مورد نیاز نیست، تنها یک عنصر را ترک کنید
• ، آ
  به آن اضافه نکنید ساختار هر مورد به شرح زیر است.
  • آشپزخانه روسی
    • بیف استروگانف
    • غاز با سیب
    • کروپنیک نووگورود
    • خرچنگ در روسی

  اکنون باید سبک را برای عناصر مختلف تشخیص دهیم

  • برای تنظیم سبک برای آیتم های منو سطح اول و دوم. اگر فقط انتخابگر li را مشخص کنید، این استایل به طور کلی برای همه موارد اعمال می شود. بنابراین ما از انتخابگر .menu > li استفاده می کنیم، این فقط استایل را برای عناصر اعمال می کند
  • سطح اول. در نتیجه، سبک منوی افقی ما کمی تغییر می کند.

    /* صفر کردن و حذف نشانگرها از لیست */ .menu, .menu ul ( list-style: none; margin: 0; padding: 0; ) .menu ( background: linear-gradient (to bottom, #fff, #f1f2f2 )؛ /* گرادیان */ حاشیه: 1px جامد #999؛ /* گزینه های حاشیه */ padding: 0 5px؛ /* حاشیه ها */ قلم: 14px Arial، sans-serif؛ /* گزینه های قلم */ box-shadow: 0 2px 5px rgba(0,0,0,0.2)؛ /* سایه منو */ .menu > li (نمایش: بلوک درون خطی؛ /* خط افقی */ حاشیه سمت راست: 1px توپر #fff؛ /* سفید خط در سمت راست */ موقعیت: نسبی؛ /* موقعیت نسبی */ ) .menu a (تزیین متن: هیچکدام؛ /* حذف زیرخط */ رنگ: #4c4c4c؛ /* رنگ پیوند */ نمایشگر: بلوک؛ /* Block links */ ) .menu > li > a ( padding: 10px 15px; /* Margins */ border-right: 1px solid #d8d8d8; /* Right خاکستری خط */ موقعیت: نسبی؛ /* موقعیت نسبی */ z- index : 3; /* نمایش در بالای عناصر دیگر */) .menu ul (نمایش: هیچکدام؛ /* مخفی کردن منوی فرعی */)

    ما زیر منو را از طریق ویژگی display پنهان می کنیم، در نتیجه، منو باید مانند شکل زیر باشد. 3. همچنین مقادیر صفر برای لیست ها اضافه شده است، این برای ما در هنگام افزودن موارد فرعی مفید خواهد بود، به علاوه موقعیت یابی نسبی درگیر است، z-index بدون آن کار نخواهد کرد. و برای تحمیل صحیح برخی از عناصر بر برخی دیگر به آن نیاز داریم.

    می توانید به طور موقت نمایش زیر منوها را فعال کرده و ظاهر آنها را سفارشی کنید.

    منو ul ( موقعیت: مطلق؛ /* موقعیت مطلق */ نمایش: هیچکدام؛ /* مخفی کردن زیر منو */ عرض: 200 پیکسل؛ /* عرض منوی فرعی */ پس زمینه: #fff؛ /* رنگ پس زمینه */ box-shadow: 0 . ؛ /* رنگ متن */ )

    زمانی که ماوس را روی آیتم های منو می برید، نمایش زیر منو باقی می ماند. برای این کار از کلاس :hover شبه استفاده می کنیم و آن را به li اضافه می کنیم.

    منو li:hover ul (نمایش: بلوک؛ )

    این انتخابگر می گوید که استایل باید روی عنصر اعمال شود.

    ، در این حالت فقط زمانی نمایش داده می شود که نشانگر ماوس روی عنصر باشد
    • داخل یک ظرف با منوی کلاس.

      پس از آن، منوی ما کار می کند و زیر منو را در جایی که در دسترس است نمایش می دهد. آخرین لمس های تزئینی مربوط به سایه ها و روکش صحیح آنها وجود دارد. برای نمایش صحیح سایه در زیر آیتم های منو سطح اول، یک شبه عنصر خالی از طریق ::before ایجاد کنید، یک سایه برای آن تنظیم کنید و آن را در زیر پیوند قرار دهید (در اینجا z-index برای و مفید).

      Menu > li:hover::before ( محتوا: "" سایه: 0 5 پیکسل 10 پیکسل #666؛ /* گزینه های سایه */ موقعیت: مطلق؛ /* موقعیت یابی مطلق */ )

      کد نهایی در مثال 4 نشان داده شده است.

      مثال 4 - منوی کشویی

      • آشپزخانه روسی
        • بیف استروگانف
        • غاز با سیب
        • کروپنیک نووگورود
        • خرچنگ در روسی
      • غذای اوکراینی
        • وارنیکی
        • کباب در خارکف
        • کاپوستنیاک چرنیهیو
        • Potaptsy با گوجه فرنگی
      • آشپزخانه قفقازی

      با درود. Breadcrumbs یک بلوک کاملاً مفید در هر وب سایتی است زیرا به شما امکان می دهد مسیر کامل صفحه ای را که در حال حاضر در آن هستید مشاهده کنید. و امروز به شما خواهم گفت که چگونه به آرد سوخاری در css حالت دهید؟ نه خلق کردن، یعنی ترتیب دادن. به طور کلی، گزینه های زیادی وجود دارد، من به دو مورد اشاره می کنم.

      یک گزینه طراحی ساده - بدون تصویر

      کد html خرده نان را تقلید می کند. بگذارید اینگونه باشد:

      در اصل، شما فقط می توانید یک براکت زاویه قرار دهید، اما هیچ راهی برای کنترل ضخامت خط وجود نخواهد داشت. من پیشنهاد می کنم این کار را با کمک تحولات متفاوت انجام دهم. این کدی است که این کار را انجام می دهد:

      Cumbs1 a:not(:last-child):after(
      محتوا: ""؛
      صفحه نمایش: بلوک درون خطی
      عرض: 5 پیکسل
      ارتفاع: 5px;
      حاشیه بالا: 2 پیکسل سیاه و سفید یکدست؛
      حاشیه سمت راست: 2px یکدست سیاه.
      تبدیل: چرخش (45 درجه)؛
      حاشیه سمت چپ: 5 پیکسل
      }
      cumbs1 a:hover(
      رنگ نارنجی؛
      }

      شاید برای شما انتخابگرهای پیچیده ای باشد، پس این مقاله را بررسی کنید. نکته اصلی این است: استفاده از شبه عنصر (درباره چیستی و نحوه استفاده - ) پس از آن جداکننده ما را به انتهای هر پیوند اضافه می کند. با استفاده از دو قاب شکل گرفته و 45 درجه چرخیده است. ما همچنین یک رنگ نارنجی به پیوندهای شناور اضافه می کنیم. در اینجا، در اصل، و تمام طراحی.

      یکی دیگر از گزینه های طراحی - با یک عکس

      در این مورد، آرد سوخاری جالب تر به نظر می رسد، مانند این:
      
      برای این کار به یک تصویر و چند سبک css نیاز داریم:

      کامبز2(
      پس زمینه: نارنجی؛
      حداکثر عرض: 250 پیکسل
      }
      .cumbs2 a(
      صفحه نمایش: بلوک درون خطی
      padding: 7px 0
      رنگ: #000;
      }
      cumbs2 a:not(:last-child)(
      پس زمینه: url(arrow.png) بدون تکرار 100% 50%;
      padding-right: 33px;
      }

      کد htmlنقل نمی کنم، چون مثل مورد اول است. اینجا از کجا شروع کنیم؟ ابتدا رنگ پس زمینه و اندازه کل بلوک را با پودر سوخاری تعریف می کنیم. در مرحله بعد، سبک های کلی پیوندها را تنظیم می کنیم - نوع بلوک درون خطی، تورفتگی در بالا و پایین، و رنگ.

      مرحله بعدی جالب ترین است - با استفاده از کلاس نه شبه، همه پیوندهای موجود در بلوک را انتخاب کنید، به جز آخرین مورد، و تصویر پس زمینه arrow.png را برای آنها، بدون تکرار، با موقعیت پس زمینه در وسط تنظیم کنید. ارتفاع و در انتها در عرض یک پیوند. دو پیوند اول فقط برای قرار دادن تصویر در سمت راست به تورفتگی داخلی نیاز دارند. اگر آنجا نبود، عکس به متن برخورد می کرد.

      اینکه چگونه کلاس غیر شبه کار می کند، فکر می کنم قبلاً حدس زده اید - همه عناصر را انتخاب می کند، به جز مواردی که در پرانتز نشان داده شده است. اگر چیزی باشد، در آینده یادداشت کوتاه دیگری در مورد کار با شبه کلاس:not خواهم نوشت، جایی که همه چیز واضح تر خواهد بود. خوب، در اینجا 2 طرح ساده برای آرد سوخاری وجود دارد که می توانید از آنها برای درست کردن خودتان استفاده کنید.

      در این آموزش، نحوه ایجاد پودر سوخاری در بوت استرپ 3 و 4 را یاد خواهید گرفت.

      نشانه گذاری خرده نان

      زنجیره های ناوبری ("نان خرده ها"، سوخاری ها) یک طرح ناوبری است که موقعیت فعلی کاربر را در سایت نشان می دهد. آنها برای نمایش اطلاعات سازمان یافته به صورت سلسله مراتبی استفاده می شوند. به عنوان مثال، در یک فروشگاه اینترنتی، آرد سوخاری معمولا بخش های زنجیره ای هستند. با کمک آنها، کاربر می تواند تعیین کند که در حال حاضر در کدام بخش است و همچنین به شما اجازه می دهد تا به بخش های سطوح بالاتر بروید، یعنی. راه دیگری برای پیمایش در ساختار سایت ارائه دهید.

      Breadcrumbs در بوت استرپ به سادگی لیست های مرتب شده با خرده نان کلاس هستند. جداکننده لیست به طور خودکار با CSS (bootstrap.min.css) از طریق کلاس زیر اضافه می شود:

      خرده نان > li + li:before ( رنگ: #cccccc؛ محتوا: "/"؛ padding: 0 5px؛ )

      مثال Breadcrumb با بوت استرپ.

      1. خانه
      1. خانه
      2. پردازنده ها
      1. خانه
      2. پردازنده ها
      3. اینتل
      یک ظاهر طراحی شده Breadcrumbs در Bootstrap

      یک مثال دیگر:

      1. خانه
      2. 2013
      3. نوامبر
      خرده نان برای پیمایش اطلاعات آرشیو شده

      طراحی غیر استاندارد پودر سوخاری

      نمونه ای از ایجاد گزینه طراحی آرد سوخاری زیر را در نظر بگیرید:

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

      فرآیند ایجاد پودر سوخاری شامل توسعه ساختار و سبک های HTML (CSS) است.

      Breadcrumb CSS:

      /* پودر سوخاری */ #breadcrumb (سبک لیست: هیچ، نمایشگر: بلوک درون خطی؛ padding-left: 0px; ) #breadcrumb .icon (اندازه قلم: 14 پیکسل؛ ) #breadcrumb li ( شناور: چپ؛ ) # خرده نان li a ( رنگ: #fff؛ نمایش: بلوک؛ پس‌زمینه: #cc2eaa؛ متن-تزیین: هیچکدام؛ موقعیت: نسبی؛ ارتفاع: 34 پیکسل؛ ارتفاع خط: 34 پیکسل؛ بالشتک: 0 10 پیکسل 0 5 پیکسل؛ تراز متن: مرکز حاشیه-راست: 23 پیکسل؛ -webkit-user-select: هیچ؛ -moz-user-select: هیچ؛ -ms-user-select: هیچ؛ کاربر-انتخاب: هیچ؛ ) #breadcrumb li:first-child a ( padding -left: 15px؛ -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px; border-radius: 4px 0 0 4px; ) #breadcrumb li:first-child a:before ( حاشیه: هیچ ; ) #breadcrumb li:last-child a ( padding-right: 15px; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0; border-radius: 0 4px 4px 0; ) # خرده نان li:last-child a:after ( حاشیه: هیچ؛ ) #خرده نان li a:before, #breadcrumb li a:after ( محتوا: ""؛ موقعیت: مطلق؛ بالا: 0؛ حاشیه: 0 جامد #cc2eaa; عرض حاشیه: 17 پیکسل 10 پیکسل؛ عرض: 0; ارتفاع: 0; ) #crumb li a:before ( چپ: -20px؛ حاشیه-چپ-رنگ: شفاف؛ ) #خرده نان li a:after ( سمت چپ: 100%؛ حاشیه-رنگ: شفاف؛ رنگ حاشیه-چپ: #cc2eaa؛ ) #breadcrumb li a:hover ( پس‌زمینه-رنگ: #a22587; ) #crumb li a:hover:before ( border-color: #a22587; border-left-color: transparent; ) #breadcrumb li a:hover:after ( حاشیه -left-color: #a22587; ) #breadcrumb li a:active ( background-color: #a22587; ) #breadcrumb li a:active:before (رنگ حاشیه: #a22587؛ رنگ حاشیه چپ: شفاف؛ ) # پودر سوخاری li a:active:after ( حاشیه-چپ-رنگ: #a22587; ) #breadcrumb li. جریان a ( اشاره گر-رویدادها: هیچکدام؛ مکان نما: مجاز نیست؛ فیلتر: آلفا(تعوض=65)؛ -webkit-box -shadow: هیچ؛ box-shadow: هیچ؛ کدورت: 0.65؛ )

      تغییرات رنگ با ویرایش مقادیر خصوصیات CSS مربوطه انجام می شود.

      نشانه گذاری HTML:

      1. خانه
      2. تجهیزات جانبی
      3. فرآیندها
      4. اینتل

      حفظ عنصر فعلی (اگر در یک زنجیره استفاده شود) با افزودن کلاس فعلی به عنصر li انجام می شود.

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

      نشانه گذاری HTML

      نشانه گذاری ساده و حداقل است. این بر اساس یک لیست نامرتب است.

      • لورم اپیسوم
      • Vivamus nisi eros
      • Nulla sed lorem risus
      • Nam iaculis commodo
      • شما اینجایید

      css

      ابتدا، اجازه دهید یک تنظیم مجدد CSS در لیست نامرتب خود انجام دهیم:

      Ul (حاشیه: 0؛ بالشتک: 0؛ سبک فهرست: هیچکدام؛ )

      برای طراحی آرد سوخاری ما از عناصر شبه استفاده می شود.

      مثال اول

      این مثال از یک تکنیک بسیار ساده استفاده می کند. یک مثلث روی قاب سمت راست با استفاده از عناصر کاذب که روی هم قرار گرفته اند ایجاد می شود. مثلث تیره برای ایجاد یک افکت حاشیه جابجا می شود.

      

      #breadcrumbs-one( پس‌زمینه: #eee؛ حاشیه-عرض: 1px؛ حاشیه-سبک: جامد؛ حاشیه-رنگ: #f5f5f5 #e5e5e5 #ccc؛ حاشیه-شعاع: 5px؛ جعبه-سایه: 0 0 2px rgba(0, 0,0,.2؛ سرریز: پنهان؛ عرض: 100%؛ ) #breadcrumbs-one li( float: left; ) #breadcrumbs-one a( padding: 0.7em 1em .7em 2em; float: left; text- دکوراسیون: هیچ‌کدام؛ رنگ: #444؛ موقعیت: نسبی؛ متن-سایه: 0 1px 0 rgba(255,255,255,.5)؛ پس‌زمینه رنگ: #ddd؛ پس‌زمینه-تصویر: خطی-gradient (به راست، #f5f5f5، # ddd)؛ ) #breadcrumbs-one li:first-child a( padding-left: 1em; border-radius: 5px 0 0 5px; ) #breadcrumbs-one a:hover( background: #fff; ) #breadcrumbs-one a ::after, #breadcrumbs-one a::before( محتوا: ""؛ موقعیت: مطلق؛ بالا: 50%؛ حاشیه بالا: -1.5em؛ حاشیه بالا: 1.5em شفاف؛ حاشیه پایین: 1.5em شفاف جامد؛ حاشیه-چپ: 1em جامد؛ راست: -1em؛ ) #breadcrumbs-one a::after( z-index: 2; border-left-color: #ddd; ) #breadcrumbs-one a::before( حاشیه-چپ-رنگ: #cccc;راست: -1.1em; z-index: 1; ) #breadcrumbs-one a:hover::after( border-left-color: #fff; ) #breadcrumbs-one .current, #breadcrumbs-one .current:hover( font-weight: bold; background: none; ) # پودر سوخاری-one .current::after, #breadcrumbs-one .current::before( محتوا: عادی؛ )

      اشکال CSS با شبه عناصری که قبل و بعد از یک عنصر قرار می گیرند ساخته می شوند.

      

      #خرده نان-دو( سرریز: پنهان؛ عرض: 100%؛ ) #خرده نان-دو لی( شناور: سمت چپ؛ حاشیه: 0.5em 0 1em؛ ) #خرده نان-دو a( پس زمینه: #ddd؛ بالشتک: 0.7em 1em ؛ شناور: سمت چپ؛ متن-تزیین: هیچکدام؛ رنگ: #444؛ متن-سایه: 0 1px 0 rgba(255,255,255,.5)؛ موقعیت: نسبی؛ ) #breadcrumbs-two a:hover( پس زمینه: #99db76; ) #breadcrumbs-two a::before( محتوا: ""؛ موقعیت: مطلق؛ بالا: 50%؛ حاشیه بالا: -1.5em؛ حاشیه-عرض: 1.5em 0 1.5em 1em؛ حاشیه-سبک: جامد؛ حاشیه- رنگ: #ddd #ddd #ddd شفاف؛ سمت چپ: -1em؛ ) #خرده نان-دو a:hover::before( border-color: #99db76 #99db76 #99db76 transparent; ) #breadcrumbs-دو a::after( محتوا : ""؛ موقعیت: مطلق؛ بالا: 50%؛ حاشیه بالا: -1.5em؛ حاشیه بالا: 1.5em شفاف شفاف؛ حاشیه پایین: 1.5em شفاف؛ حاشیه سمت چپ: 1em جامد #ddd؛ سمت راست: -1em; ) #breadcrumbs-two a:hover::after( border-left-color: #99db76; ) #breadcrumbs-two .current, #breadcrumbs-two .current:hover( font-weight: bold; پس زمینه: هیچ ) #crumbs-two .current::after, #breadcrumbs-two .current::before( محتوا: عادی؛ )

      ویژگی حاشیه-radius گوشه های مستطیل ها و مربع ها را گرد می کند. مربع می چرخد ​​تا از آن الماس بسازد.

      

      #خرده نان-سه( سرریز: پنهان؛ عرض: 100%؛ ) #خرده نان-سه لی( شناور: سمت چپ؛ حاشیه: 0 2em 0 0؛ ) #خرده نان-سه a( بالشتک: 0.7em 1em .7em 2em؛ شناور: سمت چپ؛ متن-تزیین: هیچکدام؛ رنگ: #444؛ پس زمینه: #ddd؛ موقعیت: نسبی؛ z-index: 1؛ text-shadow: 0 1px 0 rgba(255,255,255,.5)؛ حاشیه حاشیه: 0.4em 0 0 .4em; ) #breadcrumbs-three a:hover( background: #abe0ef; ) #breadcrumbs-three a::after( پس زمینه: #ddd؛ محتوا: ""؛ ارتفاع: 2.5em؛ حاشیه بالا: -1.25em ؛ موقعیت: مطلق؛ سمت راست: -1em؛ بالا: 50٪؛ عرض: 2.5em؛ z-index: -1؛ تبدیل: چرخش (45 درجه)؛ حاشیه-شعاع: 0.4em؛ ) #خرده نان-سه a:hover: :after( background: #abe0ef; ) #breadcrumbs-three .current, #breadcrumbs-three .current:hover( font-weight: bold; background: none; ) #breadcrumbs-three .current::after( content: normal; )

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

      

      #خرده نان-چهار( سرریز: پنهان؛ عرض: 100%؛ ) #خرده نان-چهار لی ( شناور: سمت چپ؛ حاشیه: 0.5em 0 1em؛ ) #خرده نان-چهار a( پس زمینه: #ddd؛ بالشتک: 0.7em 1em ؛ شناور: سمت چپ؛ متن-تزیین: هیچکدام؛ رنگ: #444؛ متن-سایه: 0 1px 0 rgba(255,255,255,.5)؛ موقعیت: نسبی؛ ) #breadcrumbs-four a:hover( پس زمینه: #efc9ab; ) #خرده نان-چهار a::قبل، #خرده نان-چهار a::after( محتوا:""؛ موقعیت:مطلق؛ بالا: 0؛ پایین: 0؛ عرض: 1em؛ پس‌زمینه: #ddd؛ تبدیل: کج (-10 درجه ) ) #خرده نان-چهار a::before( چپ: -.5em; حاشیه-شعاع: 5px 0 0 5px; ) #خرده نان-چهار a:hover::before( پس زمینه: #efc9ab; ) #خرده نان-چهار a ::after( سمت راست: -.5em; border-radius: 0 5px 5px 0; ) #breadcrumbs-four a:hover::after( background: #efc9ab; ) #breadcrumbs-four .current, #breadcrumbs-four .current :hover( فونت-وزن: پررنگ; پس زمینه: هیچکدام؛ ) #breadcrumbs-four .current::after, #breadcrumbs-four .current::prefore( محتوا: عادی؛ )

      مزایای طراحی CSS3 Breadcrumb

      • بدون تصویر، بنابراین فقط به روز رسانی و نگهداری کنید.
      • آسان به مقیاس.
      • با مرورگرهای قدیمی سازگار است.

      مقاله قبلی «پیمایش پودرهای سوخاری با مثلث در CSS» نحوه ایجاد یک منو با CSS خالص، بدون استفاده از گرافیک را توضیح داد.

      این روش برای همه خوب است، به جز یک چیز - پشتیبانی از چنین منوی در مرورگرهای قدیمی مشکوک است. اما هنگام ترجمه این مقاله، پیوندی به روشی برای ایجاد ناوبری با استفاده از گرافیک ذکر شد.

      مقاله خیلی وقت پیش نوشته شده است، اما روش کاملاً کار می کند. نویسنده مقاله Veerle Pieters است و خود این پست "Simple Scalable Based CSS breadcrumbs" نام دارد. در زیر نه حتی یک ترجمه آزاد از آن، بلکه بازگویی رایگان آن را ارائه می کنم.

      چند روز پیش وظیفه داشتم برای سایتی که روی آن کار می کردم، یک منوی ناوبری به سبک خرده نان ایجاد کنم. به نظر من چنین منوی برای هر سایتی لازم نیست، اما در برخی موارد بسیار مفید و کاربردی است.

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

      1

      ul

      .

      اما ابتدا به نمونه ای که با آن کار خواهیم کرد نگاه می کنیم:

      منو بسیار ساده است، همانطور که کدی که با آن آن را ایجاد خواهیم کرد.

      کد HTML - لیست گلوله‌ای ul

      • صفحه اصلی
      • بخش اصلی
      • بخش فرعی
      • بخش فرعی
      • صفحه ای که در حال حاضر در آن هستید

      همه آیتم های منو دارای پیوند هستند، به جز مورد آخر - "صفحه ای که اکنون در آن هستید" (صفحه ای که اکنون در آن هستید). در حین کار روی منو، تعجب کردم - آیا لیست مناسب ترین ساختار برای ایجاد یک منو است؟ من معتقدم که استفاده از لیست در این مورد یک قانون سختگیرانه نیست، اما به نظر من معنایی ترین و صحیح ترین گزینه است.

      کد CSS - ایجاد سبک برای منو

      ما سبک های کلی را برای منو تنظیم می کنیم - نشانگرها را حذف کرده و تورفتگی ها را در مرورگرهای فایرفاکس، IE بازنشانی می کنیم:

      شناور را از طریق ویژگی برابر با ارتفاع کل منو کنید - . و رنگ متن را تنظیم کنید. در مرحله بعد، یک تصویر پس زمینه بریده شده از طرح بندی پیوند را قرار می دهیم. برای انجام این کار، شما باید فقط خود "فلش" را برش دهید:

      ... که به سمت راست (100%) فشار می دهیم و دقیقاً به صورت عمودی (50%) قرار می دهیم. پیوند را نیز به سمت راست تورفتگی می کنیم

      1	padding-left: 15px

      ، که حاوی تصویر پس‌زمینه (پیکان برش) است: .crumbs li a (نمایش: بلوک؛ بالشتک: 0 15 پیکسل 0 0؛ پس‌زمینه: url(img/crumbs.gif) 100% 50% بدون تکرار؛ )

      تقریباً همه چیز قبلاً انجام شده است. تنظیم سبک برای متن پیوند باقی مانده است. زیر خط استاندارد را بردارید و رنگ آن را تغییر دهید:

      .crumbs li a :link, .crumbs li a :visited (تزیین متن: هیچکدام؛ رنگ: #777؛ )

      1

      : شناور

      و

      1

      :تمرکز

      . هنگامی که ماوس را نگه می دارید یا فوکوس صفحه کلید را دریافت می کنید، رنگ متن پیوند تغییر می کند: .crumbs li a :hover .crumbs li a :focus (رنگ : #dd2c0d ; )

      نتیجه کار ما در اینجا ارائه شده است:

      یادداشت مترجم:

      نویسنده مقاله تا حد امکان مثال و خود کد را به ترتیب ساده کرده است تا جایی که من متوجه شدم. واقعیت این است که گرادیان افقی خطی برای هر یک از آیتم های منو به وضوح در مثال قابل مشاهده است. با این حال، این در کد نشان داده نشد. خوب، مهم نیست - آیا واقعاً ایجاد یک گرادیان خطی در CSS3 مشکل دارد؟ خود کار انجام شده است!