Styling of the menus about smartmenus HOT 8 CLOSED

The main reason for not using box-sizing: border-box; is that it doesn't work on older browsers (like IE6/7) that the script was designed to support. But now that you bring the topic, I agree that it's not worth the trouble any more to support such extinct browsers nowadays. I started working on the script more than 2 years ago when IE7 was still considered worth supporting by some users (and actually, it still is by some users on restricted intranets). So I guess I can switch to border-box in some of the next releases and simplify a bit the JS code too.

But in general, you should be very careful when applying custom styles to the LI's. Normally we only apply the most basic layout rules for them in the core CSS (i.e. to set the main menu items' arrangement to horizontal, vertical, rtl, etc.) and to style the items users are encouraged to work with the A's.

from smartmenus.

Those browsers are obsolete. When google dropped support for them I believe that it's safe for you to do it also.
I've had a request from the client to enable the skinning of the menus dynamically. And I've started experimenting with that.
I've built an interface for skinning (border, padding etc..)
If you look at the video, you will see what I mean. Interface is on the left (not shown)
I've loaded core css and added classes to display submenus all the time while editing.
I have a little code that re-positions the menus when new properties are applied. The code is supper simple, it calculates the border padding and margin of the parent, and offsets the submenu accordingly.
However when I load the new design and fire up smartmenus, it's not calculating them correctly (smart menus are not active in the video)
video

Do you have any idea how can I solve this?
Or I'll just have to limit what can be customized.

from smartmenus.

Also I would like to try to modify the positioning code, but it seems that it has a lot of moving parts.
I see that you have getOffset method, is that the only place where the layout is calculated?
Will it be enough to try to overwrite that particular function?

edit: sidenote: after further inspecting the code , I see that support for IE6,7,8 adds a lot complexity.

from smartmenus.

Unfortunately, I don't have a clear idea what your code does and how exactly it does it so I am not able to help you out without being familiar with it. getOffset is a generic helper to calculate the dimensions of an element. It's used on various placed in the code. Not sure how and if it could help you if you try to modify it. The sub menus positioning code is in menuPosition but I am again not sure if it could be of any help to you.

from smartmenus.

Basically I would like for the submenus to work with different border widths , padding's, and line height for buttons. I'm trying to find a way to properly calculate the positioning of the submenus.
I'll investigate this further.

from smartmenus.

Not sure but I guess this could help - when you update some of the properties (border, padding, etc.) you can call the following to recalculate the sub menus's position:

var obj = $('#main-menu').data('smartmenus');

// recalc all sub menus' position
$.each(obj.subMenus, function() {
    obj.menuPosition(this);
});

from smartmenus.

I've moved away from the script for my current project, but I'll keep this in mind for the next one. Excellent work, however my recommendation would be to drop the support for those very old browsers, or to make two branches for the project.

Keep up the good work.

from smartmenus.

Thanks for the feedback! I am already planning on removing all IE tweaks and probably switching to box-sizing:border-box; (the switch is actually a trivial task, I'm just still not 100% convinced it's needed). But even without the IE tweaks, the menus remain usable in IE6+ (though with some layout issues) so those are definitely going in the next release..

from smartmenus.