overflow media-query

by simurai

HTML

<ul class="vertical">
    <li>Home</li>
    <li>About</li>
    <li>Portfolio</li>
    <li>Photos</li>
    <li>Contact</li>
</ul>

CSS

body { font: 16px sans-serif; overflow: hidden; }

ul { 
    display: -webkit-box;
    -webkit-box-pack: justify;
    display: -moz-box;
    -moz-box-pack: justify;
    
    width: 100px;
    padding: 20px;
    resize: horizontal; 
    overflow: hidden;    
    background: pink;    
}

li { padding: 5px; }
li:hover { cursor: pointer; color: white; }


/* This gets triggered by JS just to simulate how it could work */
ul.vertical {
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical;     
}


/* Possible new syntax ------------------------------------- */

ul {
    overflow: name;     
}

@overflow name {
    ul {
        -webkit-box-orient: vertical; 
        -moz-box-orient: vertical;     
    }
}

/* So, as soon as the element starts to overflow, the overflow media-query triggers which would change the box-orient to vertical */

JavaScript

// This is a use case for media-queries on a per element basis, or an "overflow media-query". Great when used with Flexbox where they don't collapse on overflow. Curretnly simulated with JS and a static width. But it would be great if it could be dynamic (when change the items in the nav).


$(document).mousemove(function() {    
    if( $("ul").width() < 300 ) {
        $("ul").addClass("vertical");             
    } else {
        $("ul").removeClass("vertical");
    }
});