به لطف توسعه CSS و CSS3 در سال های اخیر، ما به نقطه ای رسیده ایم که بسیاری از قدیمی ها راه حل های نرم افزاری، که شامل تصاویر پس زمینه است، اکنون می توان به طور کامل در CSS ایجاد کرد. در این آموزش، بدون نیاز به تکنیک تصویر پس‌زمینه معروف به نام روش «درب کشویی»، دنباله‌ای از پیوندهای ناوبری به نام «breadcrumb» را به سبک مسطح ایجاد می‌کنیم.
خرده های سوخاری که ما ایجاد خواهیم کرد به صورت شورون طراحی شده اند تا ایده محتوای ساختاریافته را تجسم کنند. قبلاً استفاده می کردیم تصویر پس زمینهکه در فرمت PNGبرای ایجاد این شکل شورون، و اکنون با یک تکنیک حاشیه هوشمندانه، می توانید همان افکت را فقط با استفاده از CSS ایجاد کنید.
ما با ایجاد پیوندهای ناوبری پودر سوخاری به عنوان یک لیست نامرتب شروع می کنیم. هر پودر سوخاری یک عنصر خواهد بود
#crumbs ul li a (نمایش: بلوک؛ شناور: سمت چپ؛ ارتفاع: 50 پیکسل؛ پس‌زمینه: #3498 دسی‌بل؛ تراز متن: مرکز؛ بالشتک: 30 پیکسل 40 پیکسل 0 40 پیکسل؛ موقعیت: نسبی؛ حاشیه: 0 10 پیکسل؛ فونت 0 10px : 20 پیکسل ؛ متن-تزیین : هیچ ؛ رنگ : #fff ؛ )
کد CSS اولیه هر لنگر آیتم لیست را به یک سبک مستطیل آبی منظم تنظیم می کند. متن در مرکز قرار می گیرد و از همه طرف بالشتک مساوی اضافه می شود. برای قرار دادن عناصر کاملاً بعدی، موقعیت: نسبی؛ ویژگی به آن عناصر اضافه می‌شود تا آن عناصر کاملاً موقعیت‌یافته نسبت به آن عنصر والد ارائه شوند.
#crumbs ul li a:after ( محتوا: ""؛ حاشیه بالا: 40 پیکسل قرمز یکدست؛ حاشیه پایین: 40 پیکسل قرمز یکدست؛ حاشیه سمت چپ: 40 پیکسل آبی ثابت؛ موقعیت: مطلق؛ سمت راست: -40 پیکسل؛ بالا: 0؛ )
اکنون یک افکت شورون در CSS ایجاد می کنیم که قبلا فقط با استفاده از یک تصویر پس زمینه قابل دستیابی بود. از انتخابگر :after برای ایجاد یک عنصر اضافی که می تواند به صورت جداگانه استایل دهی شود، استفاده کنید. شکل مثلثی با استفاده از حاشیه های مختلف CSS ایجاد می شود، بنابراین همانطور که در تصویر قبلی مشاهده می کنید، مثلث آبی را می توان با اعمال مرزهای بالا و پایین ایجاد کرد تا ناحیه پوشش را قطع کند. این حاشیه ها برای وضوح قرمز رنگ می شوند، اما اگر شفاف باشند، یک مثلث آبی ایجاد می شود. این اثر مرزی سپس با استفاده از موقعیت‌یابی مطلق به جای خود منتقل می‌شود.
حاشیه بالا: 40 پیکسل شفاف جامد. حاشیه پایین: 40 پیکسل جامد شفاف حاشیه سمت چپ: 40px جامد #3498db ;
افکت حاشیه با مقادیر رنگی صحیح مثلث مورد نظر را ایجاد می کند و به آرد سوخاری شکل شورون محبوب می دهد.
#crumbs ul li a:before ( محتوا : "" ؛ حاشیه بالا : 40 پیکسل جامد شفاف ؛ حاشیه پایین : 40 پیکسل شفاف شفاف ؛ حاشیه سمت چپ : 40 پیکسل جامد #d4f2ff ؛ موقعیت : مطلق ؛ سمت چپ : 0 ؛ بالا : 0 . )
با استفاده از همین اصول می توان شکل مثلثی دیگری را در سمت چپ آرد سوخاری اعمال کرد. این بار، رنگ حاشیه با رنگ پس‌زمینه همرنگ است تا قسمت‌هایی از رنگ پس‌زمینه آبی پیوند پنهان شود.
بالشتک : 30px 40px 0 80px ;
با اضافه شدن پیوندها به HTML، به لطف افکت مرزی مثلثی CSS و کمی حاشیه سمت راست، توالی خرده‌های سوخاری افزایش می‌یابد که با شورون‌هایی با شکل جالب از هم جدا می‌شوند.
#crumbs ul li:first-child a ( border-top-left-radius: 10px ; border-bottom-left-radius: 10px ; ) #crumbs ul li:first-child a:before (نمایش: هیچ ; ) #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 (نمایش: هیچکدام ;)
یک بلوک کامل از آرد سوخاری را می توان با حذف افکت مثلث از اول و آخرین عنصربا استفاده از انتخابگرهای :first-child و :last-child، پس از آن می توانید با استفاده از ویژگی border-radius، گوشه ها را کمی گرد کنید.
#crumbs ul li a:hover ( پس زمینه : #fa5ba5 ; ) #crumbs ul li a:hover :after (رنگ حاشیه-چپ: #fa5ba5 ; )
تنها چیزی که باقی می ماند اعمال افکت شناور روی لینک هاست. فراموش نکنید که مقدار خاصیت border-left-color را برای افکت مثلث در حالت شناور تغییر دهید تا کل پودر سوخاری تغییر رنگ دهد.
ترجمه - میز
سلام به خوانندگان عزیز. در این روز ما خلق کردن را یاد خواهیم گرفت آرد سوخاری زیبا برای سایت های معمولی و همچنین برای وبلاگ های وردپرسی. من به شما توصیه می کنم از این لحظه غافل نشوید، زیرا خرده ها مسیر مقاله یا اطلاعات شما را در سایت نشان می دهند، که ناوبری سایت و همچنین لینک های داخلی اضافی را بسیار تسهیل می کند.
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( رنگ حاشیه-چپ: # ccc; سمت راست: -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; ) #crumbs-two a:hover::after( border-left-color: #99db76; ) #breadcrumbs-two .current, #breadcrumbs-two .current:hover( font-weig ht:bold پس زمینه: هیچ ) #crumbs-two .current::after, #breadcrumbs-two .current::before( محتوا: عادی؛ )
مثال سوم
در مبحث سوم، عناصر از دو بخش تشکیل شده است.
#خرده نان-سه( سرریز: پنهان؛ عرض: 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( محتوا: عادی; )
مثال چهارم
#crumbs-four( سرریز: پنهان؛ عرض: 100%؛ ) #breadcrumbs-four li( شناور: سمت چپ؛ حاشیه: 0.5em 0 1em؛ ) #breadcrumbs-four 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; ) #breadcrumbs-four a:hover::before( پس زمینه: #efc9ab; ) #خرده نان-four a ::after( right: -.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( محتوا: عادی؛ )
مثال
همین، به نظر من خرده های بسیار شیک و در عین حال ساده ای هستند. علاوه بر این، هیچ تصویری وجود ندارد، به ترتیب، آنها سریعتر بارگذاری می شوند.
همه مثال‌ها در سبک‌ها از تگ استفاده می‌کنند شناور، که در هنگام تغییر رنگ عنصر، بنابراین اگر هیچ یک از رنگ های ارائه شده را دوست ندارید، می توانید به راحتی آن را با رنگ خود جایگزین کنید.
حالا وقت آن است که به قسمت دوم برویم، یعنی یکی از نمونه ها را به ما پیوست می کنیم وبلاگ وردپرس، برو
قسمت 2. نحوه پیوست کردن داده های Breadcrumb به وبلاگ وردپرس
و بنابراین، ابتدا باید افزونه را دانلود کنیم Breadcrumb NavXT،می توانید آن را دانلود کنید پس از دانلود و فعال سازی افزونه، باید تنظیماتی را انجام دهید:
تنظیمات در گزینه ها هستند. در برگه عمومیباید خط را پیدا کرد جدا کننده آرد سوخاریو مقدار استاندارد موجود را حذف کنید، به عبارت دیگر باید فیلد را خالی بگذارید.
همه چیز، با تکمیل افزونه، اکنون باید طرحی را که بیشتر دوست دارید انتخاب کنید. که در این موردیک مثال می تواند این سبک باشد:
این مثال دومدر بالا در مقاله قرار دارد.
ما این سبک ها را می گیریم و به سادگی کپی می کنیم و سپس آنها را به آن اضافه می کنیم style.cssتم شما، در هر مکانی که بیشتر دوست دارید، به شما توصیه می کنم ابتدا و انتهای سبک های کرامب را برجسته کنید، زیرا اگر در آینده بخواهید چیزی را در آنجا تغییر دهید، گیج خواهید شد.
حالا باید پودر سوخاری را مستقیماً به وبلاگ اضافه کنیم.
در مدیر وبلاگ پیدا می کنیم ظاهر ، سپس ویرایشگر، و انتخاب کنید single.php. بعد موارد زیر را اضافه کنید:
مهم
لطفاً توجه داشته باشید که عملکرد فراخوانی crumbs خود بین تگ ها است که شناسه آرد سوخاری-دو، فراموش نکنید که این شناسه را به مثالی که به استایل ها اضافه کرده اید تغییر دهید. به عنوان مثال، اگر این اولین مثال است (مثال بالا) باید به این صورت باشد:
اگر قالب وبلاگ شما شبیه قالب من است، به این معنا که پس‌زمینه خاکستری است و خود بلوک محتوا سفید است، بهتر است خرده‌ها مانند قالب من بالای بلوک قرار گیرند. چون آنها می توانند فریفته شوند خط جدیداگر نام خیلی طولانی باشد و باور کنید خیلی زیبا نیست. :-)
همین. دوستان عزیزدر صورت بروز هرگونه مشکل در نظرات بپرسید. به زودی میبینمت.
مقاله قبلی «پیمایش پودرهای سوخاری با مثلث در CSS» نحوه ایجاد منو با استفاده از آن را شرح داد CSS خالصبدون استفاده از گرافیک
این روش برای همه خوب است، به جز یک چیز - پشتیبانی از چنین منوی در مرورگرهای قدیمی مشکوک است. اما هنگام ترجمه این مقاله، پیوندی به روشی برای ایجاد ناوبری با استفاده از گرافیک ذکر شد.
مقاله خیلی وقت پیش نوشته شده است، اما روش کاملاً کار می کند. نویسنده مقاله Veerle Pieters است و خود این پست "Simple Scalable Based CSS breadcrumbs" نام دارد. در زیر نه حتی یک ترجمه آزاد از آن، بلکه بازگویی رایگان آن را ارائه می کنم.
چند روز پیش، وظیفه داشتم برای سایتی که روی آن کار می‌کردم، یک منوی ناوبری به سبک پودر سوخاری ایجاد کنم. فکر نمی کنم چنین منوی برای هر سایتی لازم باشد، اما در برخی موارد بسیار مفید و کاربردی است.
با این حال، این مثال، همانطور که بود، مبنایی است که می توان آن را گسترش داد و در عمل به کار برد. منو با استفاده از یک لیست گلوله ای معمولی ایجاد می شود
| 1 | ul |
اما ابتدا به نمونه ای که با آن کار خواهیم کرد نگاه می کنیم:
منو بسیار ساده است، همانطور که کدی که با آن آن را ایجاد خواهیم کرد.
کد HTML - لیست گلوله‌ای ul
همه آیتم های منو دارای پیوند هستند، به جز مورد آخر - "صفحه ای که هم اکنون در آن هستید" (صفحه ای که هم اکنون در آن هستید). در حین کار بر روی منو، تعجب کردم - آیا لیست مناسب ترین ساختار برای ایجاد یک منو است؟ من معتقدم که استفاده از لیست در این مورد یک قانون سختگیرانه نیست، اما به نظر من معنایی ترین و صحیح ترین گزینه است.
کد CSS - ایجاد سبک برای منو
ما سبک های کلی را برای منو تنظیم می کنیم - نشانگرها را حذف کرده و تورفتگی ها را مجدداً تنظیم می کنیم مرورگرهای فایرفاکس IE:
شناور را از طریق ویژگی برابر با ارتفاع کل منو کنید - . و رنگ متن را تنظیم کنید. در مرحله بعد، یک تصویر پس زمینه بریده شده از طرح بندی پیوند را قرار می دهیم. برای انجام این کار، فقط باید خود "فلش" را برش دهید:... که به سمت راست (100%) فشار می دهیم و دقیقاً به صورت عمودی (50%) قرار می دهیم. پیوند را نیز به سمت راست تورفتگی می کنیم
| 1 | padding-left: 15px |
تقریباً همه چیز قبلاً انجام شده است. تنظیم سبک برای متن پیوند باقی مانده است. زیر خط استاندارد را بردارید و رنگ آن را تغییر دهید:
.crumbs li a :link, .crumbs li a :visited (متن-تزیین: هیچکدام; رنگ: #777 ; )| 1 | : شناور |
| 1 | :تمرکز |
نتیجه کار ما در اینجا ارائه شده است:
یادداشت مترجم:
نویسنده مقاله تا حد امکان مثال و خود کد را به ترتیب ساده کرده است تا جایی که من متوجه شدم. واقعیت این است که گرادیان افقی خطی برای هر یک از آیتم های منو به وضوح در مثال قابل مشاهده است. با این حال، این در کد نشان داده نشد. خوب، مهم نیست - آیا واقعاً ایجاد یک گرادیان خطی در CSS3 مشکل دارد؟ خود کار انجام شده است!
ناوبری Breadcrumb به بازدیدکنندگان سایت کمک می کند تا ساختار سلسله مراتبی اسناد را پیمایش کنند و راه خود را پیدا کنند. سطح بالا. بنابراین اگر سایت قرار داده شود تعداد زیادی ازاسناد، سپس باید با "خرد نان" ارائه شود. در این آموزش کد CSS برای ایجاد گزینه های طراحی مختلف برای چنین ابزار ناوبری مورد نظر به شما ارائه می شود.
نشانه گذاری HTML
نشانه گذاری ساده و کم است. این بر اساس یک لیست نامرتب است.
css
بیایید با یک کوچک شروع کنیم CSS تنظیم مجددبرای لیست نامرتب ما:
اول (حاشیه: 0؛ بالشتک: 0؛ سبک فهرست: هیچکدام؛ )
برای طراحی آرد سوخاری ما از عناصر شبه استفاده می شود.
مثال اول
این مثال از یک تکنیک بسیار ساده استفاده می کند. یک مثلث روی قاب سمت راست با استفاده از عناصر کاذب که روی هم قرار گرفته اند ایجاد می شود. مثلث تیره برای ایجاد افکت حاشیه جابجا می شود.
#breadcrumbs-one( پس‌زمینه: #eee؛ حاشیه-عرض: 1px؛ حاشیه-سبک: جامد؛ حاشیه-رنگ: #f5f5f5 #e5e5e5 #ccc؛ حاشیه-شعاع: 5px؛ جعبه-سایه: 0 0 2px rgba(0, 0,0,.2؛ سرریز: پنهان؛ عرض: 100%؛ ) #breadcrumbs-one li( float: چپ؛ ) #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( رنگ حاشیه-چپ: #ccc;ri ght: -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; ) #crumbs-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( محتوا: عادی؛ )
ویژگی حاشیه-شعاع گوشه های مستطیل و مربع را گرد می کند. مربع می چرخد تا از آن الماس بسازد.
#خرده نان-سه( سرریز: پنهان؛ عرض: 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( محتوا: عادی; )
دو مستطیل با استفاده از شبه عناصر اضافه می شود. سپس گوشه ها را گرد می کنند.
#crumbs-four( سرریز: پنهان؛ عرض: 100%؛ ) #breadcrumbs-four li( شناور: سمت چپ؛ حاشیه: 0.5em 0 1em؛ ) #breadcrumbs-four 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; ) #breadcrumbs-four a:hover::before( پس زمینه: #efc9ab; ) #خرده نان-four a ::after( right: -.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
- بدون تصویر، بنابراین فقط به روز رسانی و نگهداری کنید.
- آسان برای مقیاس.
- با مرورگرهای قدیمی سازگار است.
در این آموزش با فرآیند ایجاد در بوت استرپ 3 و 4 آشنا شوید زنجیره های ناوبری("پودرهای سوخاری").
نشانه گذاری خرده نان
زنجیره های ناوبری ("خردهای نان"، خرده های نان) یک طرح ناوبری است که موقعیت فعلی کاربر را در سایت نشان می دهد. آنها برای نمایش اطلاعات سازماندهی شده به صورت سلسله مراتبی استفاده می شوند. به عنوان مثال، در یک فروشگاه اینترنتی، آرد سوخاری معمولاً بخش های زنجیره ای است. با کمک آنها، کاربر می تواند تعیین کند که در حال حاضر در کدام بخش است و همچنین به شما اجازه می دهد به بخش های بیشتری بروید. سطوح بالا، یعنی راه دیگری برای پیمایش در ساختار سایت ارائه دهید.
Breadcrumbs در Bootstrap به سادگی لیست های مرتب شده با خرده نان کلاس هستند. جداکننده لیست به طور خودکار با CSS (bootstrap.min.css) از طریق کلاس زیر اضافه می شود:
Breadcrumbs > li + li:before ( رنگ: #cccccc؛ محتوا: "/"؛ padding: 0 5px; )
مثال Breadcrumb با بوت استرپ.
یک ظاهر طراحی شده Breadcrumbs در Bootstrap
یک مثال دیگر:
خرده نان برای پیمایش اطلاعات آرشیو شده
طراحی غیر استاندارد پودر سوخاری
نمونه ای از ایجاد گزینه طراحی آرد سوخاری زیر را در نظر بگیرید:
نمونه ای از طرح آرد سوخاری در سایت
فرآیند ایجاد پودر سوخاری شامل توسعه ساختار و سبک های HTML (CSS) است.
Breadcrumb CSS:
/* خرده نان */ #breadcrumb (لیست به سبک: هیچ، نمایشگر: درون خطی، padding-left: 0px; ) #breadcrumb .icon (اندازه قلم: 14px; ) #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 - چپ: 15 پیکسل؛ -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 ( حاشیه: هیچ؛ ) #breadcrumb li a:before, #breadcrumb li a:after ( محتوا: ""؛ موقعیت: مطلق؛ بالا: 0؛ حاشیه: 0 جامد # cc2eaa; عرض حاشیه: 17 پیکسل 10 پیکسل؛ عرض: 0; ارتفاع: 0; ) #crumb li a:before ( سمت چپ: -20px؛ حاشیه-چپ-رنگ: شفاف؛ ) #crumb li a:after ( سمت چپ: 100%؛ حاشیه-رنگ: شفاف؛ رنگ حاشیه-چپ: #cc2eaa؛ ) #نان خرده نان در a:hover ( پس‌زمینه-رنگ: #a22587; ) #خرد نان در 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:
حفظ عنصر فعلی (اگر در یک زنجیره استفاده شود) با اضافه کردن کلاس فعلی به عنصر li انجام می شود.
