روکش مرکز ارائه پوسته و قالب وردپرس شامل قالب خبری وردپرس, قالب فروشگاهی وردپرس,قالب شرکتی وردپرس و ... به صورت رایگان و وِیژه می باشد.
درود بر آقای شعبانی عزیز
میخواستم بپرسم چطوری میتونم یه خط زی منوها بندازم . یعنی وقتی اشاره گر رفت روی منو ، زیر نوشته یک خط از وسط به دوطرف باز بشه .
توی عکس ضمیمه کردم .
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;
}
آقای شعبانی ممنون از پاسخ دهیتون
اما من میخوام که یک خط از زیر منو به دو طرف باز بشه ینی وقتی موس روش میرود خط ایجاد شود از وسط تا انتها به دو طرف
مانند منوی های سایت beytorreza.com
استاد شعبانی
لطف میکنید بنده رو راهنمایی کنید
ببخشید دیر شد
خوب اصل کار همونی بود که در پاسخ قبلی خدمتتون عرض کردم. با کدهای بالا تا اینجا ما اومدیم و اون خط را ایجاد کردیم فقط چیزی که باقی مانده این هست که این نوار را باید تنها در زمانی که ماوس روی اون المان رفت ظاهر بشه و عرض هم از وسط و صفر به 100 درصد برسه تا تمام عرض اون المان را در بر بگیره.
خوب در کدهای قبلی باید عرض را از 30 به 0 تغییر بدید و transition: .4s; را هم به مشخصه های after اضافه کنید تا تغییر عرض نوار به صورت انیمیشنی انجام گیرد. حالا با استفاده از کد زیر عرض المان مجازی after را در حالت hover زیاد کنید.
.item:hover:after {
width: 100%;
}
خیلی خیلی متشکرم از محبتتون برا پاسخگویی
خداخیرت بده
انجمن ‘HTML – CSS’ برای جستار ها و پاسخ ها جدید بسته است.