Beautiful Interactive Navigation for SharePoint Online​

WHY THE NAVIGATION?​

Ease of use for your site visitors. No need for the clunky left navigation or extremely wide top navigation. As much as we love our sub sites and its child sites our own, they can get pretty long and nasty looking jumble…

  • SITE USERS:​
    Ease of navigation ( DUH!)​
    Interactive experience​
    Enhanced user experience, responsive design, visual guidance ​
  • SITE ADMINs:​
    Ease of maintenance​(They don’t have to wait around for those smart developers to come add their fancy scripts to include subsite that we created yesterday, you know… we shall be self sufficient, include an item in the dynamic list and be done with it!)
    Above all else, a fashionable landing page(if I say so myself, what? Only I say that? hmmm…whatever.gif..) that attracts users without losing proper functionality​
    Also, ummm…….Why the heck NOT? ​

 Basic Building blocks

  • Team/ Publishing Site (This solution uses JavaScript, Bootstrap libraries. We kinda need to insert CEWP/ScriptEditor)
  • List (We are gonna hook this up with the script to read and render the tiles – ahem..ahem…dynamic ahem..)
    Fields:

    • Title (Out of the box, suffices. Nothing fancy)
    • ImageURL (Single line of text)
    • RedirectURL(Single line of text)
    • Description(Single line of text)

Script &  (You can unleash your creativity here… ie., as acceptable by your team)mask.jpg

SITE PAGE

  • Go to the home page of your site where you want to insert this navigation widget
  • Why home? Well, you can go to ‘welcome’, ‘adios’,’ciao’,’namaste’ pages of your choice. I chose
  • ‘HOME’  > Edit Page > Insert Content Editor web part > Add the script file reference

POPULATE THE LIST
(them things need to have a collection of site navigational items to be displayed in the fancy tiles widget!)

Picture1.pngThose that noted the change in list experience, YES, its classic

  • You can switch back and forth between modern/classic
    WHY?
  • Cause you can. I couldn’t quick edit in the modern view, I attribute it to the gods of cloud being upset with my zeal to share a little much
  • There you go! You have the list with some pretty rows!

THE SCRIPT

This script file/reference needs to go into either a Content Editor Web Part or Script Editor web part.(BuildTiles.js)

THE STYLE

This is a lot of fun to mess with and unleasing your inner artist. (StyleTiles.css)

Now create a page in your SharePoint site and insert the web part with your script file.(BuildTiles.js)

Thats it kids! Here ya go, your custom attractive navigation tiles!
2018-07-13_20-29-27.png
No video no proof! Right? 😉
Here you have the demo of the list, and how the interactive navigation can be used in your SharePoint site.

Enjoy your fancy navigation for SharePoint Online-Office 365!

Keep learning and sharing…

lotus-beauty1.jpg

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s