How To Add New Tabs To Your Site-Wide Nav
From KickApps API Reference
This code snippet adds a new tab to the main navbar via JavaScript. If you don't know any JavaScript, don't worry-- just copy and paste and follow the directions below.
- Log in to the Affiliate Center and navigate to Configure > Pages > Global Page Template.
- Copy the following JS code into the <head></head> section on this page:
<script type="text/javascript">
function addTab(idOftabToInsertAfter, newTabLinkLabel, newTabLinkURL, newTabId) {
//if the tab we want to insert after has loaded, insert the new tab after it
if($j('#'+idOftabToInsertAfter)) {
$j('#'+idOftabToInsertAfter).after('<li><a href='+newTabLinkURL+'>'+newTabLinkLabel+'</a></li>');
}
}
//insert new tab on dom ready
$j(document).ready(function () {
addTab('ka_messageBoardsTab', 'About Us', 'http://aboutus.com', 'aboutUs');
});
</script>
This code adds an About Us tab to the end of the navbar:
The three arguments passed to the addTab function are as follows. To customize your new tab, just fill in the values you want to use instead of what I did in the addTab function within the $j(document.ready) section in the snippet above.
- idOfTabToInsertAfter
- Quite a mouthful. It's the HTML id of the tab (<li> element) that you want your new tab inserted after.
- newTabLinkLabel
- The text that should display on your tab.
- newTabLinkURL
- The URL to which you want your tab to link.
- idOfTabToInsertAfter
Please note If the new tab hangs off the side of your main nav and falls down to the next line, you'll need to increase the width of #ka_mainContainer until it doesn't:
#ka_mainContainer {
width:780px;
}