[PatternFly] Vertical Nav, Secondary Menu does not work

[Andreas Mueller]

Hi,

I don’t know if this mailing list is for questions about PF. I’ll try…

I have a PF based dashboard app which uses the vertical navigation of PF. Some of the 1st level menu items have a secondary menu. I know this works fine with the examples on the patternfly web site. However, on my app this doesn’t work. I only see the 1st level of the menu but never the 2nd. I even copied the HTML code from the PF example with a 2 level menu and use the exact same code. The 2nd level doesn’t show up.

Here is the snippet (I’m using the patternfly vue components):

<template slot="vertical-menu">
  <li class="list-group-item active secondary-nav-item-pf" data-target="#ipsum-secondary">
    <a>
      <span class="fa fa-space-shuttle" data-toggle="tooltip" title="Ipsum"></span>
      <span class="list-group-item-value">Ipsum</span>
    </a>
    <div id="-secondary" class="nav-pf-secondary-nav">
      <div class="nav-item-pf-header">
        <a class="secondary-collapse-toggle-pf" data-toggle="collapse-secondary-nav"></a>
        <span>Ipsum</span>
      </div>
      <ul class="list-group">
        <li class="list-group-item active " data-target="#ipsum-intellegam-tertiary">
          <a>
            <span class="list-group-item-value">Intellegam</span>
          </a>
        </li>
        <li class="list-group-item " data-target="#ipsum-copiosae-tertiary">
          <a>
            <span class="list-group-item-value">Copiosae</span>
          </a>
        </li>
        <li class="list-group-item " data-target="#ipsum-patrioque-tertiary">
          <a>
            <span class="list-group-item-value">Patrioque</span>
          </a>
        </li>
      </ul>
    </div>
  </li>
</template>

For me it seems it is the 

 data-toggle=“tooltip"

which toggles the tooltip on mouse over and shows the menu. So my guess is it may have something to do with enabling tooltip via jquery but this doesn’t work too as jquery don’t know the “$().tooltip(options)” function here:

<script>
  // Initialize Tooltip
  $(document).ready(function() {
    $().tooltip({
      selector: "[data-toggle=tooltip]",
      container: "body"
    });
  });
</script>

Any help is greatly appreciated!

Thanks,
Andreas

-- 
Andreas Mueller
IIT Software GmbH
http://www.swiftmq.com




IIT Software GmbH
Münsterstr. 111, 48145 Münster, Germany
Phone: +49 (0)2506 3049340
Managing Director: Andreas Müller
District Court: Amtsgericht Münster, HRB 16294
VAT-No: DE199945912

This e-mail may contain confidential and/or privileged information. If you are not the intended recipient (or have received this e-mail in error) please notify the sender immediately and destroy this e-mail. Any unauthorized copying, disclosure or distribution of the material in this e-mail is strictly forbidden.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170920/73fda4e9/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: swiftmq_logo_positiv.png
Type: image/png
Size: 10241 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170920/73fda4e9/attachment.png>