News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Open dropmenu on mouseover

Started by Krashsite, September 01, 2015, 12:58:27 AM

Previous topic - Next topic

Sir Osis of Liver

Is there a *simple* way to open a single level dropmenu on mouseover with CSS?
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Umm yeah. What's hard about it? Give me a use case and tell me which bit is bugging you.

Antechinus


Sir Osis of Liver

Just getting back to it now.  In 2.1 Curve2, would like to have the three user info jquery dropmenus open on mouseover, so they're consistent with main menu.  Possible?
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Three user info dropmenus? What is this you speak of?

* Antechinus hasn't been keeping up with 2.1 stuff.

Anyway yes, it'll be possible. It's only a menu. As long as the basic CSS is set up correctly (should be, but easy to fix if not) then it'd be simply a matter of calling Superfish on those menus too (minor js edit).

Antechinus

Jesus. I knew I shouldn't have looked. :P Why are there two different menu systems running at the same time? And why is there no click-to-open option for all menus? Hell, it doesn't even require any extra CSS.

The hoverIntent plug-in is after Superfish in the plug-ins file. It needs to load BEFORE Superfish, so why is it after Superfish in the js file? It never used to be.

That makes no sense at all. I mean sure you can specifically initialise both plug-ins in the right order, but what's the point? If you put them in the right order in the file, it'll do it all for you when you load the file.

And they're still floating the board index divs without declaring them as border-box, which is just asking for trouble. Told them about that last year sometime, but it was obviously ignored. Meh.

Anyway Krash: if you want the things to open on hover just change their class to dropmenu. That's what calls the Superfish stuff. Check out the classes on the main menu. They should use much the same CSS too (dunno if they do or not as I haven't looked yet).

Sir Osis of Liver

The buttons are in top_info, here -



// If the user is logged in, display some things that might be useful.
if ($context['user']['is_logged'])
{
// Firstly, the user's menu
echo '
<ul class="floatleft" id="top_info">
<li>
<a href="', $scripturl, '?action=profile"', !empty($context['self_profile']) ? ' class="active"' : '', ' id="profile_menu_top" onclick="return false;" >';
if (!empty($context['user']['avatar']))
echo $context['user']['avatar']['image'];
echo $context['user']['name'], ' ▼</a>
<div id="profile_menu" class="top_menu"></div>
</li>';

// Secondly, PMs if we're doing them
if ($context['allow_pm'])
{
echo '
<li>
<a href="', $scripturl, '?action=pm"', !empty($context['self_pm']) ? ' class="active"' : '', ' id="pm_menu_top">', $txt['pm_short'], !empty($context['user']['unread_messages']) ? ' <span class="amt">' . $context['user']['unread_messages'] . '</span>' : '', '</a>
<div id="pm_menu" class="top_menu scrollable"></div>
</li>';
}

// Thirdly, alerts
echo '
<li>
<a href="', $scripturl, '?action=profile;area=showalerts;u=', $context['user']['id'] ,'"', !empty($context['self_alerts']) ? ' class="active"' : '', ' id="alerts_menu_top">', $txt['alerts'], !empty($context['user']['alerts']) ? ' <span class="amt">' . $context['user']['alerts'] . '</span>' : '', '</a>
<div id="alerts_menu" class="top_menu scrollable"></div>
</li>';

// And now we're done.
echo '
</ul>';
}



You see them after logging in, across top left.  The mouseover and active effects are the same as main menu, but they must be clicked for dropmenus to open.  Would be more consistent if both menus worked the same.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Yeah I saw them. They're really slow to load initially. What's up with that? All the other menus load their content instantly. Sounds like a bug in the top menus to me.

It'd be a good idea to lose the triangular pointy-down-thing out of the markup too. That's the sort of thing that should be dealt with by CSS (pseudo element is ideal for that). Locking presentation of optional stuff like that into PHP templates makes no sense. That's 1.0.x thinking.

Anyway, if you look at the main menu markup you'll see it has the .dropmenu class on the ul. Floatleft is just a class that makes the thing float left. Has no effect on menu activation. The top_info id is probably related to the click-to-open js so run a search for that in the js files and see what turns up. Should be easy enough to edit it out of where it is now. Might be able to ditch a redundant js function too.

Antes

