Add a button with a sub-menu to Top Global Header/Navigation Bar?

[Eric Pullen]

I have found this example on how to add a menu button to the top navigation bar, but I can't find an example on how to add a button that contains a drop down menu. I want something the same as the Spaces drop down (in version 5.3) that I can populate with my own content.

This is the page that descibes how to add just a single button:

https://confluence.atlassian.com/pages/viewpage.action?pageId=358908020

[Eric Pullen · Accepted solution]

I had a co-worker that helped me to figure it out. Example below, hope this can help someone else out:

<script>

AJS.toInit(function(){

AJS.$('.aui-header-primary .aui-nav').prepend(' <a href="#mycompany-menu-link-content" aria-owns="mycompany-menu-link-content" aria-haspopup="true" class="aui-button aui-button-link aui-dropdown2-trigger aui-style-default">MyCompany</a> <div id="mycompany-menu-link-content" class="aui-dropdown2 aui-style-default"> <div class="aui-dropdown2-section"><ul> <li><a href="link1" title="Link1">Link1</a></li> <li><a href="link2" title="Link2">Link2</a></li> <li><a href="link3" title="Link3">Link3</a></li> </ul></div> <div class="aui-dropdown2-section"><ul> <li><a href="link4" title="Link4">Link4</a></li> <li><a href="link5" title="Link5">Link5</a></li> </ul></div> <div class="aui-dropdown2-section"><ul> <li><a href="link6" title="Link6">Link6</a></li> </ul></div></div>');

AJS.$('#mycompany-menu-link-content').ajsMenu();

});

</script>

[Mikael Mikkola]

When I used Eric's code to create two dropdown menus, the menus became identical. The solution was to use different "id" and "aria-owns" names, like in the example below. (Possibly one of them is enough, I did not check.)

<script>

AJS.toInit(function(){

AJS.$('.aui-header-primary .aui-nav').prepend('<a href="#mycompany-menu-link-content" aria-owns="mycompany-menu-link-content-MyMenu1" aria-haspopup="true" class="aui-button aui-button-link aui-dropdown2-trigger aui-style-default"  a{padding: 0px 100px 0px 0px;}><span class="aui-icon aui-icon-small aui-iconfont-help" style="color:white" a{padding: 0px 100px 0px 0px;}></span>MyMenu1</a><div id="mycompany-menu-link-content-MyMenu1" class="aui-dropdown2 aui-style-default"> <div class="aui-dropdown2-section"><ul><li><a href="https://..." title="tooltiptext for this">First item in the menu</a></li><li><a href="https://..." title="tooltip text (mouseover)">Second item</a></li></ul></div></div>');

AJS.$('.aui-header-primary .aui-nav').prepend('<a href="#mycompany-menu-link-content" aria-owns="mycompany-menu-link-content-MyMenu2" aria-haspopup="true" class="aui-button aui-button-link aui-dropdown2-trigger aui-style-default"  a{padding: 0px 100px 0px 0px;}><span class="aui-icon aui-icon-small aui-iconfont-help" style="color:white" a{padding: 0px 100px 0px 0px;}></span>MyMenu2</a><div id="mycompany-menu-link-content-MyMenu2" class="aui-dropdown2 aui-style-default"> <div class="aui-dropdown2-section"><ul><li><a href="https://..." title="tooltiptext for this">First item in menu2</a></li><li><a href="https://..." title="tooltip text (mouseover)">Second item in menu2</a></li></ul></div></div>');

AJS.$('#mycompany-menu-link-content').ajsMenu();

});

</script>

Thanks for Eric for the code! And a question: now there is 2,5 character space between the items in the top bar. How to reduce it to 1 or 1,5 (for all items or at least for these added items)?

[Georg Steinmetz]

Here you can find a tutorial on how to create a plugin. At the end they are adding a sub-menu to the top navigation bar

https://developer.atlassian.com/display/DOCS/Put+the+Final+Polish+on+the+Project+in+Eclipse