Picture of Chris Gillison
Re: Hotspot Menu is "messed up"
by Chris Gillison - Wednesday, 15 March 2017, 10:04 PM
 

Hi Rob,

I appreciate I'm rather late to the table on this one, but I really wanted to get the hotspot menu up and running too (having seen the really rather nice Scouts course Kineo did (see showcase)).

I've got things working the same as the Scouts site (admittedly with a fair bit of CSS work, and some tweaks to handlebars), but as a starting point I kind of ignored part of the example.json, specifically the 'parents' and 'children' bit - getting .LESS to do the same thing. It may be a roundabout way, but here's one solution...

  1. Uninstall the boxMenu then install the hotspot menu
  2. Delete menu.less from vanilla theme
  3. Working from the hotspot menu example.json, I ignored the first 'parent' chunk
  4. In contentObjects.json I left each of the object's _parentIds as "course"
  5. To each of the objects I added the "_hotspotMenuItem" part from example.json, setting positions as preferred.
  6. I created a new .LESS file, targeted the hotspot-container-image div (the one where the hotspot menu background image should sit) and styled accordingly. As a very quick example:
  7. .hotspot-menu .hotspot-container-image {
        height: 600px;
        background-image: url('../../course/en/images/menu-bg.jpg');
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

Of course, getting the menu items to look and behave as they do on the Scouts site took some more CSS work and a few tweaks to some .hbs files, but nothing that couldn't be gleaned from FFs web dev tool.

Anyway, hopefully the above might be of assistance to you (if you haven't alredy found a much better way of doing it!) and anyone else who's looking to implement the menu.

Chris