در حال نمایش 6 نوشته - 1 تا 6 (از کل 6)
  • نویسنده
    نوشته ها
  • #32102

    moheban
    مشارکت کننده

    درود بر آقای شعبانی عزیز
    میخواستم بپرسم چطوری میتونم یه خط زی منوها بندازم . یعنی وقتی اشاره گر رفت روی منو ، زیر نوشته یک خط از وسط به دوطرف باز بشه .
    توی عکس ضمیمه کردم .
    http://uupload.ir/files/3f7k_moshkel4.jpg
    ممنون از زحماتتون .

    #32103

    سعید شعبانی
    کلید دار

    درود بر شما

    برای انداختن خط زیر هر المانی در css شما می تونید از border-bottom استفاده کنید. ولی border-bottom تمام عرض اون المان را در بر می گیره. مثلا برای یک li که عرضش 40 پیکسل هست اگر border-bottom قرار بدید عرض border هم میشه 40 پیکسل. اما برای اینکه یک خط زیر یک المان قرار بدید که عرض متفاوت (بزرگتر یا کوچکتر) با عرض خود المان داشته باشد می تونید از المان های مجازی استفاده کنید. ما دو المان مجازی داریم یکی before که قبل از المان اصلی قرار داره و یکی هم after که بعد از المان اصلی قرار دارد.

    المان های before و after در حالت عادی به خاطر صفر بودن همه مشخصه هاشون دیده نمی شوند ولی میشه با مقدار دهی به اونها از اونها استفاده کرد. خوب شما فرض کنید المان منو سایت شما دارای تگ li با کلاس item هست, با استفاده از کدهای زیر میشه یک خط با عرض دلخواه (در اینجا 30 پیکسل) زیر li کشید.

    .item:after {
        background-color: red;
        content: "";
        display: block;
        height: 2px;
        margin: 0 auto;
        width: 30px;
    }
    #32128

    moheban
    مشارکت کننده

    آقای شعبانی ممنون از پاسخ دهیتون
    اما من میخوام که یک خط از زیر منو به دو طرف باز بشه ینی وقتی موس روش میرود خط ایجاد شود از وسط تا انتها به دو طرف
    مانند منوی های سایت beytorreza.com

    #32156

    moheban
    مشارکت کننده

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

    #32158

    سعید شعبانی
    کلید دار

    ببخشید دیر شد

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

    خوب در کدهای قبلی باید عرض را از 30 به 0 تغییر بدید و transition: .4s; را هم به مشخصه های after اضافه کنید تا تغییر عرض نوار به صورت انیمیشنی انجام گیرد. حالا با استفاده از کد زیر عرض المان مجازی after را در حالت hover زیاد کنید.

    .item:hover:after {
        width: 100%;
    }
    #32177

    moheban
    مشارکت کننده

    خیلی خیلی متشکرم از محبتتون برا پاسخگویی
    خداخیرت بده

در حال نمایش 6 نوشته - 1 تا 6 (از کل 6)

کاربر گرامی برای پاسخ به این موضوع اگر عضو روکش هستید باید سایت شوید در غیر اینصورت باید عضو شوید.