Dynamic Menu Based on Scroll

by techsin

HTML

<div class="nav">
    <div class="icon"><div class="btn">|||</div></div>
    <ul>
        <li>MENU 1</li>
        <li>MENU 2</li>
        <li>MENU 3</li>
        <li>MENU 4</li>
        <li>MENU 5</li>
    </ul>
</div>
<div class="main">
    <div class="p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat deserunt totam officiis necessitatibus corrupti alias soluta debitis dolor laudantium vitae aspernatur esse doloribus distinctio molestias maiores quos eligendi assumenda sint.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat deserunt totam officiis necessitatibus corrupti alias soluta debitis dolor laudantium vitae aspernatur esse doloribus distinctio molestias maiores quos eligendi assumenda sint.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat deserunt totam officiis necessitatibus corrupti alias soluta debitis dolor laudantium vitae aspernatur esse doloribus distinctio molestias maiores quos eligendi assumenda sint.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat deserunt totam officiis necessitatibus corrupti alias soluta debitis dolor laudantium vitae aspernatur esse doloribus distinctio molestias maiores quos eligendi assumenda sint.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat deserunt totam officiis necessitatibus corrupti alias soluta debitis dolor laudantium vitae aspernatur esse doloribus distinctio molestias maiores quos eligendi assumenda sint.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat deserunt totam officiis necessitatibus corrupti alias soluta debitis dolor laudantium vitae aspernatur esse doloribus distinctio molestias maiores quos eligendi assumenda sint.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat deserunt totam officiis necessitatibus corrupti alias soluta debitis dolor laudantium vitae aspernatur esse doloribus distinctio molestias maiores quos...

CSS

* {    margin: 0;   padding: 0;}
.main {
    max-width: 500px;
    margin: auto;
    padding: 10px;
    margin-top: 59px;
}

.nav {
    height: 50px;
    width: 100%;
    position: fixed;
    top: 0;
    background-color: rgb(240,240,240);
    text-align: center;
    display:table;
    transition:.2s all;
}
.nav>* {display: table-cell; vertical-align: middle;}

@media (min-width: 500px) {

.nav ul li {
    transition:.2s all;
    display: inline-block; 
    margin-right: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}
.icon { display: none; }
.nav.minimize ul li {
    margin-right: 25px;
}
.minimize {
    height: 25px;
    opacity:.9;
}

.minimize:hover {
    opacity: 1;
}
}

@media (max-width: 500px) {
 body:after {
     content: 'small';
     display: none;
 }

.icon {
    display: table-cell;
}    
.icon .btn{
    padding: 10px;
    border:1px solid #CCC;
    border-radius:5px ;
    display: inline-block;
}
.icon .btn:hover { background-color: #FFF; }

.nav ul {
    display: tabel-cell;    
}

}

JavaScript

$(window).scroll(function(){
    var smallScreen = window.getComputedStyle(document.body,':after').getPropertyValue('content');
    
    if(smallScreen) return;
    if ($(this).scrollTop() > 200) minimize();
    else maximize();
});

function minimize() { 
    $('.nav').addClass('minimize');
}
function maximize() { 
    $('.nav').removeClass('minimize');
}

$('.btn').click(function(){
    $('.nav ul').slideToggle();
});