CSS, ממש כמו JS - תכנות ובניית אתרים

מדור

הוסף למועדפים | הפוך לאתר הבית
מדור ברשת



רוצה לעזור?

אם אתה מעוניין לעזור לנו בפיתוח האתר, באפשרותך לשלוח מאמר\מדריך אל רשימות המאמרים שלנו, תודה על שיתוף הפעולה, הנהלת האתר.


אתרים מומלצים

מעוניינים לשחק משחקים ברשת , משחקי פלאש ועוד? בקרו באתרי משחקים הבאים: גיימאקסטרה משחקים או בבלוג המשחקים: בלוג משחקים

  עמוד ראשי - CSS, ממש כמו JS - פורסם לפני 523 ימים
CSS, ממש כמו JS - תכנות ובניית אתרים המאמר הפעם יתמקד ב-CSS.
במהלך המאמר אנו ניראה טכניקה שונה לעצב תפריט ללא JS, ותפריט שכן מתקדמת ויפה לעין.

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

אז בלי עיכובים מיותרים, קדימה לדרך...

רגע לפני:
מומלץ ידע ב-HTML וב-CSS לצורך הבנה ולמידה מהמאמר!

שלב א' - בניית ה-HTML:
בניית ה-HTML היא שלב מאוד חשוב וראשוני.
כהתחלה אנו ניצור קובץ HTML ובתוכו ניצור DIV שה-id שלו הוא menu.
כעת ניצור רשימה עם ההקטגוריות אותן נרצה (לדוגמה: דף הבית, מדריכים, מערכות, קישורים וצור קשר).
ל-li ברשימה ניתן class בשם ktg.

בתוך כל רשימה ניצור עוד רשימה עם הטקסט שיהיה בתוך (יכול להיות קישורים ויכול להיות כל דבר).

הינה התוצאה:
לחץ כאן.

[לצורך העניין יש כבר קובץ CSS המיישר את הטקסט לימין ומתעסק בטקסט]

שלב ב' - התחלת ה-CSS:
בשלב ב' על כל 1 לעצב את התפריט שלו כמו שהוא רוצה.

כיצד לעשות זאת?
נעבור קטע קטע.

הגדרת ה-menu:
div#menu
{
width:720px;
}


כאן נתתי רוחב לתפריט.

div#menu ul
{
margin: 0;
padding: 0;
list-style: none;
}


כאן ביטלתי לרשימות את המראה של הרשימה.
וביטלתי את הרווחים מהקצוות.
[שימו לב ל-list-style, הוא בעל תפקיד מרכזי]

div#menu ul li
{
margin: 0;
height:15px;
cursor:pointer;
border: 1px solid black;
background-color:#7AA9C8;
float:right;
width:142px;
text-align:center;
}


כאן עיצבתי לעצמי איך יראו התאים בטבלה.

div#menu ul ul
{
display: none;
}


פה אני מסתיר לעת עתה את התיאורים של כל אפשרות.

div#menu ul li.ktg ul li
{
cursor:auto;
top:17px;
right:0px;
width:718px;
}


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

שימו לב:
על השלב השני לא הסברתי כיוון שלדעתי אין עדין צורך להסביר ולהתעמק במידע, השלב השני מסתמך על היכולות שלכם לעצב ב-CSS.

הינה התוצאה:
לחץ כאן.

שלב ג' - השלב המוחלט:
כאן אנו נגרום לתאים לקבל מראה ברור שחשוב לנו להמשך.

ל-div#menu אנו מוסיפים position:
div#menu
{
position:relative;
width:720px;
}


ואותו דבר גם ב-div#menu ul li.ktg ul li:
div#menu ul li.ktg ul li
{
cursor:auto;
position:absolute;
top:17px;
right:0px;
width:718px;
}


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

הינה התוצאה:
לחץ כאן.

לפני המשך:
לפני שנמשיך בבנייית התפריט, אני רוצה לעצור ולדון בבעיה מסויימת הקיימת באינטרנט אקספלורר. כל הדפדפנים המודרניים מכבדים את אפקט ה-hover מעל כל אלמנט. אינטרנט אקספלורר לעומת זאת מכבד את האפקט אך ורק מעל קישורים. ודבר זה גורם לנו בעיה. הדרך בה אנו נגרום לתפריטי המישנה להופיע היא באמצעות הגדרת hover על פריטי הרשימה (li). כדי לגרום לאינטרנט אקספלורר לכבד את בקשתינו יש צורך להוסיף לו "התנהגות" (behavior).

באתר של פיטר נדרלוף ישנו קובץ behavior (.htc) הפועל על מערכות windows והגורם לאינטרנט אקספלורר לכבד את אפקט hover על כל אלמנט.

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

כעת נוסיף ל-BODY את הקוד הבא:
behavior:url("csshover.htc");

[על csshover.htc להיות באותה תקייה של קובץ ה-CSS]

שלב ד' - בעת מעבר:
כעת כדי לגרום להכל לעבוד אנו נוסיף 2 הגדרות שיסדרו לנו את המעבר:
div#menu ul li.ktg:hover ul
{
display: inline;
background-color:#7AA9C8;
}

div#menu ul li.ktg:hover
{
background-color:#9EC5DE;
}


הינה התוצאה:
לחץ כאן.

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

ב-HTML הוסיפו מעל הרשימה של הקטגוריות בתוך ה-DIV את הדבר הבא:
< div id="base" >
text
< /div >

[במקום ה-text יש לכתוב את הטקסט של הקטגורייה שתשמש כבסיסית]

שימו לב: את הקוד הנ"ל יש להעתיק ללא רווחים בין הסימנים > ו-<

כעת הקטגורייה שבחרנו כבסיסית נמחוק מתוכה את הרשימה של הטקסט שיוצג ונשנה את ה-CLASS שלה ל-base.

ונוסיף ל-CSS את הפרטים על הבסיס:
div#base
{
margin: 0;
height:15px;
border: 1px solid black;
background-color:#7AA9C8;
float:right;
text-align:center;
cursor:auto;
position:absolute;
top:17px;
right:0px;
width:718px;
}

div#menu ul li.base
{
background-color:#9EC5DE;
color:#FFFFFF;
}


הינה התוצאה:
לחץ כאן.

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

קישורים רלוונטים:
מאמר יותר מעמיק על תפריטים נגללים.
הורדת תפריטים מתקדמים.

בתודה, איתי (iBot).
אולי תתעניין ב...
רוצים לעזור לאתר מדור?
מדור חדש על סולדאט ו-Guild Wars
שלום רב לכל גולשי המדור
האם אלוהים קיים?
איוונט במשחק מייפל סטורי
יש לכם פורום מסוג IPB? היזהרו מפריצה!
תחרות האתרים אופסה ועוד מדריכים
נפרדים מהחופש הגדול עם כמה משחקי פלאש
גולשים יקרים שלום
מערכת הטורנירים של מדור
שנה טובה לכל גולשי המדור
גאווה להיות יהודי
פינה חדשה באתר
גמר חתימה טובה וצום קל
שירות חדש מטעם האתר מנואל
מדריכי גראפיקה מהממים חדשים
9 מדריכים חדשים באתר רובם על תיכנות
4 מדריכים חדשים ו-10 המדריכים הנצפים ביותר באתר
מדור גנרטור סמיילים - קרוב לאלף קומבינציות שונות
כמה משחקי און ליין מגניבים

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