Dropdown menu on Blocs 3 (2019)

Hi guys. I know, I know, there are some posts already talking about this topic but those posts I think there were back on 2017. Now that there is a Blocs 3, I am wondering if there is a quick way or an option in Blocs that can do dropdown menu.

Many thanks!

Youā€™ve alway been able to create a sub menu in Blocs. You start by selecting your primary menu. When selected, click on the Menu Manager button to open the menu manager editor window. Here you will be able to create a sub menu.

Once you have created your new menu, select the Primary Menu from the selection Box and add a new menu item to your primary menu. This will be the menu item that will trigger the drop-down.

Save your changes and preview your menu. It should look something like the illustration below when you click on the sub menu link.


I prefer this arrangement to applications that create sub menus based on a hierarchal page structure as it give greater flexibility in laying out the menu structure before delving into the page designs. It also allows each page to be created without regard to where it will appear in the site structure.

2 Likes

I saw the same method in other posts and a video from 2017, seems nothing changed. I thought there was a option to just create a dropdown menu. Idk, I think it should be an option when click the desire menu link just right mouse click and select dropdownā€¦ wellā€¦:sweat_smile:

@newblocs
Another way to create a dropdown menu is to simply change the interactions in settings to ā€œopen dropdownā€ for the selected element. This can be for things like existing nav links, buttonsā€¦ etc.

Then you can duplicate the options to have has many as you need as well as use .dropdown-menu class to change look.

3 Likes

Thanks eagle! Will try! :+1:

In your example above, how is your Global Top section set up?
I have a working menu at this point, but Iā€™m seeing the menu items ā€˜cut offā€™, likely as it crossed into the next blocā€¦while itā€™s not sane for this site to have a vertically taller Global Top block.

Is there anything obvious Iā€™m missing here, where the top nav/Global section can be relatively short but the menu items in the dropdown arenā€™t cut off?

Example - there are 8 items in the dropdown, but itā€™s truncated after the first two submenu entriesā€¦
image

It gets truncated because there isnā€™t a content bloc underneath the bloc containing the navigation - in other words, its run out of page to display the menu. Add a content bloc after the navigation bloc and all will be seen.

Here is how it displays with no content on the page
Screenshot 2020-08-24 at 00.22.04
Obviously, the height you have set for the navigation bloc will dictate how much of the menu can be displayed.

And here is how it looks when a content bloc is added

As @eagle points out, the easiest way to create a dropdown is to change the data source of the menu from Primary Menu to None as illustrated below
Screenshot 2020-08-24 at 00.33.05
Then select one of your main navigation links and set its interaction to dropdown. This will create a dropdown menu automatically - it will contain 2 items. Select one of the items and press Cmd D a number of times to create additional items. You can create additional main navigation links in the same way. Just select a main navigation link and press Cmd D to add more items to your main navigation.

I need to percolate on the latter part (data source), but a quick Q - as the nav and menu is indeed in the Global block, wouldnā€™t adding a content bric then carry the content over across all pages, which is exactly what I do NOT want to have happen?

To me, a global menu needs to NOT have page-specific content on it, but I must be missing something here. If I need to include content areas in the global section to have consistent nav across the site - this seems a miss for mobile screens (even mores whitespace before you reach the content), or Iā€™m no longer using the Global area for navigation, and then re-creating the main menu throughout every page of the site in order to overlap with actual contentā€¦ ?

You donā€™t have to put anything in the global area other than your navigation bloc - even that isnā€™t mandatory if you want to change your menu on each page. As you correctly point out, anything that sits in the top global area will be carried across all pages. However, the original issue is that by only adding one navigation bloc to the page and nothing else, you are effectively creating a page that is the height of the navigation bloc only. As you add content to the page (in the dynamic area), your page becomes longer. You need the extra page height to display a drop down navigation. If you donā€™t do this, the drop down will not show beyond the actual page bottom. This is best illustrated as shown below. Iā€™ve added a navigation bar into the dynamic area of the page so you can see how page height is determined. IF I leave the top global area blank and the global footer blank, my page height will be determined by the height of the content Iā€™ve placed in the dynamic area of the page. Iā€™ve given the block a black background so you can see what happens in a browser window.

As you can see, in the blocs interface, it looks as if there is space above and below our navigation bloc. However, when previewing in a browser, things look a bit different.

If I now add a content bloc to the dynamic area of the page and put something in the top global area, everything will show up as expected and the page will be increased in size.

The same will happen if you place your navigation in the top global area. As soon as you add something to the dynamic area, the page will increase in length, thus allowing room for the drop-down menu. Effectively, the drop-down is floating over the page, but if there is no page below the navigation bloc, the dropdown will be prevented from fully showing because it will hit the page bottom.

So, if you want your menu in the top global area, go for that option. All you have to remember is to put some content in the dynamic area also to make your page long enough for the drop-down to display. It usually only needs one bloc to make sufficient room for the drop-down. But, of course, a real web page is likely to have several blocs anyway.

1 Like

So - this is the weird part. I have a TON of content in the dynamic section but itā€™s still being truncated - Iā€™m not that stupid. :smiley: :smiley:
Having said that, somethingā€™s off. I did another site just to test, and am indeed seeing the behavior Iā€™d expect there, dropping the menu items down into the (dynamic) content area as so:
image

However, on the big site Iā€™ve been re-working, itā€™s truncated at the bottom of the global block, while there is definitely dynamic content below:
image

Going to go see if anything jumps out at me, but the latter example certainly has dynamic content, and has the same behavior across many pages in the site right nowā€¦

Itā€™s hard to tell from those images you posted. Have you changed the z-index of anything?

I would use the inspector either in safari or you can right click in preview and see if you can spot anything odd.

Yeah, thatā€™s what Iā€™m going through now, inspector and CSS comparisons vs new test site (which is working). > 30 mins later, no difference, going to check on exported files to see if can sort what changed hereā€¦

Definitely something sucked in somewhere. Removing style.css (ok, moving it temporarily) from an export and opening locally and voila, working. Damned if Iā€™m seeing it doing a diff vs the test site export thoughā€¦

Do you have a live test site we can look at?

Ok, so that wasā€¦annoying. Must have been since day 1 playing or something, but fixed.
Took a bit but chunked out sections of style.css and found the issue.
.container overflow was set to hidden. Donā€™t do this, at least if you want working menus.

Works now. :slight_smile:
image