זהו פוסט קצר איך אנחנו יכולים ליצור בקלות תפריט ניווט אנימציה עם jQuery ללא תוסף כלשהו. בטח ראית תפריטי ניווט אופקיים או veritical כי מתרחב ומתכווץ גודלו על הגלגול. לפני אלה במסגרת JavaScript הגיע, היינו צריכים לעשות די הרבה קוד כדי לקבל דברים לעשות. למה? דפדפן זה טיפשי צלב טיפול. אני לא רוצה להתחיל מחדש ב-IE.
טוב, הנה הדבר. אנחנו פשוט באמצעות רשימה מסודרת כדי להפוך התפריט האופקי מתרחב ומתכווץ. הקוד הוא פשוט מת. בואו נסתכל על סימון 1.
<div id="navcontainer"> <ul id="navlist"> <li> <a href="http://www.google.com"> Google </ a> </ li> <li> <a href="http://www.yahoo.com"> יאהו </ a> </ li> <li> <a href="http://www.msn.com"> MSN </ a> </ li> <li> <a href="http://www.lycos.com"> Lycos </ a> </ li> <li> <a href="http://www.baidu.com"> Baidu </ a> </ li> </ Ul> </ P>
אז יש לנו כמה פריטי הרשימה שם. אז לגרום להם להיראות כמו תפריט אופקי היינו צריכים קצת CSS אשר נראה כך
: inline ; } #navcontainer ul li li {display: inline;} # navcontainer ul li
ואת החלק האחרון .. מה שהופך אותם ריקוד במעבר עכבר. די פשוט עם הפונקציה הנפש. רק כמה שורות אלה מתחת תעשה את העבודה. יש להסתכל.
( ) { פונקציה $ (() { ) . hover ( function ( ) { $ ("# Navlist"). לרחף (function () { ) . css ( "background-color" , "#369" ) ; $ (זה) CSS ("צבע רקע", "# 369"). ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $ (זה) הנפש ({רוחב: '200px "}, {משך: 200, בתור: שקר}). }, הפונקציה () { ) . css ( "background-color" , "#222" ) ; $ (זה) CSS ("צבע רקע", "# 222"). ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $ (זה) הנפש ({רוחב: '100px "}, {משך: 200, בתור: שקר}). }); });
זהו זה! ראה אותו בפעולה










































תגובות אחרונות