Need to implement a weird menu
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

We have a page that looks like this

https://dl.dropboxusercontent.com/u/2982102/Temp/bountify/acme-menu/nda.html

Need to have the menu look like this,

http://screencast.com/t/0kT8RJWqJD0

when it exceeds X items the last item will be added via js to then hide the other items and drop them to a second row(to avoid a really long list of things on 2 rows), the second row of items will appear then the user hovers on the menu item. (I assume the menu items will be a collection of 's )

http://screencast.com/t/b6sMn8aQ5nj6
http://screencast.com/t/dySiR0VDtPQ4

we need to cover the scenario where I need to show onstate, so if the user navigates to a page that is represented on the second row menu item if we have state on that item the menu should remain fully exposed and that item highlighted in some way(so they can see where they are)

html for our page can be downloaded here
https://dl.dropboxusercontent.com/u/2982102/Temp/bountify/acme-menu/acme-menu.zip

awarded to dekkard

Crowdsource coding tasks.

2 Solutions


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.

this looks pretty good, the only issue i see is that in responsive mode it overflows the breadcrumb on the left as seen here http://screencast.com/t/skHvl0AoJF got any ideas?
Qdev almost 4 years ago
while thinking about it does it make sense for the title and the nav to be in a row together seperated by 2 columns using bootstrap. the left maybe being 2/3 and the right 9-10. this would allow it to properly respond by going below the page title. then once in a small state i presume the hidden part of the menu will need to expose itself so a touch user can access all of the options
Qdev almost 4 years ago
Winning solution

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.

hey on this one the alignment is a little off , we need it to be aligned more to match this left side breadcrumb http://screencast.com/t/oOLVppop Also when i try and shrink the page down in responsive mode, this seems to maintain its width do you have any ideas for a fix here?
Qdev almost 4 years ago
Try this, a more responsive approach: https://app.box.com/s/duanxvb4j7c9mc2c0xnqsbj8lepet6l1
dekkard almost 4 years ago
Here's the final refactored responsive version: https://app.box.com/s/p52gjfiv8jga3i110f5e7tfkf9i7mdw6
dekkard almost 4 years ago
View Timeline