Targeting SharePoint 2013 Built-in Navbar

Question

SharePoint's built-in navigation appears to create a <ul> inside of a <div>, but the id on this inner <ul> appears to change between pages.

In the two below screenshots are examples of the same built-in navigation, but on different pages (notice the id's are zz10_RootAspMenu vs zz11_RootAspMenu).

I am attempting to make an add-in that can target and replace this <ul> with my own custom menu.

Any idea how this zz___ id is determined and whether there are other variations that can be seen? Is this a good id to use as a hook for my Javascript or is there something else that may work better?

Answer 1

Instead of targeting the exact ID, you can look for IDs ending with _TopNavigationMenu or _RootAspMenu.

If you're using CSS you can access the <ul> via CSS selectors:

/* ul whose id is ending with "_RootAspMenu" within a div
   whose id is ending with "_TopNavigationMenu" */
div[id$=_TopNavigationMenu] ul[id$=_RootAspMenu] { color: pink; }

In case you use JavaScript / jQuery there is also such an "ends with selector":

$("div[id$='_TopNavigationMenu'] ul[id$='_RootAspMenu']").css("color", "pink");

Answer 2

I would not suggest to hook this ID=zz10_RootAspMenu in your JavaScript. SharePoint has its own internal way to generate IDs.

I had an experience where I was trying to hook the DIV above this UL which you are trying access. But on different environment which had an update, was generating different ID.

So do not use SharePoint generated ID which has tendency to change as a hook, to get things done.

Instead the best practice would be to, open up your master page and place another DIV with your own UniqueID around the UL or it's parent DIV. Then use this DIV with UniqueID as a hook in your JavaScript. See the reference JS below

var i = 0;
var ul = null;
jQuery("div#YourDivId ul").each(function () {
    i++;
    if (i == 1) {
        ul = this.id.toString();
        return false;
    }
});
ul = jQuery("ul#" + ul);

Similarly you can go through Mega Menu On Sharepoint 2013