Hello guys, Well i have been working on another site project and i couldn't find good solution for this so i decided to make my own.. I've created site site for that plugin... http://responsivemultimenu.com How do you think about that? Thanks anyway, i will follow this thread.
Well... first of all, what do you need javascript for? All of what you're doing can be done with CSS. Second, if you turn off javascript, the menu moves to the left (why?) and if you reduce the browser window size, the drop-downs doesn't work when the menu wraps. All of these things are easily remedied by proper use of CSS. Calling something "lightweight" when "all it needs is jquery" is also a bit of a misnomer. jQuery is a lot of things, lightweight is not one of them.
SO many things wrong with that. The multi forward/back thing is confusing and not all that useful -- I'd just make it so that when you hit menu the sub-sections are shown and the user can scroll up and down. If it feels like that's too much to scroll through, you have too much crap in the menu. To that end is why I've dropped having flyout / dropdown menus ENTIRELY, but even if I did I'd NEVER have second or third level elements as it's just annoying to users and accessibility rubbish '90's style. As PoPSiCLe rightly mentioned, that fat bloated steaming pile of developer ineptitude known as jQueery -- much less JS itself -- really isn't needed for this anymore thanks to the :target attribute. To that end you would only need ONE div, not two... and a pair of empty anchors as the hooks. There are issues in your code demo that are troublesome -- for example not bothering with a MEDIA target on your CSS link means it's being sent to "all" -- so sure that makes sense for "print". Even worse is this: maximum-scale=1, user-scalable=no Code (markup): Which basically breaks the user's ability to zoom or pan on mobile. You should NEVER declare those and anyone telling you to do that needs a quadruple helping of sierra tango foxtrot uniform! Your demo is 105k in 5 files doing the job of probably 5k in two files... As @PoPSiCLe noted, that's not exactly lightweight. In fact, gimme a few minutes I'll belt out an example of how I'd be approaching that. Again I'd just show all the menu items when open with indents instead of the forward/back internal thing as that's annoying/confusing/hard to use on mobile.
Ok, this is REALLY untested across legacy browsers -- I know the generated content (the geometric shapes) won't show up in legacy IE (7/earlier), if I cared about that I'd put them in the markup instead of using the classes, maybe with span to swap them out for the media queries... but apart from that the show/hide should work in any media query capable browser, the flyout menus should work all the way back to IE6. (again though, untested as I'm on the laptop). http://www.cutcodedown.com/for_others/goldpaid777/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/goldpaid777/ Is wide open for easy access. Markup is relatively unchanged though I added classes since CSS can't reverse-detect anchor+UL pairs. Really though that increase in markup is spitting distance, and well worth it when there's NO scripting even involved here. Which is why it's 4.82k in two files for the whole shebang. Not a perfect 1:1 of what you had, but I really didn't put much effort into that part of it -- it's just a demo to show that it can be done, no scripttardery needed. Adding a few more ID's could in fact be leveraged to implement the forward/back part. IF I were to add scripting to it, I'd just be trapping the target selector so that "hide menu" does a history.back() if the previous page is #, that way the history doesn't fill up with # and #mainMenu over and over if someone goes nutters clicking on it. That shouldn't take more than 1 or 2k of scripting to implement. Even to fully replicate what you were doing shouldn't really take more than 5k of scripting WITHOUT the stupid malfing library -- 99% of it would just be class swaps to then let CSS do the heavy lifting. -- edit -- I just added CSS transitions so that modern browsers add a 300ms delay to the hiding of the menu item when you mouse-out of it... which is why I was using left positioning to hide them instead of overflow in the first place. (completely forgot I was gonna do that halfway through writing it). Also completely forgot that both chrome and FF ignore transition values of 0, you have to say "0s" which is, well... really stupid... of course now it's 5.08k total, but still really close to my guesstimate.
And, if one was inclined, it would be easy to make it hide / show the submenus even on mobile (pretty much the same as is being done with hiding/showing the main menu already) - so, yeah... kudos to @deathshadow for showing how it should be done. One could always add scripting for fancy flyouts, exploding menus or whatever other fancy crap one wants, but the basics should always work flawlessly without javascript.