Wedge
Public area => The Pub => Features => Topic started by: Nao on May 26th, 2013, 01:03 PM
-
Set #main_menu to display: inline-block
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:
-
It's very cool, but I suspect it's not too user friendly. "Logout" under "plus"?
-
Or for that matter, login/register under other circumstances ;)
-
I don't see a problem with these...
Facebook has its logout link in a dropdown menu, too, AFAIK.
As for the register link, I don't remember, but there's always a possibility to add the login box to the sidebar, which makes the argument moot.
Really, if this is a problem, these options can be moved elsewhere... I just wanted to see how good it could look if you didn't have to cope with the multiple lines of text that the main menu would use up in a smaller width context. I'd say it's pretty nice. Of course you're free to feel otherwise...
-
Oh, I like the idea a lot. I do note, though, that I'm still thinking about a menu editor which seems to me like it would make this more important if users do insane things like put lots of items at top level.
-
Really, if this is a problem, these options can be moved elsewhere
-
Actually I'd argue they should be moved off the menu anyway. Login is already in the sidebar along with a registration link, and we could always push a logout button there. But that raises the same objection I had to the notifications block being in the sidebar - namely that me and people like me will never see it >_<
-
It's funny, in revisiting the whole menu setup and pulling messages off - and subsequently, profile as well - we'll have a lot more room in that menu for actual menu stuff so this should simply be less of an issue :)