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
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</
> <
div
id
"aui-dropdown2 aui-style-default"
"aui-dropdown2-section"
><
ul
li
"link1"
title
"Link1"
>Link1</
></
"link2"
"Link2"
>Link2</
"link3"
"Link3"
>Link3</
> </
"link4"
"Link4"
>Link4</
"link5"
"Link5"
>Link5</
"link6"
"Link6"
>Link6</
>');
AJS.$('#mycompany-menu-link-content').ajsMenu();
});
</
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
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.)
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>');
It looks like you're new here. Sign in or register to get started.
