תפריט צבעים מתחלפים

מדריך להכנת תפריט ב CSS ו jQuery עם צבעים שמתחלפים בדעיכה

ראה דוגמא

מה שנצטרך זה שכבה (Div) שמכילה שני דברים, אלמנט עוגן ועוד שכבה אשר אתייחס אליה כתת שכבה.

התת שכבה תציג את התמונה שתיכנס בפייד במעבר עכבר, העוגן יחפוף לתת השכבה ויהיה לו רקע שקוף.

קוד הHTML

נוסיף את תת השכבה לשכבה בצורה דינאמית בעזרת jQuery, כדי להפחית מכמות קוד ה html שנצטרך לכתוב.

זהו הקוד שלנו בינתיים:

<div class="hoverBtn"> <a href="http://styleffect.co.il/">styleffect</a> </div>

יש לנו שכבת div עם class של hoverBtn שמכיל לינק ל – styleffect

קוד ה – CSS:

div.hoverBtn {
position: relative;
width: 100px;
height: 30px;
background: #000 url(your_background_image.png) repeat-x 0 0 scroll;
}
div.hoverBtn a {
position: relative;
z-index: 2;
display: block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
color: #000;
background: transparent none repeat-x 0 0 scroll;
}
div.hoverBtn div {
display: none;
position: relative;
z-index: 1;
width: 100px;
height: 30px;
margin-top: -30px;
background: #FFF url(your_hover_image.png) none repeat-x 0 0 scroll;

עכשיו התת שכבה ממוקמת מתחת לעוגן והוספתי גראפיקה לרקע של השכבה ולתת שכבה.

קוד ה – JavaScript:

אני הולך להניח שיש לך הבנה בסיסית של איך להשתמש jQuery, אם כי, גם אם לא, הקוד עצמו די מסביר את עצמו והוספתי הסברים אחרי כל // .

//when the dom has loaded
$(function(){

});

עכשיו צריך להוסיף לקוד את תת השכבה על ידי שימוש ב append.

וזה הקוד:

//when the dom has loaded
$(function(){
//display the hover div
$("div.hoverBtn").show("fast", function() {
//append the background div
$(this).append("<div></div>");

});

});

עטפתי את ה append בתוך הקריאה חזרה (call-back) של שיטת ההצגה כך שנוכל להשתמש ב – 'this' כדי להתייחס לכל אלמנט div.hoverBtn

עכשיו צריך לקודד את האפקט של מעבר העכבר (hover), אנחנו נהמם את צבע הפונט, בשביל זה נצטרך לציין צבע למעבר העכבר (hover), אפשר גם להשתמש בתכונה 'rel' כדי לאחסן כדי לאחסן את הצבע הראשוני של כל עוגן, זה שימושי אם רוצים לעשות לינקים בצבעים שונים.

אז קוד ה javascript החדש אחרי ההוספה יראה כך:

var hoverColour = "#FFF";
//when the dom has loaded
$(function(){
//display the hover div
$("div.hoverBtn").show("fast", function() {
//append the background div
$(this).append("<div></div>");
//on link hover
$(this).children("a").hover(function(){
//store initial link colour
if ($(this).attr("rel") == "") {
$(this).attr("rel", $(this).css("color"));
}
//fade in the background
$(this).parent().children("div")
.stop()
.css({"display": "none", "opacity": "1"})
.fadeIn("fast");
//fade the colour
$(this) .stop()
.css({"color": $(this).attr("rel")})
.animate({"color": hoverColour}, 350);
},function(){
//fade out the background
$(this).parent().children("div")
.stop()
.fadeOut("slow");
//fade the colour
$(this) .stop()
.animate({"color": $(this).attr("rel")}, 250);
});
});
});

אז מה קרה בקוד למעלה:

• הכרזנו על צבע ה hover
• תת השכבה מומצמדת לשכבת ה hoverBtn
• הצבע הראשוני של ה hover מאוחסן בתוך תכונת ה rel של הלינק
• האנימציה של תת השכבה נפסקה – היא מוסתרת ואז מוגדרת להמם את הצבע
• האנימציה של הלינק מופסקת – הצבע שלו מתאפס ואז מוגדר להשתנות לצבע ה hover
• ואז בחזרה – האנימציה של תת השכבה מופסקת – מוגדרת לfade out
• האנימציה של הלינק מופסקת – ואז מוגדרת לחזור לצבע הראשוני שלה

ראה דוגמה – כאן

הורד את קבצי המדריך – כאן.

Related posts:

1. תפריטים אנכיים נפתחים