Адаптивное меню

Адаптивное меню, лишние пункты переносятся в выпадалку

by Yunus Gaziev

HTML

<div class="navigation">
    <ul class="wrapper-list">
        <li>
            <a href="#">Google</a>
        </li>
        <li>
            <a href="#">Yandex</a>
        </li>
        <li>
            <a href="#">Yahoo</a>
        </li>
        <li>
            <a href="#">Mail.ru</a>
        </li>
        <li>
            <a href="#">Rambler</a>
        </li>
        <li>
            <a href="#">Bing</a>
        </li>
        <li>
            <a href="#">Skynet</a>
        </li>    
        <li>
            <a href="#">Duck Duck GO</a>
        </li>
        <li class="trigger-holder">
            <button class="trigger-menu">Menu</button>
        </li>
    </ul>
</div>

SCSS

.navigation {
    position: relative;
}

.hidden-list,
.wrapper-list {
    position: relative;
    margin: 10px;
    padding: 10px 64px 10px 10px;
    list-style-type: none;
    
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.26);
    overflow: hidden;
    height: 32px;
    
    li {
        display: inline-block;
        vertical-align: top;
        margin-right: 10px;
        
        &:last-child {
            margin-right: 0;
        }
    }
    
    a {
        display: block;
        padding: 6px 12px;
        
        font-size: 18px;
        font-family: sans-serif;
        
        &:hover {
            background-color: #f1f1f1;
        }
    }
}

.hidden-list {
    height: auto;
    overflow: auto;
    
    li {
        display: block;
    }
}

.trigger-holder {
    position: absolute;
    z-index: 10;
    top: 15px;
    right: 15px;
    height: 100%;
}

.is-overflowed {
    display: none;
}

.hidden-list {
    position: absolute;
    z-index: 15;
    top: 100%;
    right: 0;
    width: auto;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.26);
}

JavaScript

var wrapperList = $('.wrapper-list');
var hiddenMenu = $('<ul class="hidden-list is-overflowed"/>');

$('.navigation').append(hiddenMenu);

function buildHiddenMenu() {
	
    hiddenMenu.empty();
    
	wrapperList
        .find('li').filter(function(index, element) {
            return $(element).position().top > 20;
        })
        .addClass('is-overflowed')
        .clone()
        .removeClass('is-overflowed')
        .appendTo(hiddenMenu);
}

$(window).on('resize', function() {
    buildHiddenMenu();	
});

$('.trigger-menu').on('click', function(event) {
	event.preventDefault();
    hiddenMenu.toggle();
});

buildHiddenMenu();