Simple jQuery menu

2 בדצמבר 2013

תגיות: , , , , ,
תגובה אחת

לא מזמן כתבתי אתר קטן אשר מדגים יכולות של HTML5, כחלק מהאתר רציתי תפריט פשוט אשר יהיה לא את היכולות הבאות:

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

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

לפני כן נראה כיצד התוצאה הסופית נראית (כמובן שניתן לשנות את ההגדרות ב – CSS)

jQuery Menu

קוד ה – HTML הוא פשוט, אלמטי UL אשר מכילים LI ו – A.

Code Snippet
<ul>
    <li>JS API
        <ul>
            <li>Storage
                <ul>
                    <li>
                        <a href="@Url.Action("Compare", "Storage")">Compare to cookie</a>
                    </li>
                    <li>
                        <a href="@Url.Action("BGColor", "Storage")">Save background color</a>
                    </li>
                    <li>
                        <a href="@Url.Action("SendJSON", "Storage")">Send objects using JSON</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="@Url.Action("PermissionAndCreate", "WebNotification")">Web notification</a>
            </li>
            <li>
                <a href="@Url.Action("QuerySelector", "API")">Query selector</a>
            </li>
            <li>
                <a href="@Url.Action("DragAndDrop", "API")">Drag and Drop</a>
            </li>
            <li>
                <a href="@Url.Action("DB", "API")">DB</a>
            </li>
        </ul>
    </li>
</ul>

 

כעת, קוד ה – JS הוא גם לא מורכב במיוחד.

Code Snippet
$(function () {
    $('#menu li ul').hide();

    $('#menu li:has(ul)').addClass('parentMenu').click(function (e) {
        event.cancelBubble = true;
        $(this).find('ul:first').slideToggle();
    });

    $('#menu a').click(function () {
        sessionStorage.selected = $(this).attr('href');
    });

    if (sessionStorage.selected) {
        $('a[href="' + sessionStorage.selected + '"]')
            .addClass('selected')
            .parent('li')
            .click();
    }
});

ראשית, נוודא שכל אלמנטי ה – li לא מוצגים, בעזרת הרצת השורה הראשונה.

שנית, נמצא את כל אלמנטי ה – li שיש בפנים ul (מה שאומר שהם תפריטים האמורים להיפתח) ונוסיף להם מחלקה בשם parentClass, כך נוכל לעצב בקלות, ונוסיף אירוע click שימצא את ה – ul הראשון שנמצא בתוך ה – li ויפתח אותו או יסגור אותו (לחיצה ראשונה או שנייה)

כדי שנוכל לזכור בזמן רפרוש של העמוד במי שנבחר, נרשם לאירוע click על אלמנטי a, ונשמור את הכתובת שהוא מפנה ב – sessionStorage.

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

 

מקטע ה – CSS נראה כך:

Code Snippet
#menu {
    float: left;
    background-color: #e1e1e1;
    min-height: 1000px;
    width: 350px;
    margin-right: 20px;
    border-radius: 0 10px 0 0;
    border: 1px solid #c4c4c4;
}

    #menu a {
        color: #646464;
        text-decoration: none;
        font-weight: normal !important;
    }

        #menu a:hover {
            color: #000;
            text-decoration: underline;
        }

    #menu .parentMenu {
        font-weight: bold;
        cursor: pointer;
    }

    #menu .selected {
        color: #858379;
        font-weight: bold !important;
    }

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

תגובה אחת

  1. grotteaugmele3 בדצמבר 2013 ב 14:19

    הייתי ממליץ לך לשנות את הדברים הבאים:
    event.cancelBubble = true;
    ל
    event.stopPropagation();

    ובמקום לרשום
    if (sessionStorage.selected) {
    $('a[href="' + sessionStorage.selected + '"]')
    .addClass('selected')
    .parent('li')
    .click();
    }

    לרשום
    if (sessionStorage.selected) {
    $('a[href="' + sessionStorage.selected + '"]')
    .addClass('selected')
    .parent('li')
    .trigger("click");
    }

    הגב