Solution Timeline

All versions (edits) of solutions to Need to implement a weird menu appear below in the order they were created. Comments that appear under revisions were those created when that particular revision was current.

To see the revision history of a single solution (with diffs), click on the solution number (ie. "#1") in the upper right corner of a solution revision below.

← Bounty Expand all edits

Try this one. The elems added by javascript. If you want me to change it just let me know in a comment.

https://drive.google.com/file/d/0B-X52MU4S-3BR2stbmVHTDJXV1E/view?usp=sharing

And in firefox the init script not working because the functions declared after calling them. So I moved them at the end of the jquery.main.js.

Here's the solution: https://app.box.com/s/1xdjoju65wyx2aa3wz63y09pyfkpevtx

I added the css/custom.css file and the script to the end of nda.html.

This adds a horizontal menu that wraps if it exceeds the width of its container (in this case it's 750px for #my-menu-container). When it happens the wrapped items are hidden and a placeholder item is added as the last menu item. How many items to wrap is calculated automatically based on the width of the placeholder item text (e.g. you can make it shorter or longer than "Additional Functionality" and see how the wrapping changes).

Also the state of the clicked item is maintained via the .selected class. If any element of the wrapped items row was clicked (i.e. got the .selected class) the row won't hide until any other non-wrapped menu item is clicked.

Let me know if there's anything to improve here.

Winning solution