פונקציית חיווי - Javascript

לצורך ההבנה של הקטע הזה מומלץ להדפיס את מבנה עץ התפריט.
בשיטת העבודה המקובלת, גם באתר המעוצב, קישור שיש לו תפריטי משנה מופיע גם בתוך רשימת קישורי המשנה. שני הקישורים מובילים לאותו דף.
פונקציית החיווי מתבצעת עם טעינת הדף לזיכרון על ידי <body onLoad="mark()">

function mark() {
page=window.location.href ;// page url

כתובת הדף הנוכחי

var obj=document.getElementById("tafrit1") ;
var elements = obj.getElementsByTagName("a");// Array of links

יצירת מערך שמכיל את כל הלינקים שנמצאים בתפריט

for (i=elements.length-1; i> 0 ; i--) {
var kuku=page.indexOf(elements[i].href) ;
if (kuku >= 0 ) break ; } //

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

elements[i].className = 'current';

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

var objli=elements[i].parentNode.parentNode ;

עולים שני אלמנטים למעלה (תסתכלו בתרשים). מהקישור הירוק גליל נגיע לאלמנט UL שמסומן בתרשים בצבע סגול , מהקישור CSS נגיע ל UL tafrit1 שמסומן בצבע כחול.

if (objli.id=="tafrit1"){elements[i].parentNode.className='current';return }

אם לאלמנט אין תפריטי משנה נוסיף לאלמנט LI class=current שבאמצעותו יווצר החיווי בתפריט העליון ונצא.

document.getElementById("side").innerHTML=objli.innerHTML ;
objli.parentNode.className = 'current';}

נעתיק את תפריט המשנה מעץ התפריטים לרשימה ששמה id=side בתוך ה DIV ששמו id=sidebar. נוסיף חיווי לתפריט העליון.

אתר מעוצב

פונקציית חיווי - Javascript