very LARGE menu

[edwardsmarkf]

hello – how will smartMenus handle a very large menu? in other words, if i had a menu with 10 items, each of those had 10 sub-items, and each of those had 10 more, would the menu keep opening “downward” and quickly disappear below the bottom of the page? superfish menu had a project to deal with this problem (Supposition) but didnt get very far.

[admin]

Hi, in general the script is designed carefully so that both the load and runtime speed depend as little as possible on the size of the unordered list – e.g. event delegation is used instead of hooking events to the menu items directly, most calculations and sub menu initialization tasks are done on demand at runtime, etc… So the script should handle big or even huge lists quite well. Here is a quick demo using the latest version (you may need to enlarge your browser window to test the dropdowns instead of the collapsible mode):

http://jsfiddle.net/4gscz846/1/

The list is an actual real world example from a client that I’ve used for testing during the development of the jQuery plugin (though he used it with the original non-jQuery version of the script).

Cheers!

[admin]

Ah, I now realize you are actually most likely asking about the window size detection feature and not about speed. Yes, the script has a built-in feature controlled with the keepInViewport: true/false option that when enabled will try to always keep any opening sub menu visible inside the browser viewport. You can test that too in the above demo.

[edwardsmarkf]

hello “admin” ! such a nice and personal name….

if you would like to see an example of what i am trying to do:
http://edwardsmark.com/proofOfConcept/jqxwidgets/menuUpOrDown/menuUpOrDown.php?type=
notice i have 1000 items, yet all of them conveniently fit on the screen? (oops click the superfish option first please). i took superfish and made some modifications to it using the onBeforeLoad option. jqxwidgets could not do this, or at least not without thousands of $$$ to improve it.

speaking of $$$, if you can do something like this, i may have to purchase smartmenus premium support even before its offered.

[admin]

Here is the same demo I posted above but with your exact HTML structure:

http://jsfiddle.net/nty4ovan/
http://fiddle.jshell.net/nty4ovan/show/ (direct link to the Result frame)

So, yes, this is exactly the window size detection feature in action that makes sure any sub menu is displayed within the browser viewport and all items are accessible. The feature is controlled with the keepInViewport: true/false option.

No need to pay anything for this, it’s an essential built-in feature. BTW, it gets more interesting when your sub menus are long enough to not fit entirely in the viewport height. You can test that too if you like, just play with the fiddle.. 🙂

PS: I am Vasil Dinkov – using admin, just makes it clearer to other forum users that I am actually the forum admin and am directly associated with the project.

[edwardsmarkf]

totally AWESOME ! thank you so much. so when do you think you will have a premium support package ready?

Vasil – my grandfather and his father before him was named “Admin” so there is no shame in that name!

[edwardsmarkf]

http://fiddle.jshell.net/nty4ovan/show/ – in chrome this opened below the bottom of the browser window:

the other link http://jsfiddle.net/nty4ovan/ works fine. – maybe jsfiddle “show” option is doing something wrong?

[edwardsmarkf]

this is odd – i can run on two different computers, both using the same version of chrome (v39), and i see two different results. one is working as expected, but the other is not:

[NeilW]

The computer that is doesn’t work on could mean that it is on a Windows computer and it is the third Monday after a full-moon, or the direction of the sun over your shoulder, or it is the day before Christmas – anything really. 🙁

Just a well know Windows programming thing unfortunately. 😉

[admin]

Yeah, the jsfiddle “show” page uses an IFRAME too that is higher than the actual parent page viewport and that’s why this happens. You won’t see anything like this on a regular non-framed page.

As for the other issue you mention – it seems on one of your test computers the resolution is smaller and the browser window is not wide enough to display the desktop mode dropdowns but instead shows the menu in the responsive collapsible mode. You can test that on any computer or browser by manually adjusting the width of the browser window.

As for paid support, I still have some planned work on some new features and once they are ready, this will be the foundation for the 1.0.0 release. There might also be one or two betas before the final 1.0.0 release. Once it’s released, we’ll start offering paid support to interested users but not before that.

Cheers!

[edwardsmarkf]

hello – i moved your code out of jsfiddle and you are right – jsfiddle was definitely breaking something. i grabbed your simplest example at http://www.smartmenus.org/download/ and used that large block of code – it worked no problems! i tested it using http://browserstack.com and tried it against windows, chrome, firefox, safari, on win-7, several mac releases, etc — looking GOOD.

the problem i was previously running into was indeed a windows sizing issue as you suggested – thank you for pointing out the jsfiddle-iFrame was to blame.

i will be interested when you offer premium support.

regarding neilW’s comment: i have found that google-chrome tends to be very consistent no matter where its running, be it mac, linux or windows.

[edwardsmarkf]

if anybody would like to compare smartmenus with any other options for the large-menu issue, i created http://edwardsmark.com/proofOfConcept/jqxwidgets/menuUpOrDown/menuUpOrDown.php?type=smartmenus

superfish works with a big hack, while jqwidgets cant even handle the situation. smartmenus is the only option i have found that works right out of the box.

[edwardsmarkf]

i should add: these guys at smartmenus were WAY ahead of me – they have several examples that would normally go off the bottom of the screen if i was using any other inferior menu tool, but when using smartmenus, the top/bottom include scrolling arrows so nothing is lost from view.
This is AWESOME for people who have suffered using other inferior menu tools in the past!

[edwardsmarkf]

Update – i just “torture-tested” smartmenus and it performed absolutely flawlessly. Smartmenus will be put into production very soon.
Your website says “Possibly the most advanced website menu script today.” — its time to remove the word “Possibly“.

[Author]

Posts