how to create a top horizontal menu?

Question

I am trying to create a top horizontal menu. Example below. It could be just highlighted text with specific color, nothing fancy. Roku has verical lists but haven't seen any horizontal. How would I accomplish this, what template best fits. Thank You!

In addition, I would like to hide and show that menu (layered), when navigation from menu content.

Answer 1

You can use a LayoutGroup with layoutDirection="horizontal" to accomplish this. Here's a very rough example:

<LayoutGroup id="navbar" layoutDirection="horizontal" vertAlignment="center" itemSpacings="20" translation="[500,34]">
    <Label text="Featured" />
    <Label text="Live TV" />
    <Label text="Shows" />
</LayoutGroup>

If you need to update these dynamically, you can do something like this:

sub init()
  'get these from the server somehow, and then call this function
  navbarEntries = ["Featured", "Live TV", "Shows"];
  setNavbarItems(navbarEntries)
end sub

sub setNavbarItems(items)
  children = []
  for each item in items
    label = createObject("roSGNode", "label")
    label.text = item
    children.push(label)
  end for
  navbar = m.top.findNode("navbar")
  'remove all existing nodes
  navbar.removeChildrenIndex(navbar.getChildCount(), 0)
  'add all the new navbar entries
  navbar.appendChildren(children)
end sub