javascript - How can I handle overflow on nav items? -

let's i'm making web page, , have bunch of nav items, this:

home contact something-else 

and based on browser width, i'd have items can't fit put in dropdown, this:

closed:

home contact ...  

open:

home contact ...                   --------^-------------                  |          |                   |   something-else   |                  |            |                  ---------------------- 

is there easy way of doing that?

you js:

window.onresize = function(event) {   //get window width   var winwidth = window.width;   var navitemswidth = 0; //you'll use in minute...   var extranavitems = []; //you'll use in minute...    //then iterate through each nav   var navitems = document.getelementsbyclassname('navitem');   (var = 0; < navitems.length; i++) {     //check width of each item , compare win width     navitemswidth += navitems[i].innerwidth;     //if width greater screen width...     if(navitemswidth > winwidth) {        //add items array        extranavitems.push(navitems[i]);        //or add them drop down here...     } else {        //if still under winwidth add them navbar        document.getelementbyid('navbar').html += navitems[i];     }   } }; 

or css media queries:

https://developer.mozilla.org/en-us/docs/web/guide/css/media_queries