≡×منو

• ویندوز 10
• اینترنت، وای فای
• مفید
• ویندوز 7
• اشتباهات

سبک سازی آرد سوخاری. خرده نان در طراحی وب: برنامه ها و نمونه ها نشانه گذاری خرده نان

مقاله قبلی «پیمایش پودرهای سوخاری با مثلث در 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 مشکل دارد؟ خود کار انجام شده است!

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

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; ) #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( محتوا: عادی؛ )

مثال سوم

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

#خرده نان-سه( سرریز: پنهان؛ عرض: 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( محتوا: عادی؛ )

مثال

همین، به نظر من خرده های خیلی شیک و در عین حال ساده ای هستند. علاوه بر این، هیچ تصویری وجود ندارد، به ترتیب، آنها سریعتر بارگذاری می شوند.

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

حالا وقت آن است که به قسمت دوم برویم، یعنی یکی از نمونه ها را به وبلاگ وردپرس خود پیوست می کنیم، بیایید برویم.

قسمت 2. چگونه داده های Breadcrumb را به وبلاگ وردپرس ضمیمه کنیم

و بنابراین، ابتدا باید افزونه را دانلود کنیم Breadcrumb NavXT،می توانید آن را دانلود کنید. پس از دانلود و فعال شدن افزونه، باید تنظیماتی را انجام دهید:

تنظیمات در گزینه ها هستند. در برگه عمومیباید خط را پیدا کرد جدا کننده آرد سوخاریو مقدار استاندارد موجود را حذف کنید، به عبارت دیگر باید فیلد را خالی بگذارید.

همه چیز، با تکمیل افزونه، اکنون باید طرحی را که بیشتر دوست دارید انتخاب کنید. در این مورد، مثال این سبک خواهد بود:

این مثال دومدر بالا در مقاله قرار دارد.

ما این سبک ها را می گیریم و به سادگی کپی می کنیم و سپس آنها را به آن اضافه می کنیم style.cssتم شما، در هر مکانی که بیشتر دوست دارید، به شما توصیه می کنم ابتدا و انتهای سبک های خرده ها را برجسته کنید، زیرا اگر در آینده بخواهید چیزی را در آنجا تغییر دهید، گیج خواهید شد.

حالا باید پودر سوخاری را مستقیماً به وبلاگ اضافه کنیم.

در مدیر وبلاگ پیدا می کنیم ظاهر ، سپس ویرایشگر، و انتخاب کنید single.php. بعد موارد زیر را اضافه کنید:

مهم

لطفا توجه داشته باشید که عملکرد فراخوانی crumbs خود بین تگ ها است

که شناسه آرد سوخاری-دو، فراموش نکنید که این شناسه را به مثالی که به استایل ها اضافه کرده اید تغییر دهید. به عنوان مثال، اگر این اولین مثال است (مثال بالا) باید به این صورت باشد:

 

 

تبلیغ کنندگان | مخاطب