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

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

[سعید شعبانیسرپرست کل]

درود بر شما

برای انداختن خط زیر هر المانی در 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;
}

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

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

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

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

[سعید شعبانیسرپرست کل]

ببخشید دیر شد

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

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

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

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

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

[نویسنده]

نوشته ها