رفتن به مطلب

چگونگي تغيير حالت فهرست يا منوي زير هدر


پست های پیشنهاد شده

سلام دوستان :)

چه جوري ميشه حالت منو يا فهرست زير هدر رو تغيير داد

منظورم از تغيير حالت اينه اگه دقت كنيد وقتي نشانگر روي هركدوم از لينك ها قرار ميگيره بالفرض (صفحه اصلي) اون يه حالتي به خودش ميگيره كه توي سايت ما يه جوري تو سايت هاي ديگه هم يه جوره ديگه...

ميخام بدونم چه جوري ميشه اين افكت هاش و تغيير بدم؟

اين هم دوتا نمونه:

http://p30up.ir/up/4asuxqjgkxhho1aapn4.jpg

http://p30up.ir/up/2q8o0rl2kph0zbs7notd.jpg

لینک به ارسال

کلا این نوع نمایش ها از استایل هست.

خواصی مثل border-radius برای گوشه گرد کردن و خاصیت hover برای تغییر در موس اور استفاده میشن.

لینک به ارسال

سلام جواب مرتضای عزیز کامل بود برای اطلاعات بیشتر در بخش آموزش مقالات مربوط به css و css3 را مطالعه کنید و به عنوان منبع آموزشی بسیار معتبر هم به آدرس

http://www.w3schools.com

مراجعه فرمایید

لینک به ارسال

دستتون درد نكنه اما خيلي كلي گفتيد كليات و فهميدم

براي مثال ميشه چند تا كد و قرار بديد؟

يعني چند تا كد مختلف كه باعث تغيير شكل فهرست زير هدر ميشند

الان اين كد هدر بندست: http://p30up.ir/up/d9s20kvgacevb8pldksn.txt

براي تغيير حالت منوي زير هدر بايد اين كد ها رو تغيير بدم؟


$("#menu li a").hover(function() {
// this function is fired when the mouse is moved over
$(".out", this).stop().animate({'top': '45px'}, 250); // move down - hide
$(".over", this).stop().animate({'top': '0px'}, 250); // move down - show
$(".bg", this).stop().animate({'top': '0px'}, 120); // move down - show

}, function() {
// this function is fired when the mouse is moved off
$(".out", this).stop().animate({'top': '0px'}, 250); // move up - show
$(".over", this).stop().animate({'top': '-45px'}, 250); // move up - hide
$(".bg", this).stop().animate({'top': '-45px'}, 120); // move up - hide
});


/* 2nd example */

$("#menu2 li a").wrapInner( '<span class="out"></span>' );

$("#menu2 li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});

$("#menu2 li a").hover(function() {
$(".out", this).stop().animate({'top': '45px'}, 200); // move down - hide
$(".over", this).stop().animate({'top': '0px'}, 200); // move down - show

}, function() {
$(".out", this).stop().animate({'top': '0px'}, 200); // move up - show
$(".over", this).stop().animate({'top': '-45px'}, 200); // move up - hide
});

لینک به ارسال

دستتون درد نكنه اما خيلي كلي گفتيد كليات و فهميدم

براي مثال ميشه چند تا كد و قرار بديد؟

يعني چند تا كد مختلف كه باعث تغيير شكل فهرست زير هدر ميشند

الان اين كد هدر بندست: http://p30up.ir/up/d...cevb8pldksn.txt

براي تغيير حالت منوي زير هدر بايد اين كد ها رو تغيير بدم؟


$("#menu li a").hover(function() {
// this function is fired when the mouse is moved over
$(".out", this).stop().animate({'top': '45px'}, 250); // move down - hide
$(".over", this).stop().animate({'top': '0px'}, 250); // move down - show
$(".bg", this).stop().animate({'top': '0px'}, 120); // move down - show

}, function() {
// this function is fired when the mouse is moved off
$(".out", this).stop().animate({'top': '0px'}, 250); // move up - show
$(".over", this).stop().animate({'top': '-45px'}, 250); // move up - hide
$(".bg", this).stop().animate({'top': '-45px'}, 120); // move up - hide
});


/* 2nd example */

$("#menu2 li a").wrapInner( '<span class="out"></span>' );

$("#menu2 li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});

$("#menu2 li a").hover(function() {
$(".out", this).stop().animate({'top': '45px'}, 200); // move down - hide
$(".over", this).stop().animate({'top': '0px'}, 200); // move down - show

}, function() {
$(".out", this).stop().animate({'top': '0px'}, 200); // move up - show
$(".over", this).stop().animate({'top': '-45px'}, 200); // move up - hide
});

این کدی است که باید به آن استایل بدهید


#menu li a

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

لازم است ابتدا با کلیت css و ماهیت دستوراتش کامل آشنا شوید و الا کل قالب را به هم خواهید ریخت

قبل از هربار تغییر از کل محتویات قبلی style.css کپی بگیرید

نمونه های آماده ی زیادی از منوهای زیبا را می توانید در سایت زیر بیابید که بعد از فراگیری استایل بندی می توانید جایگزین منوی فعلی کنید

http://www.dynamicdrive.com/

لینک به ارسال
ارسال شده در (ویرایش شده)

استاد دستتون درد نكنه :)

اما اينا همش انگليسي بود ونتونستم هيچي بفهمم... :(

اگه نمونه ي فارسيش هم موجوده لطفا آدرسش رو به ما بدهيد؟

ویرایش شده توسط abolfazl
لینک به ارسال

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

سایت جامع به این گستردگی برای فارسی نداریم.

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...