SharePoint Online Create a portal series navigation

Preface

About navigation in SharePoint Online is basically an effect and style that consists of HTML + CSS + JavaScript, which is then presented as a data source in a background list or in SharePoint Online metadata navigation. Usually the data source is a list of what we call custom navigation.

Let's cover the metadata navigation and custom navigation for SharePoint Online, respectively.

One, SharePoint online default navigation

If you want to use the default navigation for SharePoint online, you can use F12 to see where the control is located in the master page, such as:

Locate the navigation control in the designer and move to the location of the master page where you navigate;

<sharepoint:aspmenu id="V4quicklaunchmenu"runat="Server"Enableviewstate="false"Datasourceid="Quicklaunchsitemap"usesimplerendering="true"orientation="Horizontal"staticdisplaylevels="1"dynamichorizontaloffset="0"Adjustforshowstartingnode="true"maximumdynamicdisplaylevels="2"Staticpopoutimageurl="/_layouts/15/images/menudark.gif?rev=38"staticpopoutimagetextformatstring=""skiplinktext=""Staticsubmenuindent="0"/>

My personal habit, after moving the navigation, in the original position to add a mark, convenient for later modification, such as:

In this way, we can see that the navigation has changed to our modified SharePoint navigation, such as:

The default navigation is relatively simple to modify, that is, in the navigation directly edit, add can, at the same time we can also click on the small eyes like the icon, set whether visible, such as:

SharePoint online default navigation supports level three navigation, add a connection, drag it to the navigation, you can pop the next level position, dragged in;

Since our navigation may be different from the default style of SharePoint Online, we can use JavaScript and CSS to enforce style changes, depending on the blog that was previously modified for navigation;

Reference: SharePoint 2013 managed navigation and related configurations < two >

Http://www.cnblogs.com/jianyus/p/3520623.html

Ii. SharePoint Online Custom navigation

what we're using here is SharePoint Online.　　 The default navigation , because the style is very convenient to modify, editing is also very friendly, but you may encounter very beautiful navigation, if the use of JavaScript and CSS is difficult to modify the situation, we still need to customize the navigation.

Here, we also briefly introduce the situation of custom navigation.

It's also easy to customize navigation in SharePoint Online by storing the content of the navigation in a custom list and then reading it with the JavaScript API and showing it in the foreground.

In the site content, add the application, such as:

Select a custom list type, such as:

Take a look at the navigation settings, custom navigation is more flexible, there may be a new tab open and other settings, but the default navigation, is not set, we recommend the list name and field name, first named in English, and then modified to Chinese display, so that the internal field name is not the Chinese code, but the first English name, such as:

After modifying to the Chinese display name, we create a navigation data, such as:

Of course, when editing a list, we can also use the Quick Edit feature, which allows us to edit and maintain custom navigation, such as:

Then write JavaScript scripts that read the data, such as:

Add a script.js reference to the master page, and then add a call to the JavaScript method in the master page:

Then we can see the effect of the custom navigation on the homepage, such as:

In particular, the attentive friend may see that I have a CAML statement that is not filled in complete:

Query.set_viewxml ("<View><Query></Query></View>");

Because there is no build tool at hand, inconvenient, so not filled out; but I gave the format, just need to fill in the query inside a sentence hidden equals false, and according to the location of the order, you can;

Furthermore, in order to be able to sort the navigation, I added the location (Position) field, which is hereby explained;

Summary

In fact, the addition of navigation in SharePoint online is very similar to the server version, either by using the self-contained navigation to modify the style or by using custom navigation, saving the list of data, or saving it as XML in the document library. Then the foreground is displayed by reading the navigation in JavaScript or the Shahe solution.

Well, the custom navigation for SharePoint online, we introduce here, next, we will introduce the portal site to create columns.

SharePoint Online Create a portal series navigation