Question

I have the following equation for which I don’t have a resolution 🙂
I need a navigation menu that is simply composed from

<ul id="nav">
   <li>
      <a>link</a>
        </li>
other 20 li's ...and last a select which contains li's that no longer have space on menu ...
        <ul>
            <li>
            <a>last li's that cannot be displayed on nav menu </a>
            </li>
       </ul>
    </ul>

How can I do that?? and on window resize when menu width is resized li’s go on last select and on expand goes back on menu.

If someone can help me with a nice jQuery for this please.

thank you

Answer 1

The HTML code isn’t valid so I’m trying to read between the lines.

Two possible solutions to look at.

TinyNav.js.

It won’t do it quite as you have described, however it will turn a list into a select automatically through media queries. Normally this is to make the menu friendly on small screens.

20 list items is too many to show in my opinion, in which case trying to move to a smaller number with submenu items is a good way to go. You show the sub-menu items though Superfish. Not a select, but arguably better as the submenu items appear on hovering over the parent item.