אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » בניית תפריט אתר כרשימה

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

רן בר-זיק ינואר 21, 2009 9:37 am אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

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

בניית הרשימה

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

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

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

 

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

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

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

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

 

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


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

  • פריט 1
  • פריט 2
  • פריט 3
  • פריט 4
  • פריט 5 ארוך הרבה יותר
  • נחמד, לא? גם בלי תאים, 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;
    }
    
    
    

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

    כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
    נגישות אינטרנט עיצוב אתרי אינטרנט תפריטים
    ללמוד ג'אווהסקריפט בעברית

    ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

    רשימת הנושאים
    • מדריכים
      • ריאקט
      • טייפסקריפט
      • ECMAScript 6
      • ES20XX
      • Node.js
      • Express
      • רספברי פיי
      • Babel
      • docker
      • MongoDB
      • Git
      • לימוד MySQL
      • SASS
      • jQuery
      • CSS3
      • HTML 5
      • SVN
      • LESS
    • פיתוח אינטרנט
      • פתרונות ומאמרים על פיתוח אינטרנט
      • jQuery Scripts
      • jQuery למתקדמים
      • יסודות בתכנות
      • נגישות אינטרנט
    • חדשות אינטרנט
    • מידע כללי על אינטרנט
      • רשת האינטרנט
      • בניית אתרי אינטרנט
    • rss logo

      לכל המאמרים

      לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
    • rss logo

      RSS Feed

      משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
      מה זה RSS?
    • Twitter logo

      עקבו אחרי בטוויטר

      בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
      מה זה טוויטר?
    • facebook like image

      ערוץ הטלגרם של אינטרנט ישראל

      בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
      מה זה טלגרם?
    • github logo

      הפרויקטים שלי בגיטהאב

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

    כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

    גלילה לראש העמוד