How to open a cascading menu from a web-item in a navigation bar?

[jtw-ic]

Hey,

is it possible to open some kind of cascading menu or additional web-section from a web-item by hovering over it? Something similar to this:

There were some suggestions I found to build my own dropdown menu in a js-file and attach this to a given element (the web-item in this case) with the help of jquery. Is there any convenient way to achieve such a cascading behaviour by any existing jira-development-functionality?

And if not, is there any way to attach something different to a web-item hover effect than the tooltip?

Thanks a lot!

[Kapil Bolli]

I am looking to develop similar kind of stuff as show in above screenshot

[jtw-ic]

I finally found a solution for creating a menu behaviour similar to the picture in my first post. For all those who were struck with the same problem, this is how I did it:

First I created a simple dropdown2 aui menu, by following the instructions of this chapter: https://developer.atlassian.com/display/AUI/AUI+Dropdown2

The second step was to configure one of the links of the new dropdown to behave like a new trigger for another dropdown, the same way I did with the trigger link which opens the first dropdown. This example shows what happens if a link inside of a dropdown menu triggers another dropdown:

<a href="#test" aria-owns="test" aria-haspopup="true" class="aui-dropdown2-trigger aui-style-default">Dialog-Test</a>
	<div id="test" class="aui-dropdown2 aui-style-default">
		<ul class="aui-list-truncate">
			<li><a href="test">Item1</a></li>
			<li><a href="test">Item2</a></li>
			<li><a id="test-link" onClick="return false" href="#cascade" aria-owns="cascade" aria-haspopup="true" class="aui-dropdown2-trigger aui-style-default interactive">Item3</a></li>
			<li><a href="test">Item4</a></li>
		</ul>
	</div>
	<div id="cascade" class="aui-dropdown2 aui-style-default custom-dropdown">
		<ul class="aui-list-truncate">
			<li><a href="#test">Item1</a></li>
			<li><a href="#test">Item1</a></li>
			<li><a href="#test">Item1</a></li>
			<li><a href="#test">Item1</a></li>
		</ul>
	</div>

To trigger the cascade-dropdown on hovering the trigger-link, I dispatched an "aui-button-invoke" jQuery event on the dropdown trigger element, like shown in the dropdown2-aui-chapter. In this case, the third link of the "test"-dropdown was configured to trigger the "cascade"-dropdown, which for now will unfortunately overlap the "test"-dropdown.

The last step now is to adjust the position of the second dropdown. To find the right position, I first get the absolute position attributes "top" and "left" of the "test"-dropdown by using jQuery to call offset() on the dropdown-box. After that, I added the width of the "test"-dropdown to the "left"-attribute and the top-position-attribute of the trigger-link for the new dropdown to the "top"-attribute (call position() on trigger link).

This leads to the new position of the "cascade"-dropdown to be on the right side of the trigger link to behave like a cascading menu. You will still have to make some tweaks to the behaviour of multiple trigger links in one dropdown-menu, especially to regognize when to close a previous opened dropdown if you hover over the next trigger link and so on, but I wont cover these tweaks here. If you have trouble getting it to work, just let me know and I will try to help :)

Best regards.

[Kapil Bolli]

Hi,

I am trying to do similar kind of menus in JIRA 5.1 with WebItems & WebSections.

but i am new to AUI .

I was not able to figure out where to place the above HTML code in JIRA.

-Kapil

[Renjith Pillai]

Did you read the tutorial? https://developer.atlassian.com/display/JIRADEV/Plugin+Tutorial+-+Adding+your+own+Menu+Items+to+JIRA

[Kapil Bolli]

Hi Renjith,

I am able to Create Menus using Websections & webitems.

With Webitems , i am not able to do cascade menu item shown above in this question.

So i read the article of AUI , but was not able to understand where to place the html

[Renjith Pillai]

If you are looking at just creating a sub-menu?