עיצוב תפריטים נפתחים בעזרת CSS בלבד

במדריך הקודם למדנו כיצד ליצור תפריטים בעלי רמה הירארכית אחת. במדריך זה נלמד כיצד ליצור תפריטים הנפתחים באופן אוטומטי כאשר עומדים מעליהם עם העכבר (Hover) ובהם יותר מרמה הירארכית אחת. היות ואין כמו מראה עיניים אזי להלן דוגמה לדף ובו תפריט נפתח: דוגמה לתפריט נפתח. המיוחד בתפריט שאותו נבנה יחדיו הוא שהוא אינו עושה שימוש בקוד JavaScript והוא נסמך על יכולות שפת CSS בלבד.

הערה: מדריך זה הינו בעל דרגת קושי בינונית ועל מנת להבינו מומלץ לקרוא בעיון את המדריך לעיצוב תפריטים בשפת CSS ורק לאחר מכן לקרוא מדריך זה.  כמו כן, לפני קריאת מדריך זה כדאי לקרוא גם את הפרק אודות עיצוב קישורים בעזרת CSS וכן את הפרקים אודות האלמנטים <ul> ו- <li> במדריך השלם לשפת HTML5 אשר באתר זה.

קוד ה - HTML הדרוש לנו לצורך יצירת תפריטים נפתחים

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


<ul id="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">Guides</a></li>
   <li><a href="#">Articles</a></li>
</ul>

כעת משבנינו את הרמה העליונה ניגש לבניית הרמה השנייה בתפריט. אותה רמה שבהמשך נצטרך לדאוג לכך שתיפתח באופן אוטומטי כאשר נעמוד מעליה עם העכבר. את הרמה השנייה נבנה פשוט על ידי יצירת רשימה בלתי ממוינת חדשה בתוך רשימת האב:

<ul id="nav">
 <li>
    <a href="#">Home</a>
 </li>
 <li>
    <a href="#">Guides</a>
    <ul>
       <li><a href="#">Guide 1</a></li>
       <li><a href="#">Guide 2</a></li>
       <li><a href="#">Guide 3</a></li>
    </ul>

 </li>
 <li>
    <a href="#">Articles</a>
    <ul>
       <li><a href="#">Article 1</a></li>
       <li><a href="#">Article 2</a></li>
    </ul>

 </li>
</ul>

בדוגמת הקוד למעלה הרמה העליונה צבועה באדום ואילו הרשימות שמתחת לרמה העליונה צבועות בירוק. כפי שביכולתכם להתרשם יצרנו בדוגמה שלנו שלוש רמות עליונות. מתחת לשתיים מהן יצרנו רמות משנה. כמו כן, הענקנו לכל המבנה שלנו מזהה ייחודי (ID) בשם: nav. זאת כדי שנוכל לעבוד ביתר קלות על המבנה הזה בלבד כאשר נכתוב את קוד ה - CSS שלנו.

קוד ה - CSS הדרוש לנו לצורך יצירת תפריטים נפתחים

בחלק זה של המדריך ליצירת תפריטים נפתחים אציג את קוד ה - CSS ובתוכו הסברים:

<style type="text/css">

  הגדרה כללית לכל רשימה בדף שגורמת לכך שהרשימה לא תציג תבליטים לצד כל פריט ברשימה
  ul { list-style-type: none; padding:0; margin:0; }

  קביעת צבע הרקע של כל פריט ברשימה וכן יצירת מצב שבו הפריטים יהיו זה לצד זה ולא זה מתחת לזה
  ul#nav li { background-color: #fff; float:left; }

  טיפול בכל הקישורים בתוך הרשימה ובהתנהגות שלהם. הפיכת הקישור לבלוק כדי שניתן יהיה לטפל בכולו
  ul#nav li a { display:block; padding: 5px 10px; color: #000; text- 
               decoration:none; border-bottom:1px solid #ccc; }

  שליטה בצבע הרקע של כל הקישורים הבנים
  ul#nav li a:hover { background-color: #aaa; }

  הגדרה של חוסר ציפה עבור הפריטים הבנים
  ul#nav li ul li { float:none; }

  שורה זו הכרחית כדי שהתפריט הנפתח לא ידחוף את הפריטים שתחתיו למטה אלא יישאר מעליהם
  ul#nav li ul { position:absolute; display:none; }

  בשורה זו נגדיר את הרשימות ברמה השניה כבלוק
  ul#nav li:hover ul { display:block; }

</style>

 

דף HTML המכיל גם את קוד ה - HTML וגם את קוד ה - CSS עבור תפריטים נפתחים

צירוף שני חלקי הקוד יביא לתוצאה הבאה:

<html>
<head>

<style type="text/css">

  הגדרה כללית לכל רשימה בדף שגורמת לכך שהרשימה לא תציג תבליטים לצד כל פריט ברשימה
  ul { list-style-type: none; padding:0; margin:0; }

  קביעת צבע הרקע של כל פריט ברשימה וכן יצירת מצב שבו הפריטים יהיו זה לצד זה ולא זה מתחת לזה
  ul#nav li { background-color: #fff; float:left; }

  טיפול בכל הקישורים בתוך הרשימה ובהתנהגות שלהם. הפיכת הקישור לבלוק כדי שניתן יהיה לטפל בכולו
  ul#nav li a { display:block; padding: 5px 10px; color: #000; text- 
               decoration:none; border-bottom:1px solid #ccc; }

  שליטה בצבע הרקע של כל הקישורים הבנים
  ul#nav li a:hover { background-color: #aaa; }

  הגדרה של חוסר ציפה עבור הפריטים הבנים
  ul#nav li ul li { float:none; }

  שורה זו הכרחית כדי שהתפריט הנפתח לא ידחוף את הפריטים שתחתיו למטה אלא יישאר מעליהם
  ul#nav li ul { position:absolute; display:none; }

  בשורה זו נגדיר את הרשימות ברמה השניה כבלוק
  ul#nav li:hover ul { display:block; }

</style>

</head>

<body>

<ul id="nav">
 <li>
    <a href="#">Home</a>
 </li>
 <li>
    <a href="#">Guides</a>
    <ul>
       <li><a href="#">Guide 1</a></li>
       <li><a href="#">Guide 2</a></li>
       <li><a href="#">Guide 3</a></li>
    </ul>

 </li>
 <li>
    <a href="#">Articles</a>
    <ul>
       <li><a href="#">Article 1</a></li>
       <li><a href="#">Article 2</a></li>
    </ul>
   

</body>
</html>

   




 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש