[semantic-ui][menu] Semantic sub-menus, is it possible?

[mlopezgva]

[semantic-ui][menu] Semantic sub-menus, is it possible?

[RANT] I don't know why Bootstrap removed submenus in v3, but it is the main reason I do not use it anymore (if I can avoid it). [END RANT]

I am trying to set up a sub-menu, but I fail to see how can I do it programmatically.

Something like this

I tried using

$subMenu = $gui->semantic()->htmlDropdown('submenu1', 'Menu Item 2');
$submenu->addItem('Option 1');
$submenu->addItem('Option 2');

$menu->addDropdownAsItem('Menu Title', [
  'Menu Item 1',
  $submenu,
  'Menu Item 3'
]);

But it does not show as expected.

Any clue? Thank you.

[jcheron]

You have two options:

$mn=$gui->semantic()->htmlMenu('mn',['option A','option B']);
$dd=new HtmlDropdown("tab-", 'Option C',['C1','C2']);
$mn->addItem($dd);
$mn->setVertical();

or

$mn=$gui->semantic()->htmlMenu('mn',['option A','option B']);
$mn->addDropdownAsItem('Option C', ['C1','C2']);
$mn->setVertical();

There was a slight display problem that I fixed
589f6ef

[mlopezgva]

Good, but that I managed to make it work. However, it was not about vertical (my mistake). I think I did not explain myself, I am talking about nested sub-menu:

Which is rendered using this code:

  <div class="ui menu tp fixed inverted teal">
    <a class="active item">Home</a>
    <a class="item">Messages</a>
    <a class="item">Friends</a>
    <div class="ui dropdown item">Sub menu
      <i class="dropdown icon"></i>
      <div class="menu">
        <a class="item" href=""><i class="edit icon"></i>Edit Menu</a>
        <div class="ui dropdown item">
          <i class="globe icon"></i>Language
          <i class="dropdown icon"></i>
          <div class="menu">
            <a class="item" href=""><i class="es flag"></i> Español</a>
            <a class="item" href=""><i class="fr flag"></i> Français</a>
            <a class="item" href=""><i class="gb flag"></i> English</a>
          </div>
        </div>
        <a class="item" href=""><i class="settings icon"></i>Settings</a></div>
    </div>
    <div class="right menu">
      <div class="item">
        <div class="ui icon input">
          <input type="text" placeholder="Search...">
          <i class="search link icon"></i>
        </div>
      </div>
      <a class="ui item">
        Logout
      </a>
    </div>	
  </div>

Related to the menus... How do I set the href for the items?

[jcheron]

For setting the href properties, you can use setPropertyValues:

$mn=$gui->semantic()->htmlMenu('mn',['option A','option B']);
$dd=$mn->addDropdownAsItem('Option C', ['C1','C2']);
$dd->setPropertyValues('href',['/test/c1','/test/c2']);

For the nested Dropdown, I'm looking for....

[jcheron]

I tried several solutions, not really satisfactory.
I would advise you to identify the dynamic parts of your menu, and the static ones:
you can generate the dynamic part that will change with phpMv-UI, and the rest (static) leave it in HTML.

[mlopezgva]

OK.
I could, as a matter of fact, create the menu 100% in HTML, because there are no dynamic parts I could not generate using Twig (resolving routing and the user name/avatar are the differences, really).

Well, I will try to solve it. Thank you for trying.

$menu = new htmlMenu('nav', [logo, First Element]);
$submenu = $menu->addMenu(
    'submenu1', 'Second Element',
   addDropdownAsMenu('subitems', [elements...])
);
$submenu->getItem(2)->addDropDownAsMenu([Elements...]);

This is what I think it should work (not exactly, more like a pseudo)... But I don't know if this would be "easy" to implement.