آموزش ساخت breadcrumb (مسیریاب) با css

- visibility ١۵ mode_comment

با پیشرفت های اخیر css تکنیک های قدیمی کدنویسی که در آنها بیشتر از تصاویر استفاده میشد، امروزه تنها با css قابل پیاده سازی است. در این آموزش قراره با هم یک breadcrumb را با سی اس اس و بدون استفاده از هیچ تصویری بسازیم. Breadcrumb به قابلیتی میگن که به کاربر مکان فعلی خودش را در سایت نشان میده.

نتیجه ی نهایی به صورت زیر خواهد بود:

نتیجه نهایی breadcrumb ساخته شده با css

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

مشاهده ی دمو

ابتدا کد اچ تی ام ال مورد نیاز را مینویسیم:

حالا نوبت به کدهای سی اس اس میرسه. من کدهای سی اس اس را جدا جدا مینویسم تا هر قسمت را توضیح بدم.

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

سپس کدهای سی اس اس زیر را مینویسیم:

با استفاده از انتخاب گر :after یک عنصر اضافی می سازیم که میتواند به صورت جداگانه استایل دهی شود و این عنصر دقیقا بعد از عنصر a که درون liهایی که کلاس عنصر والد آنها crumbs است قرار میگیرد. نتیجه کار:

همونطور که در شکل بالا میبینید، این مثلث سیاه رنگ تنها به وسیله تکنیک borderها ساخته شد. رنگ بوردرهای بالا و پایین را برای اینکه بهتر متوجه روند کار بشید سبز کردم ولی شما باید به جای green بنویسید transparent تا رنگ این بوردرها بی رنگ بشه و رنگ بکگراند body شما نشان داده بشه. رنگ بوردر راست هم به رنگ #0076c1 تغییر بدید.

کد بالا را به صورت زیر اصلاح کنید:

نتیجه:

از همان تکنیک بوردری قبلی استفاده میکنیم تا سمت راست لینک های breadcrumb را مقداری به داخل فرو ببریم.

توجه داشته باشید که این بار رنگ بوردر راست ما باید هم رنگ بکگراند صفحه باشد و چون بکگراند صفحه ی ما در اینجا سفید است پس رنگ سفید را به بوردر راست اختصاص می دهیم.

نتیجه کار تا به اینجا:

همونطوری که در شکل میبینید این مثلث اضافه شده به قبل از لینک، روی متن آن تاثیر گذاشته و فاصله این متن از راست خیلی کم شده. پس میایم padding: 5px 15px 5px 15px را که در اولین تکه کد سی اس اس این آموزش نوشتیم، حذف کرده و به جای آن می نویسیم: padding: 5px 25px 5px 15px

خب، درست شد.

کد اچ تی ام ال breadcrumb را به صورت زیر ویرایش میکنیم و مقداری لینک جدید به آن اضافه میکنیم:

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

میتونیم به این منوی breadcrumb خودمون استایل بیشتری بدیم و مثلث ها را از اولین و آخرین آیتم منو با کمک انتخاب گر های :first-child و :last-child حذف کنیم و همچنین گوشه های آنها را با استفاده از border-radius گرد کنیم:

Breadcrumb ما به این شکل در میاد:

تنها چیزی که باقی مونده افزودن افکت hover به این لینک هاست.

رنگ border-right-color هم تنظیم کردیم تا زمانیکه ماوس روی هر لینک آمد، مثلث اضافه شده به بعد از هر لینک هم رنگش تغییر کنه.

امیدوارم این آموزش مفید بوده باشه!

دانلود کدهای آموزش

comment دیدگاه کاربران

آموزش خوبی بود.
ولی دمو خراب بود.

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

سامان کیانی

با سلام
شرمنده که سوالم رو اینجا مطرح میکنم
من یک بخش تو قالبم دارم به نام دانلود رایگان
میخوام کاربر نام خانوادگی و ایمیل رو ثبت کنه و بعد روی دکمه دانلود کلیک کنه تا لینک دانلود نمایش داده بشه
برای این کار به صورت ترکیبی دارم از افزونه های
email before download
download monitor
contact-form
استفاده میکنم
منتها مشکل اینجاست که فرم ساز
contact-form
یک کدی میده که اون کد رو فقط باید تو قسمت نوشته های وردپرس قرارداد تا نمایش داده بشه
منظورم زمانی هستش که بر روی افزودن برگه یا افزودن نوشته کلیک میکنیم و کادر نوشتن ظاهر میشه باید اونجا کپی کنیم
بخش دانلود رایگان قالب من تو قسمت
sidebar right
هستش آیا میشه کاری کرد که از کدی که فرم ساز به ما میده در هرجایی که میخواهیم استفاده کنیم؟
ممنون میشم اگر اهنمایی کنید
این سوال رو در چندین انجمن مطرح کردم ولی کسی به من جواب نداده
با تشکر

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

< ?php echo do_shortcode('شورت کد مورد نظر'); ?>

sib_Sabz00

سلام ممنون از آموزشتون
میشه لطف کنید آموزش tab با css3 رو هم بذارید
ممنون

سامان کیانی

خیلی خیلی ممنونم از شما

کوهیار

ba tashakor az aghaie mohandes kalantar,,,

کوهیار

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

mm021

سلام اموزش با حالی بود یه سوال چه جوری باید جای (خانه) بجاش یه ایکون بزارم

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

mm021

تگ img رو که گزاشتم عکس هم میاد ولی اون پس زمینه ابی خراب میشه طول و عرض عکس ام 32*32 است

mm021

درست شد مشکل از اندازه ها بود

mahsa

آموزشهاتون عالیه
اما من میخوام داخل سایتم بزارمش و وقتی کاربر روی لینکی کلیک میکنه قشنگ بهش نشون بده کجای سایت قرار داره…
میشه اینم یه راهنمایی بکنید
ممنون

وحید صالحی

آموزش در این زمینه در سایت هست

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.