בניית תפריט אתר כרשימה

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

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

בניית הרשימה

לצורך מאמר זה, אני משתמש ברשימה מסוג UL. כמובן שאני יכול להשתמש ב-CSS, עם תוצאות דומות, על רשימות OL גם כן.

• פריט 1
• פריט 2
• פריט 3
• פריט 4
• פריט 5 ארוך הרבה יותר

כל רשימה נכנסת לתוך div שגם העיצוב שלו נקבע. ה-Div הזה נקרא base והנה העיצוב שלו:

 

#base {
	border: 1px solid #000;
	margin: 2em;
	width: 10em;
	padding: 5px;
	}

אם נכניס את הרשימה הנחמדה שלנו לתוך ה-div, היא תראה כך:

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

 

#base 
{
	border: 1px solid #000;
	margin: 2em;
	width: 10em;
	padding: 5px;
}
#base ul li
{
	float: left;
	display: inline;
}

וכך זה נראה בפועל:

נחמד, לא? גם בלי תאים, td ו-tr וברדק וגם אפשר לשנות את העיצוב עוד. בואו ונמשיך ונוסיף קישורים:

• פריט 1
• פריט 2
• פריט 3
• פריט 4
• פריט 5 ארוך הרבה יותר

עד כאן זה פשוט, אבל הוספת הקישורים תאפשר לנו להתפרע מבחינת עיצוב. מאד חשוב שיהיה אלמנט כלשהו (קישור או אפילו span\em\strong וכל אלמנט מותר אחר בתוך ה-li מסיבות שמאד מאד קל לעצב עבור כל הדפדפנים (כולל אינטרנט אקספלורר) באמצעות שני אלמנטים ולא אחד. עכשיו אני אעשה עיצוב בסיסיף אשים רקע שחור ב-li וקצת hover לקישור.

 

#base 
{
	border: 1px solid #000;
	margin: 2em;
	width: 10em;
	padding: 5px;
}
#base ul li
{
	float: left;
	display: inline;
	list-style-type: none;
	background-color: Black;
}
#base ul li a 
{
	text-decoration: none;
	color: Silver;
}
#base ul li a:hover
{
	background-color: Silver;
	color: Black;
	text-decoration: none;
}

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