Using cards as navigation to other cards

I am trying to become good at web design, but feel I am missing that ‘visual eye’ that so many of you have.

The general flow of what I’m trying to make is a top level subject (ex. Math), will bring you to a page of its categories (ex, Linear Algebra, Calculus, Discrete Math… and so on). You can then click on one of those categories to bring you to the actual content/tutorial/blog page itself (which will have a left side nav for different parts of the category). Some example on the side-left nav might if you click on Calculus might be .. integrals, etc etc).

I want to make a page where I will have multiple top-level subjects, all in their own card with an icon (and maybe a description). I’ve been stuck on this for a long time.

View post on imgur.com

  1. What comes next when you click on a major subject (ex. Math)? Another page with 5-15 minor-subject (Calculus, Linear algebra etc..). Can they go in cards ? Surely they must look a little bit different. I feel like clicking on a page with 4 cards, and going to a page with 10-15 cards would look repetitive and bad.

  2. I only have 4 “Main subjects” so there is a lot of white space below. Maybe I need a a light gray/blue background image on part of the page?

I am thinking about making those 4 cards a little bit bigger… and the next page they lead to have 10-15 cards about the original size of the 4 cards. Any feedback would be greatly appreciated!

Site Pages are showing wrong Current Navigation

I have created a few new site pages recently and noticed that the current navigation is not showing correctly.

Wrong Navigation

I need it to show the same current navigation as the master page.

Right Navigation

Under “Navigation Settings” items are managed using “managed metadata term set”

The Global navigation is always inherited with no problems. Please Help?

Is it recommended to have tab index navigation for complex web application?

I am doing requirement gathering for a complex in house web application. My customer is adamant to have keyboard tab index interaction for the application along with regular mouse interaction. My research says, there is no user who is physically challenged, may require tab index interactions.

What is the value add if we incorporate tab index interaction across application? What are the pro and cons to have tab index in a complex web application?

Thanks-

How does SharePoint determine which link to bold in the left navigation in SP 2013?

In sp2013, I am using left nav, and customizing it in the site settings navigation. What I want is that, when I click a link on the nav, when I go to the page, the link in the nav will be bolded. But I am getting inconsistent behavior. It either always bolds the last link or not bold any link.

Some of the links go to the same file, but it has different url params in the end of the url, if that matters.

Does anyone know?

Thanks

Import Navigation Term Set From CSV File

Is there any way to import a term set used for navigation to a term store? I know the standard CSV file has columns for “TermSetDescription”, “Level1”, etc. But upon exporting a navigation term set, it doesn’t look like there are columns for navigation node type (simple link/header vs. term-driven page) or URL. Is there any way to create a CSV with these columns that can be imported into a term store?

Detect navigation change in SPFX Application customizer

I have a SPFX customizer that displays a banner in the topPlaceholder. When the page loads, if it’s a list, then it performs a calculation and then displays the banner.

When I move from one library to another, because the page isn’t performing a full load, I found out I need use the navigatedEvent. This fires when the navigation changes.

However, I need to display the banner differently depending on what folder I’m in within a single document library. When navigating from one folder to another in a document library the navigatedEvent doesn’t seem to fire, even though I am navigating to a different location.

Is this a bug with the navigatedEvent, or should I be using a different event?

    public onInit(): Promise<void> {        var rootSiteFullUrl = this.context.pageContext.site.absoluteUrl;     pnp.setup({       spfxContext: this.context     });     this.context.application.navigatedEvent.add(this,  this.renderControl);       return Promise.resolve<void>();   }       private renderControl(){     Log.info(LOG_SOURCE, `Available placeholders: $  {this.context.placeholderProvider.placeholderNames.map(name => PlaceholderName[name]).join(', ')}`);       //handling the top placeholder     if(!this._topPlaceholder){       this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(           PlaceholderName.Top,            {onDispose: this._onDispose});        if(!this._topPlaceholder){         console.error(`The expected placholder (Top) was not found.`);         return;       }       }      if(this._topPlaceholder.domElement){         const element : React.ReactElement<IInfoBarMainProps> = React.createElement(           MainClosureBar,{             siteRelativeUrl: this._siteRelativeURL,             listID: this._listID,             rootSiteUrl: this._rootSiteURL,             context: this.context           }         );          ReactDom.render(element, this._topPlaceholder.domElement);     }   }    private _onDispose(){     Log.info(LOG_SOURCE, `[IInfoBarApplicationCustomizer._onDispose] Disposed custom top placeholders`);   } 

I have a feeling that there isn’t an event for navigating inside a folder, as when I’m in a folder, there is nothing within the this.context.pageContext that indicates that I’m in a folder.

Why does Tinder/Bumble put navigation at the top?

I noticed on the two most popular dating apps, Tinder and Bumble, they made the decision to put tab-like navigation at the top of the screen. Admittedly this is a stretch to reach, and I’ve always preferred those 5 button tabs at the bottom.

I’m wondering about the justification for this. I’m working on a similar app, and I’m wondering whether to do top or bottom navigation.

enter image description here

enter image description here

vs.

enter image description here