javascript - Determine if menu item becomes an overflow, then show a mobile menu -

i building new type of responsive menu website believe require javascript. not javascript hoping can me giving directions, code samples or links sites can provide solutions.

basically, have 2 navigation menu, contents same except first menu has links visible when viewed on wide browser. containing div first menu has overflow:hidden, such when browser resized , no longer wide enough hold list items in 1 line, of list items become hidden view overflow. first menu styled horizontal navigation bar.

the second menu, on other hand dropdown menu, triggered clicking more link. list items on second menu set display:none.

here's want happen. when list item on first menu becomes overflow, , becomes hidden, want corresponding menu item on second menu become display:block. in other words, if

<li id="desktop_tenth">tenth</li> 

goes hidden because no longer fits containing div,

<li id="mobile_tenth">tenth</li> 

becomes visible (when more link clicked). can using media queries on css3, javascript solution preferred, hope can me.

<div style="overflow:hidden; width: 100%;">     <ul id="desktop">         <li id="desktop_first">first</li>         <li id="desktop_second">second</li>         ...         <li id="desktop_tenth">tenth</li>     </ul> </div> <div class="dropdown_menu">     <a id="toggle" href="#">more</a>     <ul id="mobile">         <li id="mobile_first">first</li>         <li id="mobile_second">second</li>         ...         <li id="mobile_tenth">tenth</li>     </ul> </div> 

another approach start

<div class="dropdown_menu">     <a id="toggle" href="#">more</a>     <ul id="mobile">         <!--- no li inside ul default --->     </ul> </div> 

whatever li on first menu get's hidden (or wrapped) appended

<ul id="mobile">  </ul> 

as list item.

specify ids menues' divs (e.g. desktopmenu , mobilemenu), this:

<div id="desktopmenu" style="overflow:hidden; width: 100%;"> 

and this:

<div id="mobilemenu" class="dropdown_menu"> 

and use following script:

var desktopmenu = document.getelementbyid('desktopmenu'), mobilemenu = document.getelementbyid('mobilemenu');  desktopmenu.style.display = 'none'; mobilemenu.style.display = 'none';  if (desktopmenu.offsetheight < desktopmenu.scrollheight || desktopmenu.offsetwidth < desktopmenu.scrollwidth) {     mobilemenu.style.display = 'block'; } else {     desktopmenu.style.display = 'block'; } 

it hides both menues default, , determines if desktopmenu div overflowing. if is, shows mobile menu, , if it's not, shows desktop menu. solution using jquery cleaner though.