illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

9398 ۷ آذر ۹۲

با پیشرفت های اخیر 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 هم تنظیم کردیم تا زمانیکه ماوس روی هر لینک آمد، مثلث اضافه شده به بعد از هر لینک هم رنگش تغییر کنه.

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 15 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    معراج(۸ آذر ۱۳۹۲)

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

    • ‏‏
      مهشاد کلانتری(۸ آذر ۱۳۹۲)

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

  • ‏‏
    محمد سلطان زاده(۸ آذر ۱۳۹۲)

    ممنون

  • ‏‏
    سامان کیانی(۸ آذر ۱۳۹۲)

    با سلام
    شرمنده که سوالم رو اینجا مطرح میکنم
    من یک بخش تو قالبم دارم به نام دانلود رایگان
    میخوام کاربر نام خانوادگی و ایمیل رو ثبت کنه و بعد روی دکمه دانلود کلیک کنه تا لینک دانلود نمایش داده بشه
    برای این کار به صورت ترکیبی دارم از افزونه های
    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,,,

  • ‏‏
    کوهیار(۱۰ آذر ۱۳۹۲)

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

  • ‏‏

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

    • ‏‏
      لقمان آوند(۸ دی ۱۳۹۲)

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

      • ‏‏

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

      • ‏‏

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

  • ‏‏

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram