تبدیل منو ساده به منو زیبا

[mahdi.a 432]

سلام دوستان ، بنده در سایتم یک منو ساده دارم ، یعنی اینکه وقتی ماوس میاد روی هر قسمت فقط یک عکس به صورت ساده و بدون هیچ افکتی میاد ، حالا میخواستم ببینم کسی میتونه کمک کنه که من این منو رو با یک افکت زیبا روی سایت قرار بدم . (http://takwarez1.tk/)

[mahdi.a 432]

اگه بشه مثل سایت همیار وردپرس که منوش رو اگه روی یکی از قسمت هاش برید بقیه قسمت ها کلا تار میشه ، خیلی عالی میشه

[imanfakhar 26231]

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

در مورد jquery و css3 در همین انجمن جستجو کنید چندین نمونه برای آموختن می یابید

[Pouya 1102]

سلام. قبلا مطرح شده:

موفق باشی :-)

[mahdi.a 432]

دوست عزیز من فقط یک راهنمایی برای گذاشتن یک افکت روی عکسی که با ماوس روی منو میاد رو میخواستم ... همین ، لطفا راهنمایی کنید !!

[مرتضی نظری 4182]

این تایپیک رو در بد قسمتی قرار دادید.شما بیاستی در html &css قرار میدادین.منتقلش میکنم

[mahdi.a 432]

دوستان کسی نیست به ما بگه که چه جوری باید یه افکت بزاریم رو منو ؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

[imanfakhar 26231]

دوستان کسی نیست به ما بگه که چه جوری باید یه افکت بزاریم رو منو ؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

می تونه کد افکتتون این باشه

<script>
	$(".li1").click(function () {
	  $(".li1 ul").slideToggle("slow");
	});
</script>

جای slideToggle می تونید toggle و fadeToggle رو هم تست کنید و اگر قالبتون به کتابخانه jquery وصل نیست می تونید این کد را هم به header.php وصل کنید

  <script src="http://code.jquery.com/jquery-latest.js"></script>

در کد بالا فرض شده که لایه ای که نیاز به منوی کشویی داره با کلاس li1 به استایل معرفی شده در نتیجه استایل اولیه لایه کشو شونده می شه

.li1 {
position:relative;
zoom:1
}
.li1 ul{
display:none;
position:absolute;
zoom:1;
}
.li1 ul li { display:block;
float:none;
}

[mahdi.a 432]

ممنون ،خوب الان من باید اون کد اولی رو به کجا اضافه کنم و از کجا بفهمم که قالبم به کتابخانه جی کوئری وصله ؟ در ضمن منو غیر از اون بخشهایی اصلی دیگه بخش شاخه ای (فرعی) نداره که نیاز به کشویی بودن داشته باشه من فقط میخوام وقتی ماوس رو میارم روی یکی از این قسمتها (مثلاَ : صفحه اصلی یا تبلیغات) اون عکسی ( hover )که به صورت ساده بالا میاد به صورت افکت fade بیاد بالا .... دمت گرم

[imanfakhar 26231]

خوب

با css اینکار را بکنید فرض کنید که تصویر بک گراند شما 1.jpg باشه و ارتفاع منو 24px و عکس بک گراند دو تصویر را در ادامه ی هم داره که می شه 48px و باز فرض می کنیم منو با کلاس menu به استایل معرفی شده

}
.menu li:hover {
background:url(1.jpg) aqua no-repeat scroll center -24px;
}

.menu li {
display:inline-block;
background:url(1.jpg) aqua no-repeat scroll center 0px;
height:24px;
	[code] -moz-transition: all 0.3s ease-out; 
	   -o-transition: all 0.3s ease-out; 
  -webkit-transition: all 0.3s ease-out; 
		  transition: all 0.3s ease-out; 

این کد را در style.css قرار بدید توجه داشته باشید که اول کد را به شرایط واقعی تبدیل کنید

عدد .3s در

-moz-transition: all 0.3s ease-out;
	   -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
		  transition: all 0.3s ease-out;

سرعت حرکت می باشد

[mahdi.a 432]

درست شد دمت گرم ، خیلی لطف کردی ، فقط اگه بخوام مثلا یه افکت دیگه بهش بدم باید چه کار کنم و از کجا کد افکت پیدا کنم ؟

[Morteza 34190]

کافیه اسم افکتی که دنبالش هستین یا یک توضیح کوتاه ازش رو به انگلیسی جستجو کنید.

موارد زیادی پیدا میکنید.

[imanfakhar 26231]

جدا از جستجو شیت لیست jquery را در اینجا بخوانید

http://oscarotero.com/jquery/

و نمونه های آماده را در اینجا

http://www.htmldrive.net/

و

dynamicdrive.com

ببینید

و در مورد css3 نیز اینجا را بخوانید

http://www.w3schools.com/css3/default.asp

و

http://css3generator.com/