TUTORIAL VIDEO - Dropdown menu with mouseover and menu background highlighting


#1

Hi,

I made a tutorial on how to set up a dropdown menu and make it mouseover instead of click.
Invert it to black and make the background of the dropdown menus highlight on mouseover as well.

Cheers


Dropdown menu only first item enabled
#2

Great.:smile_cat:


#3

Fantastic video!! :grinning::grinning:


#4

Awesome, more please :slight_smile:


#5

That’s great!


#6

Great, thanks.


#7

Awesome! :heart_eyes: We would like to see more! I’m really impressed. It’s absolutly new and helpfull for me!
Jakerlund, your kung fu is: you know which custom class you need to apply manually for customizing each bloc or brick :clap:


#8

Great video!
Thank you so much …
Comes immediately to my archive.


#9

Hi there, Thank you for the Great video on the drop down menu.
I’m asking you to elaborate this technique a bit further:( if possible)
How would you change the dropdown rectangle size and then, insert an image into the drop down window? So when hover over the main menu ,the drop down (submenu) would show the images, text, linking to other pages. Thank you in advance


#10

@Deemeetree Showing images in the drop down isn’t possible at this point.
You’d have to use some external script/code and use instead of Blocs menu and i’m sure it will be a pain in the… to manage it in the long run.

If it really is something you want you could always send Norm a request for a “Mega menu”

Changing the drop down icon quick video:


#11

Awesome video! Very informative.

BTW, is there a quick guide to the various classes used in blocs to further experiment?


#12

Everyting is good with that trick on PCs or laptops, but there are big problems when the navbar gets responsive on mobiles (((((


#13

Now if you can provide how to get audio files to work on a website…need the code or a “bric”…


#14

@HMM you mean like this?


#15

That’s a great video working very well on desktop website, however it doesn’t on mobile version :confused:

Any advise to make it work on mobile as well ?


#16

@globetrotter

Yes it doesn’t flow very well to mobile.
It requires a lot of css and js tweaking to work great.

I haven’t had the time to sort it out yet :weary:


#17

Yes…thx…nearly 75% of first time visits are mobile so it would need to work there of course but looks nice!
It’s odd that some of the audio players cost as much as Blocs or close $60! The irony to me is that, being a musician myself, very few pay for music anymore.
A native Blocs bric audio player would be great. Thanks for your kind generous time.


#18

@norm this is a rather basic feature and would be great if directly integrated as an option of the menu :pray:t2: wish list !


#19

@Jakerlund, that was so helpful! It seems that if I want to really dive deep into customizing elements in Blocs (in ways that aren’t already native within Blocs), that I need to get really acquainted with Bootstrap default classes?

I went through your video and did that to a website menu I’m working on and it worked perfect - BUT - it changed the behavior of the mobile menu dropdown in a negative (and different) way. Do you happen to know what classes I’d need to create to affect the mobile menu (as well as the dropdown part of the mobile menu).

One other related question with regard to dropdown menus. The way Blocs is set up, we only have the option of assigning a nav link’s behavior to either “open dropdown menu” OR “navigate to page.” Is there a way to navigate to a page on click, but open dropdown on hover? The nav link actually does have its own page (in addition to the sections/pages shown in the dropdown. Wondering how best to achieve this?

Thank you again for the video. Do you have more videos?

Warm Regards, - Randy


#20

Hello @Creative

I found my old project and it looks ok on mobile…or?

https://jakerlund.net/008/

Here’s the .bloc file.
Dropdown-Menu.bloc (193.8 KB)

Cheers