Set #main_menu to display: inline-block
Then, add this in the DOMContentReady portion of Wedge's script.js file:
Code: [Select]
This has the amusing effect of ensuring that the main menu only takes one line, and each entry beyond that will be moved to a dynamic menu entry at the end. Basically, it behaves like phpMyAdmin and a couple other scripts. I wrote the code myself though, dunno how they 'do it', but since their CSS is probably very different, it doesn't matter...
Anyway, I thought it was cool that I managed to do it in only 4 lines (2 of which compressing as one...), and of course it executes pretty quickly, but I'm not super-happy with the 'more' menu though...
- Main menu doesn't support icons in its entries; well, it does, but it doesn't look pretty... So I removed the icons for consistency, but it could be fixed by CSS.
- Need to add a 'subsection' class to all child LI's, so that we get a horizontal arrow...
- I've set the maximum width to 75% of the window size, so that we can see the sub-menus entirely. Ideally, thought, I should rewrite my main menu code to show the drop-down on the left of its parent, rather than its right, when its width extends beyond the window bounds... I already did that a few weeks ago for the select box rewrite, didn't I..?
- Probably should wrap this into a resize event, so it gets updated when the window is resized, but that also means adding more code to move the submenus to the top, and... MEH.
What do you think of this?
Here's what it looks like:
Then, add this in the DOMContentReady portion of Wedge's script.js file:
if ($('#main_menu').height() > 50 || $('#main_menu').width() > $(window).width() * 0.75)
$('#main_menu').append('<li><span id="m_more"></span><h4>' + $txt['more'] + '</h4><ul></ul></li>');
while ($('#main_menu').height() > 50 || $('#main_menu').width() > $(window).width() * 0.75)
$('#main_menu > li:last').prev().prependTo($('#main_menu > li:last > ul')).find('h4').contents().unwrap().parent().find('>span').remove();This has the amusing effect of ensuring that the main menu only takes one line, and each entry beyond that will be moved to a dynamic menu entry at the end. Basically, it behaves like phpMyAdmin and a couple other scripts. I wrote the code myself though, dunno how they 'do it', but since their CSS is probably very different, it doesn't matter...
Anyway, I thought it was cool that I managed to do it in only 4 lines (2 of which compressing as one...), and of course it executes pretty quickly, but I'm not super-happy with the 'more' menu though...
- Main menu doesn't support icons in its entries; well, it does, but it doesn't look pretty... So I removed the icons for consistency, but it could be fixed by CSS.
- Need to add a 'subsection' class to all child LI's, so that we get a horizontal arrow...
- I've set the maximum width to 75% of the window size, so that we can see the sub-menus entirely. Ideally, thought, I should rewrite my main menu code to show the drop-down on the left of its parent, rather than its right, when its width extends beyond the window bounds... I already did that a few weeks ago for the select box rewrite, didn't I..?
- Probably should wrap this into a resize event, so it gets updated when the window is resized, but that also means adding more code to move the submenus to the top, and... MEH.
What do you think of this?
Here's what it looks like:
