dekkard's solution to "Need to implement a weird menu"

over 7 years ago

Here's the solution: https://app.box.com/s/1xdjoju65wyx2aa3wz63y09pyfkpevtx<\/a><\/p>\n\n

I added the css/custom.css<\/strong> file and the script to the end of nda.html<\/strong>.<\/p>\n\n

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<\/code>). 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"<\/em> and see how the wrapping changes).<\/p>\n\n

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

Let me know if there's anything to improve here. <\/p>\n

User: dekkard

Question: Need to implement a weird menu

Back to question