TUTORIAL VIDEO - Dropdown menu with mouseover and menu background highlighting

Tips and Tricks
21

@Jakerlund, yours looks great! I’ll have to analyze your project settings to figure out what I did different/wrong. :confused: Thanks for your help with this! :slight_smile:

1 Like
22

Very clear and good job. Thanks
Now, I wanted to try to get a menu appearing horizontally, maybe with a toggle visibility option. But I face 2 difficulties. First, I don’t know how to toggle visibility to several blocs. Second, I don’t know how to do a mouse over action different than showing the dropdown menu.
Can you help on it?

23

You can put multiple items in the toggle visibility field, separated by a comma

24

Great! Thanks.
I was trying space and semicolon…which was useless :slight_smile:
Now, my next step is to know how to make it appears when I put the mouse over and disappear when not over.
If you know it I’m more than curious how to do it :slight_smile:

Thanks for your fast answer.

25

Hello,

try to put the code in the image in the page settings -> Add Code

17
Screen Shot 2018-06-19 at 22.34.17.png924×546 46.9 KB

It works only in the Browser, not in the BlocsApp Preview.

1 Like
26

hey guys, anyone knows, how i can remove the lines (withe and blue) from the dropdown link?

38

27

@RME, It appears that you have the text set to show a (white) underline and the LI to have a bottom (blue) border. You should be able to adjust this in the class manager.

28

You just saved my life❣️

29

@Jakerlund, Is it possible to have secondary dropdowns in Blocs? like the example shown below? I’d like each to open on hover. I tried setting up using the code in your video, but all the sub-menus open on hover - even the sub-menus. So I’m presuming there’s additional code needed to accomplish that. Any help appreciated! -Randy

  • GALLERIES
    • Gallery 1
      • photo 1
      • photo 2
      • photo 3
    • Gallery 2
      • photo 1
      • photo 2
      • photo 3
    • Gallery 3
      • photo 1
      • photo 2
      • photo 3
30

This was a very good video for 2.6x. Thanks taking taking the time to make it and share it with us.
Am I right in assuming the way this is done, no longer works with Blocs 3.

31

Hi @KBConcepts

The creation of the dropdown menu itself has not changed in Blocs 3.

For the hover part, I have not checked yet.

MDS

2 Likes
32

Hi @KBConcepts

The hover part works as well in Blocs 3.

MDS

2 Likes
34

Nope. Not yet. We have tried this yesterday :smiley: since we have deeper links.

35

I added the mouseover to my navbar, but it opens all submenus at one time and they are all in one line, so that the primary submenu is hidden by the secondary submenu. What do I need to do to correct this? First it should open the first submenu. If I go down with mouse, it should open the secondary submenu once I reach it. Here is a picture of the wrong menu:

menu_failure
menu_failure.jpg578×610 47.4 KB

36

So Great!! Thanks

37

Very cool!! Thanks a lot!

38

Video says unavailable is there a new link to it? would love to see it.

39

^^^ @Jakerlund

40

Blocs 4 - to Style the dropdown menu…

.dropdown-menu - Styles the Dropdown box

.dropdown-item - Styles the Menu item on the drop down

.dropdown-item:hover - Styles the hover state of the menu item

Screen Shot 2021-03-24 at 1.06.08 PM

To have the dropdown menu open on hover, add the following class and set display: block

.navbar-nav li:hover .dropdown-menu

Screen Shot 2021-03-24 at 1.16.18 PM

5 Likes
41

Pete, I love how you are there for our Blocs needs and with such quicks responses. :smile: