תפריט נפתח עם html5 וcss3

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

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

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

אז יש לנו תג נב ובו אנו משתמשים בדרך האפקטיבית ביותר ליצירת תפריטים: רשימה. לכן יש לנו ul ובו li.

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

ועתנ לקוד הcss, שבעזרתו גם נהפוך את הרשימה הראשית לאופקית וגם לגרום לרשימות הפנימיות להופיע ולהיעלם לפי הצורך. זה הקוד:

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(243, 255, 223);
    direction: rtl;
   
}

header#main-header{
    width: 100%;
    height: 15em;
    background-color: rgb(126, 180, 4);

    background: -webkit-gradient(linear, left top, left bottom, from(rgb(126, 180, 4)), to(rgb(70, 134, 1)));
    background:  -moz-linear-gradient(rgb(126, 180, 4), rgb(70, 134, 1));

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7EB404', endColorstr='#468601',GradientType=0 ); /* ie */

    -webkit-box-shadow: 0px 0px 8px #323332;
    -moz-box-shadow: 0px 0px 8px #323332;
    box-shadow: 0px 0px 8px #323332;



}

/********** menu *****************/
nav{
    position: absolute;
    right: 20em;
    top: 12.8em;

}


nav ul li.mainli{

    float: right;
    list-style: none;

}

nav ul li.mainli:hover > div.wrapper{
    display: block;
}

nav ul li.mainli a.mainlinks{
    text-decoration: none;

    padding:  8px 20px;
    color: #FFF;
    display: block;

    background: #7d7e7d;  /*old browsers*/

    background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);  /*firefox*/

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));  /*webkit*/

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* ie*/




    -webkit-box-shadow: 1px 0px 3px #292929;
    -moz-box-shadow: 1px 0px 3px #292929;
    box-shadow: 1px 0px 3px #292929;

}

nav ul li.mainli  a.mainlinks:hover{
    background: #000;
    color: #FFEE99;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#000',GradientType=0 ); /* ie*/
}

nav ul li div.wrapper  div.inner   ul.innerul  li.innerli  a.innerlinks:hover{
    background: #000;
    color: #FFEE99;
}

nav ul li.mainli a.active{
    background: #000;
    color: #FFEE99;
}

nav ul li.mainli  >  div.wrapper{
    background-color: #666666;
    display: none; /* make the drop hidden*/
    position: absolute;
    right: 2px;
    width:550px;   /*enable the inner divs to be displayed horizontally*/
    z-index: 100; /*make the wrapper appear above other contents*/

    -webkit-box-shadow: 0px 0px 8px #323332;
    -moz-box-shadow: 0px 0px 8px #323332;
    box-shadow: 0px 0px 8px #323332;
}



nav ul li.mainli > div.wrapper div.inner{
    width: 150px;
    float: right;
    margin: 10px ;
    background-color: #ccc;
}


nav ul li.mainli > div.wrapper div.inner h4{
    text-shadow: 0px 1px 0px #333;
    color: #000;
    margin-bottom: 5px;
    margin-right: 55px;
}

nav ul li.mainli > div.wrapper div.inner ul li.innerli{
    margin-bottom: 3px;
    display: block;
}

nav ul li.mainli > div.wrapper div.inner ul li.innerli a.innerlinks{
    text-decoration: none;

    padding:  8px 20px;
    color: #FFF;
    display: block;

    background: #7d7e7d;  /* old browsers*/

    background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);  /*firefox*/

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e));  /*webkit*/

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );  /*ie*/
}

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

מה שהופך את הרשימה הראשית לתפריט אופקי היא העובדה שli.mainlinks זוכה לציפה (במקרה זה ימנית). הציפה (float) מציבה כל li אחד ליד השני במקום אחד מתחת לשני.

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

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

שנית, רוחב הדיב העוטף יקבע את הופעתם של הרשימות הפנימיות. שלישית, נתתי לדיב z-index כך שאם יש תוכן או איזשהו אלמנט מפריע הוא יופיע מתחת לתפריט הנפתח.

הz-index מאפשר לנו ליצור שכבות בדף ולקבוע מה יופיע מעל או מתחת למשהו אחר.

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

וזהו בעצם כל העניין. יש לנו תפריט נפתח המשתמש בhtml5 וב css3 וללא שום צורך בjavascript. כמובן שניתן להוסיף עוד ועוד דברים.

למשל עם css3 נוכל להוסיף אנימציות לרשימות הפנימיות, אבל רציתי שתהא דוגמה בסיסית.

הוספתי את הקובץ להורדה. בשל נוחות הcss כלול בhtml. אם תשתמשו בזה כמובן שעדיף להעביר הקוד לקובץ נפרד.

לתוצאה הסופית