Add or Remove menu items to drop down with screen size using JS

Question

How to add menu items to a drop down depending on the screen size using

jQuery

Say i have a menu with eight items. When the eight item fit on the screen in one line then it' ok . But when i re-size the screen the only item/items

that do not fit in the screen in one line should form a drop-down. when i enlarge again the screen the menu item should come back one by one & the drop-down should disappear when all the items are fit in the screen .

On an iphone/ipad etc it may even fit only 2/3 items or so, and the rest should form into a dropdown, dependent on the screen size.

see the link:

http://1drv.ms/1OGYCgS

Answer 1

I think bootstrap might be a nice alternative for this. Sorry if you have considered this and wanted to avoid it. If you resize the result window, you should see what your after.

You can also specify screen sizes which is then useful, for cross platform availability