[HOW TO] Show Dropdown Menu on Hover

I Need Help
13

Here is the missing video that @Jakerlund made. It is really helpful to understand the process.

14

But we don’t need this now.

Just tick the box for drop-down on hover from memory in the menus settings.

Much easier!

15

Is anyone here still on Blocs 2 :smile:

1 Like
16

I still have it in my dock :joy:

I barley used it at the time though.

1 Like
17

:joy::joy: I did smile when I watched that video and thought the same as what you said!

18

I wasn’t born then :man_shrugging:t2:

4 Likes
19

Me too. It’s sitting nicely next to Blocs 1 :sunglasses:. Oh man, I’m feeling old now :man_white_haired:

1 Like
20

If you have previously used Blocs 2, you can rest assured that there are no bugs in Blocs 5.:rofl:

1 Like
21

And to spice it up a little, just add this css for a nice sliding-up transition:

/* dropdown menu animation */
@media (min-width: 768px) {
	.dropdown-menu {
    	animation: .5s slideup;
	}
	.dropdown:hover .dropdown-menu {
		display: block;
	}
}

@keyframes slideup {
 	from {
		transform: translateY(25px);
		opacity: 0;
 	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
2 Likes
22

Thank you, that was some good information. :smile:

By the way, I am aware the video is old. I found so many places where this was mentioned, but no link was relevant. That is the reason I put it back.

1 Like
23

Just posting this incase anyone wants to not do code, but of course using code can give more options of transitions etc.

Blocs
Blocs494×778 90.2 KB

4 Likes
24

this is very useful but let’s say I wanted a full screen menu like on apple.com and nike.com, how can we achieve that?

Maybe instead of Toggle Visibility, Hover on Mouseover can be added to Blocs 5?

25

Just use offcanvas. Alternatively, sit back and wait for @PeteSharp to release his extension.

26

Thank you, didn’t know it :grin:
Now :face_with_monocle: putting away the arrow.

27

Nice effect thanks

28

Up,
Does a trick exists to have the hover sub-menu + link on click on title ?
If not :melting_face: (putting the title a secund time in the sub-menu :pleading_face:)

Capture d’écran 2024-04-30 à 14.16.08
Capture d’écran 2024-04-30 à 14.16.08602×616 165 KB

29

Not at present, even if you do not use the menu manager, as Blocs only allows one interaction.

And if you add the URL via javascript, the Blocs script prevents the URL being actioned.

“When” I release Offcanvas NavPlus, I have an option for enabling click or hover. The hover allows you to have links on the top menu still. It also works with the built in Blocs menu system. :sunglasses:

CleanShot 2024-05-01 at 10.00.13@2x


eg. The Shop menu item will open the dropdown on hover, and on click will go to the Blocs Builder website. (By the way, this was built using the Blocs nav menu, it fully integrates.)

1 Like
30

Ok two question please about Offcanvas :

Is it possible to have very basic menu as on my screen (for clients somehow “traditionnal”, it must be the most basic as possible) or only xxl menu ?

Yous said ““When” I release Offcanvas NavPlus”, sorry not fluent english, did you meant it is coming with an update (If yes if i buy now i suppose it is ok with an update ?), btw is it ok with both hover+click on title menu if I buy now ?

Thank you

31

NavPlus is an extension for Offcanvas Helper, it’s not released yet. Although it’s rather well developed and working in-house, I haven’t priorities time with it for a while, with other things on. A lot to do for release, besides testing, tutorials etc.

32

Ok understood ; gonna be interested when it’ll be released (as OffCanva if projects coming…).