این منو چطور با css و جی کوئری ساخته شده ؟

[lady64]

سلام . لطفا کسی میتونه بگه این منو ی سمت راست چطور درست شده؟
http://it-learn.ir/

با animate ؟ این کار رو انجام دادم اما از محدوده ی تعریف شده خارج میشن .

[mrgraphy]

سلام دوست عزیز.
ساخت این منو خیلی ساده هست و نیازی به jquery نداره و با css هم درمیاد.
کدتون رو بزارید تا یه نگاهی بهش بندازم.
موفق باشید.

[lady64]

بیشتر هدفم یه چیزی شبیه این سایت هستش .
http://rezagraphic.ir/

کدم رو ضمیمه کردم . دست شما درد نکنه. ولی این متحرک بودن مربوط به جی کوئری نمیشه ؟

[2undercover]

بفرمایید منوی سایت it-learn.ir کاملا CSS3:

[lady64]

خیلی لطف کردید . فکر میکردم حتما باید از جی کوئری هم استفاده بشه.دست شما درد نکنه.

[lady64]

یه سوال:
من میخوام تو این مثالی که شما دادید ، برای هر li یک عکس مثل اونی که شما گذاشتید بزارم . به این صورت مینویسم ، اما درست نیست که برای هر li اینطور تعریف بشه . بهترین راه که تو همه ی مرورگرها جواب بده چیه؟


#navigation ul li#li-1

{
width:90px;
height: 40px;
direction: rtl;
float: right;
border-left:1px #FFFFFF dotted;
background-image:url(img2/menu-contatc1.png);
background-repeat: no-repeat;
background-position: top left;
margin-bottom: 3px;
-o-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
-ms-transition: all ease 0.5s;
transition: all ease 0.5s;
}


و به همین ترتیب آیدی های مختلف برای li ها تعریف میکنم . روش بهتر چیه ؟

یعنی میخوام برای هر li یک background-image مختلف تعریف کنم. اگه 5 تا li داشته باشم چطور باید تعریف کنم؟

[2undercover]

بهترین راه استفاده از متن به جای عکسه!چون اصلا برای بازدید کننده هم مناسب نیست که این همه عکس رو لود کنه!بهتون پیشنهاد می کنم از متن استفاده کنید این مثال رو هم برای اینکه شما متوجه بشید زدم!