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

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



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

طراحی قالب واکنش گرا با بوت استرپ 3 : قسمت چهارم - منو - بخش دوم

39 16348 ۲۱ فروردین ۹۳

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

شما الان اگر فایل index.html رو داخل مرورگر باز کنید و روی آیتم 4 منو که به صورت dropdown هست کلیک کنید، یا مثلا پنجره مرورگرتون رو کوچیک کنید آیتم های منو حذف میشه و یه دکمه به جاش میاد که وقتی روش کلیک میکنید آیتم های منو ظاهر میشه، ولی خب الان که کار نمیکنه و به خاطره اینه که فایل جاوااسکریپت مربوطه رو به سندمون اضافه نکردیم. برای این کار کافیه ابتدا فایلهای جاوااسکریپ پلاگین های بوت استرپ یعنی dropdown.js و collapse.js و transition.js رو از پوشه vendor\assets\javascripts\bootstrap بردارید و اون رو داخل پوشه js که در پوشه mytheme خودتون هست (bootstrap-sass-master\vendor\assets\mytheme) بریزید و بعد داخل فایل index.html خطهای زیر رو قبل از بسته شدن تگ body بنویسید.

RWD-bootstrap3-2-14

بیاید رنگ این dropdown رو هم درست کنیم. فایل _variables.scss رو باز کنید و تغییرات رو مثل تصویر زیر اعمال کنید.

RWD-bootstrap3-2-15

و یه توضیحی راجع به متغیرهایی که مقدارشون رو عوض کردیم:

$dropdown-bg : رنگ بکگراند منوی dropdown

$dropdown-fallback-border : مقدار خصوصیت border-color منوی dropdown برای IE8

$dropdown-link-color : رنگ متن لینک های dropdown

$dropdown-link-hover-color : رنگ متن لینک های dropdown وقتی ماوس روی این لینک ها میاد

$dropdown-link-hover-bg : رنگ بکگراند لینک های dropdown وقتی ماوس روی این لینک ها میاد

$dropdown-link-active-color : رنگ متن لینک های dropdown وقتی کلاس .active دارند

$dropdown-link-active-bg : رنگ بکگراند لینک های dropdown وقتی کلاس .active دارند

قسمت بعدی فونت منو هست. کلا این فونت فعلی بوت استرپ برای فارسی جالب نیست و قراره به Tahoma تغییرش بدیم. اول داخل فایل _variables.scss متغیری تعریف میکنیم تا اسم فونت رو نگه داری کنه.

RWD-bootstrap3-2-16

و بعد مقدار متغیر $font-family-base رو به $tahoma-font-family تغییر میدیم. ضمنا سایز فونت 14px هست که به نظرم زیاده و میخوایم 12px باشه پس مقدار متغیر $font-size-base رو هم تغییر میدیم.

RWD-bootstrap3-2-17

ازونجایی هم که فونت Tahoma برای سایزهای بزرگ یکم بیریخته پس برای سایزهای بزرگ نوشته هامون از فونت DroidKufi-Bold استفاده میکنیم. میتونید از اینجا این فونت رو دانلود کنید و داخل پوشه font که در پوشه mytheme هست (bootstrap-sass-master\vendor\assets\mytheme\font) این فایل رو از حالت فشرده خارج کنید. حالا داخل فایل _variables.scss کد زیر رو بنویسید:

RWD-bootstrap3-2-18

برای اینکه brand داخل منو که سایز بزرگتری داره از این فونت DroidKufiBold استفاده کنه کافیه فایل _navbar.scss رو باز کنیم و کد زیر رو برای سلکتور .navbar-brand بنویسیم:

RWD-bootstrap3-2-19

همونطور که میدونید بوت استرپ آیکون هاش رو به صورت فونت حاضر کرده و باید این فونت رو داشته باشیم تا بتونیم از آیکون هاش استفاده کنیم. تا اینجا اگر دقت کرده باشید دکمه جستجومون آیکونش به صورت مربعی شده و به خاطر اینه که فایل های فونت بوت استرپ رو داخل پروژمون اضافه نکردیم. برای اینکار از پوشه bootstrap-sass-master\vendor\assets\fonts\bootstrap فونت های بوت استرپ رو کپی کنید و داخل پوشه فونت mytheme خودمون (bootstrap-sass-master\vendor\assets\mytheme\font) پیست کنید. بعدش از داخل فایل _variables.scss مقدار متغیر $icon-font-path رو به "../font/" تغییر بدید.

خب! آیکون دکمه جستجو هم درست شد. حالا میمونه رنگ دکمه و input جستجو. فایل _navbar.scss رو باز کنید و کدهای زیر رو برای سلکتور .navbar-form بنویسید:

RWD-bootstrap3-2-20

box-shadow و placeholder میکسین هایی هستند که بوت استرپ از قبل خودش تعریف کرده و تمام میکسین ها داخل فایل _mixins.scss هستند. قبل از اینکه میکسینی تعریف کنید اول یه نگاه به این فایل بندازید که از قبل تعریف نشده باشه.

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

اگر دموی قالب رو دیده باشید، منو، یکم box-shadow هم داره. برای اینکه box-shadow هم به منو اضافه کنیم داخل فایل _navbar.scss کد زیر رو برای سلکتور .navbar مینویسیم:

RWD-bootstrap3-2-21

حالا دیگه بریم سراغ راست چین کردن منو :)

فایل _navbar.scss رو باز کنید و از خط بالا شروع کنید به ترتیب هرجا کلمه left دیدین اون رو right کنید و هرجا هم کلمه right دیدید تغییرش بدید به left ، مثلا اگر نوشته بود padding-left شما این رو تغییر بدید به padding-right یا مثلا float: left رو تغییر بدید به float: right یا مثلا margin-right باید بشه margin-left

برای فایل های _navs.scss و فایل _dropdowns.scss هم دقیقا همینکارو انجام بدید.

به همین راحتی :)

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

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

  • ‏‏
    M RAHIMI(۱۶ دی ۱۳۹۳)

    سلام
    من مشکلم با آیکون سرچه که به منو اضافه نمیشه و همینطور فایل های جاوااسکریپت.
    میشه بررسی کنید لطفا
    http://s4.picofile.com/file/8162092426/mytheme.rar.html

  • ‏‏

    سلام خانم کلانتری …
    من مشکلم با آیکون سرچه!!
    هرکار میکنم درست نمیشه،طبق آموزش شما عمل کردم و مقدار

    رو قرار دادم ولی درست نشد که نشد میشه یه نگاه بندازید؟؟
    اینم آدرسش:
    http://s6.picofile.com/file/8180664984/MyThem.rar.html

  • ‏‏

    یه سوال دیگه…
    کارایی که گفتیدو برای راست چین کردن انجام دادم ، ولی باکس جستجو به انتهای سمت چپ نرفته و وسط منویه !!
    چیکار کنم تا باکس جستجو سمت چپ قرار بگیره؟
    (حتی اومدم تو کلاس فرم pull و push رو هم امتحان کردم ولی باز درست نشد)

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram