Silly menu experiment...

Nao

  • Dadman with a boy
  • Posts: 16,079
Silly menu experiment...
« 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:

Code: [Select]
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:

 submenu.png - 19.02 kB, 477x187, viewed 212 times.


Norodo

  • Oh you Baidu, so randumb. (60 sites being indexed at once? Jeez)
  • Posts: 469
Re: Silly menu experiment...
« Reply #1, on May 26th, 2013, 01:29 PM »
It's very cool, but I suspect it's not too user friendly. "Logout" under "plus"?

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Silly menu experiment...
« Reply #2, on May 26th, 2013, 03:39 PM »
Or for that matter, login/register under other circumstances ;)
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: Silly menu experiment...
« Reply #3, on May 26th, 2013, 03:42 PM »
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...

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Silly menu experiment...
« Reply #4, on May 26th, 2013, 03:49 PM »
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.

live627

  • Should five per cent appear too small / Be thankful I don't take it all / 'Cause I'm the taxman, yeah I'm the taxman
  • Posts: 1,670
Re: Silly menu experiment...
« Reply #5, on May 26th, 2013, 06:28 PM »
Quote
Really, if this is a problem, these options can be moved elsewhere
it definitely will be a problem. I can see all the complaints now: where is login//logout/register.
A confident man keeps quiet.whereas a frightened man keeps talking, hiding his fear.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Silly menu experiment...
« Reply #6, on May 26th, 2013, 06:53 PM »
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 >_<
Re: Silly menu experiment...
« Reply #7, on August 23rd, 2013, 09:37 PM »
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 :)