I want to replicate the help guide created by Invision

[theheatho]

Hi,

I am trying to replicate this help guide style that Invision uses for their own support guides. Specifically, I am interested in the left-side navigation, the breadcrumbs at the top, and the top-right TOC. Any ideas on how I can do this? Is there a module I can buy? I have programmers that can probably script it, but frankly they are somewhat lost at where to even start. Any suggestions?

I know Invision used the Pages/Databases modules, which I own, but after that I am pretty lost in how to do this.

[opentype]

The left-side navigation is in this Pages database template set: https://invisioncommunity.com/files/file/8663-pages-superdocs/

The breadcrumb is already a feature of the suite. There is nothing you need to get. 

 

[Claudia999]

But the right-side "Table of contents" is obviously a company secret of IPS 😉 As many times as it has been asked here how it was created, there has never been an answer for example from @Rikki, @Matt or even @Lindy 😉

My great hope is that a TOC is a feature of next Pages update. 🙏🙏🙏🙏🙏

[CoffeeCake]

1 hour ago, Claudia999 said:

But the right-side "Table of contents" is obviously a company secret of IPS 😉

Pages is all about templates. It's not a secret--you can simply view the source and create a similar template yourself. It's just a nav box with links to anchors and some CSS:

<nav class="sGuidesMenu">
  <h2 class="ipsType_reset">In This Guide:</h2>
  <ul class="sGuidesMenu__list">
    <li class="sGuidesMenu__item sGuidesMenu__item--H2"><a href="#generalterms">
		General Terms
	</a></li>
    <li class="sGuidesMenu__item sGuidesMenu__item--H2"><a href="#apps">
		Applications
	</a></li>
  </ul>
</nav>

 

[Meddysong]

2 hours ago, CoffeeCake said:

It's just a nav box with links to anchors and some CSS:

It is but that's not how they created it: it's generated programmatically with JS. Not bad for the case when several people are writing or editing entries.

[theheatho]

I wish they would just sell the help guide as a module. Jeez, the effort to recreate it is annoying.

[Beomyong Park]

On 4/20/2021 at 5:45 AM, Claudia999 said:

But the right-side "Table of contents" is obviously a company secret of IPS 😉 As many times as it has been asked here how it was created, there has never been an answer for example from @Rikki, @Matt or even @Lindy 😉

My great hope is that a TOC is a feature of next Pages update. 🙏🙏🙏🙏🙏

In case you want just a ToC not the nice right-side nav box, you can Add ToC plugin from CKEditor. I works fine as long as the author has permission to post HTML.

[Iwooo]

Would love to see it available. 

It's also good for blogs. Wordpress blogs use it a lot and it helps SEO. 

[WP V0RT3X]

How about this?

 

[Jimi Wikman]

On 7/29/2021 at 10:09 AM, Iwooo said:

Would love to see it available.

It's just a snippet of JS 🙂

Try something like this:
https://quirksmode.org/dom/toc.html

[Lindor]

I can create a Guide IPS page with menu and table of contents by HTML and CSS codes @theheatho.

I need some help with two JS or Jquery functions that I can't make, If any advanced user can give me some ideas or code I will appreciate. I need this:

1. To change the class to expand some menu items: I need "onClick" change the class "cGuides_closed" by "cGuides_open" and "cGuides_open" by "cGuides_closed" again. (I'm testing this code but I don't know if scripts runs ok in pages with HTML editor) 
2. To mark the item that I'm viewing: Need to add the class "cGuides_active" to the item when your URL is visiting. (I'm testing this code but I don't know if scripts runs ok in pages with HTML editor) 

To create this pages and menu you should make this steps:

1. Create a new custom Block Page named "menu_guide" and copy/paste the HTML code in this file: block-code.txt
2. Create a new "Manual HTML" page with any name and copy/paste the HTML code in this file: page-code.txt
3. Edit your theme and add this CSS code in your "custom.css" file: menu-CSS.txt

NOTE: Obviusly, if you would to change this data you need to know some HTML code and edit as you need. To edit the menu your should edit only the block code (once time for all pages that you have included)