منوی افقی بوت استرپ – مخفی کردن عناصر هم‌پوشانی شده

25 امتیاز

Loading…

آیا تا حالا شده در طراحی سایت یک نوار منو داشته باشید که بر اساس نیاز اندازه منو کم یا زیاد شود و دست شمارا برای طراحی‌های خاص بر روی آن نوار منو کوتاه کنه؟! خب باید چه‌کاری کرد؟!
ما به معرفی یک منوی افقی بوت استرپ با جی کوئری که به‌صورت پویا اندازه آن را تنظیم می‌کند می‌پردازیم:
در یک نوار منو من عناصر لیست در حالت افقی به‌صورت زیر دارم:
گزینه اول / گزینه دوم / گزینه سوم / گزینه چهارم / بیشتر+
در صورت عادی تعداد عناصر منوی موردنیاز من زیاد می‌باشد. با استفاده از گزینه ” بیشتر+ ” منو را پویا کردم و با انتخاب کردن گزینه ” بیشتر+ ” به‌صورت عمودی بقیه عناصر به نمایش می‌آید.
در اینجا ما یک نوار منو داریم با عرض و طول مشخصی که اگر تعداد عنصرهای منو کم باشد و تا زمانی که از پهنا سرریز نکند گزینه ” بیشتر+ ” مخفی می‌باشد و اگر زمانی تعداد عناصر بیشتر شود یا پهنای منو کمتر شود و باعث شود یکسری عناصر مخفی‌شده گزینه بیشتر کلاس active را به خودش می‌گیرد و عناصر مخفی‌شده در کلاس menu را به کلاس more_menu انتقال داده (درصورتی‌که عناصر در کلاس menu فقط مخفی شدن).

دمو

HTML:

<a class="more" href="#show_all">More</a>
 <ul class="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
 </ul>
<br />
<br />
<div class="more_menu"></div>

Css:

.menu {
    list-style-type: none;
    height: 35px;
    overflow: hidden;
}
.more_menu {
    display: none;
}
.more_menu.active {
    display: block;
}
.menu li {
    display: block;
    float: left;
    height: 35px;
    line-height: 35px;
    white-space: nowrap;
    padding: 0 10px;
}
.more {
    display: block;
    float: right;
    height: 35px;
    line-height: 35px;
    white-space: nowrap;
    padding: 0 10px;
}

jquery :

 $(document).on('ready', function () {
    function getHiddenItems() {
        var isOneLine = true;
        var topPosition = false;
        var invisibleItems = $('<ul/>');
        $('.menu li').each(function () {
            var thisPosition = $(this).position();
            if (topPosition === false) {
                topPosition = thisPosition.top;
            } else if (thisPosition.top > topPosition) {
                invisibleItems.append($(this).clone());
                isOneLine = false;
            };
        });
        return isOneLine ? false : invisibleItems;
    };

    function checkMenu() {
        $('.more').hide();
        var hiddenItems = getHiddenItems();
        if (!hiddenItems) {

            $('.more_menu').html('');
        } else {
            $('.more').show();
            /* What items are not visible now? */
            hiddenItems = getHiddenItems();
            $('.more_menu').html('<ul>' + hiddenItems.html() + '</ul>');
        };
    };
    $('.more').on('click', function (e) {
        e.preventDefault();
        $('.more').toggleClass('more_menu_opened');
        $('.more_menu').toggleClass('active');
    });
    $(window).on('resize', checkMenu);
    checkMenu();
});

دمو