Nope, not bug, afaik Arantor made it load on-click for performance related things (especially for Messages & Alerts)

Antechinus

Maybe for alerts. I can see you might want some caching there. There's no need for basic profile links to load slowly though. They can just be straight in the HTML like any other gui link.

Anyway, if something is slow to load it feels like a bug to the user, even if it's supposed to be a feature. ;)

ETA: Oh and I can't see why PM's suddenly need to be not loaded all the time. They've been done that way for years and people are used to it. How does 2.1 tell you that you have new messages if it won't load anything until you click on the tab?

Bloc

Quote from: Antechinus on September 05, 2015, 01:19:29 AM
Yeah I saw them. They're really slow to load initially. What's up with that? All the other menus load their content instantly. Sounds like a bug in the top menus to me.

It'd be a good idea to lose the triangular pointy-down-thing out of the markup too. That's the sort of thing that should be dealt with by CSS (pseudo element is ideal for that). Locking presentation of optional stuff like that into PHP templates makes no sense. That's 1.0.x thinking.

Anyway, if you look at the main menu markup you'll see it has the .dropmenu class on the ul. Floatleft is just a class that makes the thing float left. Has no effect on menu activation. The top_info id is probably related to the click-to-open js so run a search for that in the js files and see what turns up. Should be easy enough to edit it out of where it is now. Might be able to ditch a redundant js function too.

[off-topic]

*nods. Been looking at SMF 2.1 code again for my ShelfLife theme and boy, put it on the backburner for now since its just so much I need to change (well, feel I *should* change to get a good nights sleep lol).

[/off-topic]

Sir Osis of Liver

#11
Quote from: Antechinus on September 05, 2015, 01:19:29 AM
They're really slow to load initially. What's up with that? All the other menus load their content instantly. Sounds like a bug in the top menus to me.

Apparently it's the latest & greatest.   Takes a while for jquery to load the menus, that's why there's the loading widget.  Just because you can do something, doesn't mean you should.  Maybe I'll try converting them to html. 
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Kindred

How is it "awful"?   What do you think needs improvement?

Because, while I have a few issues with theme/display choices in curve2, I would not describe it as "awful"....
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Sir Osis of Liver

I will try to offer something more constructive, but my crappy coding 'skills' make it a slog.  Basically, don't like the theme (been tinkering here), or ACP (will pm admin access so you can have a look), and I think navigation is too complicated and confusing.  A lot of these things have not changed since early alpha, so it seems they're set in stone.  There's always room (and time) for improvement.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Kindred

Ah, well, you see - that is the glory of THEMES...   you don't like how something looks, then make a theme to make it look different.

Personally - although I has some disagreements on some of the display choices, I actually LIKE the new look. I think it is clean.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Sir Osis of Liver

Oddly, the theme is not as I left it.  Must have uploaded the wrong index.css just before I went off.

Anyway, to each his own. Or, as we used to say in the old days, 'To each, his bone'.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Sir Osis of Liver

Quote from: Kindred on September 06, 2015, 06:02:27 PM
Ah, well, you see - that is the glory of THEMES...   you don't like how something looks, then make a theme to make it look different.

Personally - although I has some disagreements on some of the display choices, I actually LIKE the new look. I think it is clean.


Thanks for being civil about it.  I'll leave 2.1 to the experts.

Good luck with it.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Krash: the problem with default themes is that they're an attempt to please everyone. You know how that sort of thing usually goes. :D So what happens is that a few people will be really pleased, but most people will be more or less disgruntled, and they will all be disgruntled about different things.

Incidentally I think I can see why Arantor wanted those top menus loading on click. If I'm not mistaken, they're hitting them members table in the db. That's often a bit of a bottleneck on large sites, so not loading that content all the time should be better for server performance.

The trade-off is that the wait for loading is worse for gui performance, so from the perspective of users it's going to seem slow and buggy compared to how it was done before. You can lecture them about server performance, but all they'll notice is that they have to wait while the menu loads.

live627

I wonder if it could be cached in local storage. But then there's the problem of keeping the cache fresh.

Come to think of it, that menu popup calls the profile to get the listed links from the large menu array. I think, but am not sure, that everything else there is loaded on every page.

margarett

It makes sense like you said live. Every other user info is already available. It should be just the permissions stuff for what is allowed (or not) in the menu
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

Advertisement: