How to make the menu section dropdown on hover in portal

[a_g_rodriguez]

Hello

I am trying to get the menu header on my service portal show the sub menu sections when i hover over the menu section and whenever i click into the menu section take me to a page.

So when I hover over Testing Im trying to get it to show me all the sub menus it contains. But when I click Testing i want it to redirect me to a page testing is referencing.

I know this is done in the Header Menu Widget, and then in the "menuTemplate" under the Angular ng-Templates.

Anyone have any ideas on what i can change?

Posted the code in the picture above in case its fuzzy.

<a ng-if="item.items.length == 0 && !item.scriptedItems" ng-href="{{item.href}}" target="{{item.url_target}}">{{ item.label }}</a>

<a ng-if="item.items.length > 0" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"   ng-href="{{item.href}}">{{ item.label }} <span class="caret"></span></a>

<ul ng-if="item.items.length > 0" class="dropdown-menu" role="menu">

      <li ng-repeat="item in item.items" ng-include="'menuTemplate'" />

</ul>

<a ng-if="item.scriptedItems.count > 0" href="javascript:void(0)" data-toggle="dropdown" title="{{item.hint}}">

      <span ng-bind-html="item.label"></span>

      <span ng-if="!item.scriptedItems.omitBadge" class="label label-as-badge label-primary sp-navbar-badge-count">{{item.scriptedItems.count}}</span>

</a>

<sp-dropdown-tree ng-if="item.scriptedItems.count > 0" items="item.scriptedItems.items" />

[Robert_Cartwrig · Accepted solution]

Try something like this:

Example

Try this code »

      <ul class="nav nav-pills">

              <li class="active"><a href="#">Home</a></li>

              <li><a href="#">Profile</a></li>

              <li class="dropdown">

                      <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>

                      <ul class="dropdown-menu">

                              <li><a href="#">Inbox</a></li>

                              <li><a href="#">Drafts</a></li>

                              <li><a href="#">Sent Items</a></li>

                              <li class="divider"></li>

                              <li><a href="#">Trash</a></li>

                      </ul>

              </li>

              <li class="dropdown pull-right">

                      <a href="#" data-toggle="dropdown" class="dropdown-toggle">Admin <b class="caret"></b></a>

                      <ul class="dropdown-menu">

                              <li><a href="#">Action</a></li>

                              <li><a href="#">Another action</a></li>

                              <li class="divider"></li>

                              <li><a href="#">Settings</a></li>

                      </ul>

              </li>

      </ul>

I got this from https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-dropdowns.php and am using a modified version in a widget successfully.

Hope this helps.   Best of luck!

Regards,

Robert

[chavayoshitha]

Hello,

I am trying to implement the same unable to do it...

Can you help me acheive this!