منوی فوتر خود انجمن

[member99]

دوستان عزیز این منوی توی فوتر که خیلی جالب هم عوض می شه و توی خیلی از سایت ها هم استفاده می شه چه جوری درست شده، اگر کدش را بذارید ممنون میشم

 

http://upcity.ir/images/62070868794347868542.jpg

[B.A.H.M.A.N]

این ترکیبی از css2 , css3 هستش .

 

برای اینکار شما نیاز دارین یدونه عکس طراحی کنید که :

 

مثلا 100*100 پیکسل باشه . حالا 50 پیکسل بالایی رو آیکون سیاه و سفید بذارید و تو 50 پیکسل پایینی حالت رنگی همون آیکون .

 

بعدش تو تی پی ال اینجوری مینویسیم :

 

 

تو استایل هم اینشکلی :

 

.aks{
background:url(../../img/aks.png) no-repeat top center;
width:100px;
height:50px;
display:block;
transition:All 0.4424s ease;
}

.aks:hover{
background:url(../../img/aks.png) no-repeat bottom center;
width:100px;
height:50px;
display:block;
}

 

یعنی وقتی ماوس میره روش قسمت پایین عکس رو نشون میده و وقتی ماوس میره کنار قسمت بالای عکس رو

[shakibonline]

ممنون دوست عزیز ، بسیار عالی بود . همیشه فکر می کردم برای این نوع جابجایی باید از جاوا اسکریپت استفاده کرد . بازم ممنون .

[shakibonline]

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

[B.A.H.M.A.N]

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

اسم این روش که برای لود و سرعت سایت ، بسیار مهم میباشد Css Sprite می باشد .