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

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

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

קוד HTML

קוד ה-HTML של שני תפריטים אלו שונה. למיטב הבנתי אתם יכולים לגרום לתגים <select> ו-<option> להתנהג בדומה לתג הקישור '<a>'או להפך לכן אנו זקוקים לשניהם. אתם יכולים לכלול את שניהם בעמוד שלכם, לדוגמא:


<nav> 
  <ul> 
    <li><a href="/" class="active">עמוד הבית</a></li> 
    <li><a href="/pages/services">שרותי פיתוח</a></li> 
    <li><a href="/blogs/list">בלוג</a></li> 
    <li><a href="/pages/about-us">אודות</a></li> 
    <li><a href="/pages/contactus">צור קשרt</a></li> 
  </ul> 
  
  <select> 
    <option value="" selected="selected">בחירה</option> 
    <option value="/">עמוד הבית</option>
    <option value="/pages/services">שרותי פיתוח</option>
    <option value="/blogs/list">בלוג</option>
    <option value="/pages/about-us">אודות</option>
    <option value="/pages/contactus">צור קשר</option>
  </select>
</nav>

 בואו ונמשיך עם הקוד הזה עתה.

קוד ה-CSS

ברירת המחדל שלנו תהיה להסתיר את התפריט הבחירה (select) בעזרת 'display: none;'. בפועל זה טוב לנגישות, מיכוון שזה יסתיר את התפריט הכפול ממסך הצופה.

nav select {
  display: none;
}

 עתה, שימוש בשאילתת מדיה (media query) יאפשר לנו לבצע את המעבר בין התפריטים ברוחב מסך מסוים. אתם אתם יכולים להגדיר אותם בעמצכם (כאן ניתן למצוא דוגמא).

@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }
}

 אבל עכשיו אנחנו צריכים לנהל שני תפריטים?

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

// Create the dropdown base
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");
});

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

$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});

 אבל האם השימוש בגאווה סקריפט הוא דרך נכונה?

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

הדגמה

תוסף בהמשך.