Nav-Menu to Variables

This Custom Navigation Menu is an advanced design of several features including BBCode, Variables, Secrets, Sections, Icons, Custom Containers and CSS. Please note this is the same Nav Menu you see on this page and this world in the upper left hand corner. A version of this Nav Menu has been recreated below showing the Hot Links within the secrets.

Warning: The World Anvil Surgeon General has determined that Custom CSS can lead to bouts of unrelenting tinkering and the loss of hours.

Creation

Hot Links

Apolo

Athena

Campaigns

Charts

Dashboard

Feature Request

Help

Heroes

Maps

Stat Blocks & Sheets

Studio Sheet Design

Subscribers

Timelines

Tiers

Secrets (Journeyman+)

CSS Customization (Journeyman+)

Variables (Master+)

Custom Containers (Grandmaster+)

---

Step 1 - Variables

Create a variable collection called Nav-Menu

Create one Variable Fragment per section of the menu

A space has been added between [ and v to keep variables from rendering in the example text.

Variable Examples

[ var:nav-menu-toc-graylion]

[ var:nav-menu-home-graylion]

[ var:nav-menu-hot-links-graylion]

Populate the Variables with BBCode, Custom Containers, Header and URL

BBCode in Variables Examples

Variable One - Home

[container: nav_home] 
  [h2] 
    [url: your_world_url_link_here] Home [/url] 
  [/h2] 
[/container]

Variable Two - TOC

[container: nav_toc] 
  [toc] 
[/container]

Variable Three - Hot Links

[container: wrap_5][h2]Hot Links[/h2][/container]
[container: author_line] [url: https://www.worldanvil.com/apollo/] [section:fas fa-crosshairs] [/section] Apolo [/url] [/container]
[container: author_line] [url: https://www.worldanvil.com/world/athena/] [section:fas fa-crosshairs] [/section] Athena [/url] [/container]
[container: author_line] [url: https://www.worldanvil.com/campaigns] [section:fas fa-crosshairs] [/section] Campaigns [/url] [/container]
[container: author_line] [url: https://www.worldanvil.com/world/chart/list] [section:fas fa-crosshairs] [/section] Charts [/url] [/container]
[container: author_line] [url: https://www.worldanvil.com/dashboard/] [section:fas fa-crosshairs] [/section] Dashboard [/url] [/container]
[container: author_line] [url: https://www.worldanvil.com/community/voting/] [section:fas fa-crosshairs] [/section] Feature Request [/url] [/container]
[container: author_line] [url: https://www.worldanvil.com/help/] [section:fas fa-crosshairs] [/section] Help [/url] [/container]
[container: author_line] [url: https://www.worldanvil.com/characters] [section:fas fa-crosshairs] [/section] Heroes [/url] [/container]
[container: author_line] [url: https://www.worldanvil.com/world/map/list] [section:fas fa-crosshairs] [/section] Maps [/url] [/container]
[container: author_line] [url: https://www.worldanvil.com/heroes/world/list?type=world] [section:fas fa-crosshairs] [/section] Stat Blocks & Sheets [/url] [/container]
[container: author_line] [url: https://www.worldanvil.com/studio/sheets] [section:fas fa-crosshairs] [/section] Studio Sheet Design [/url] [/container]
[container: author_line] [url: https://www.worldanvil.com/world/access/subscriber/list] [section:fas fa-crosshairs] [/section] Subscribers [/url] [/container]
[container: author_line] [url: https://www.worldanvil.com/world/timeline/list] [section:fas fa-crosshairs] [/section] Timelines [/url] [/container]

---

Step 2 - Secrets

Create a secret called Nav-Menu-Secrets.

Place your nav-menu-hot-links variable in the Nav-Menu-Secrets.

A space has been added between [ and v to keep variables from rendering in the example text.

Hot Links Secret

[ var:nav-menu-hot-links]

---

Step 3 - World Configuration

World Configuration > Homepage > Display Options > Uncheck Display Table of Contents

By using the [ TOC] instead of the default TOC, this allows us to control the order of items in the navigation menu, like placing the Home link above the TOC.

If your feeling adventurous you could display: none the TOC Header, an add your own renaming the TOC.

Next we will add our variables and secret in the Custom Navigation Menu section.

World Configuration > Display > Global Content > World Navigation Sidebar Custom Content

Note of setting up similar variables on different worlds, I recommend using slightly different variable names. I experienced odd results until changing several variable names.

[ var:nav-menu-toc-graylion]

[ var:nav-menu-home-graylion]

[ secret:123lotsofnumbers789]

At this point you should have a custom menu with everything except your own artistic CSS styling.

---

Step 4 - CSS Styling

Paste the CSS in your World CSS Styling

Change color and image to meet your artistic touch.

A space has been added between / and * so the CSS comments show within the code block. you must remove the space or your CSS will catch on fire.

CSS Styling

.user-css .world-navigation-box .world-menu .category-list + .list-box {
  display: none;
}
  
/ * This bit is the actual animation being called above, you can change the colours in here to whatever you like. I had to add those 'inset' shadows so that it'd glow inwards as well, you may be able to get rid of them */
@-webkit-keyframes glow {
  from {
  box-shadow: 0 0 1px #fff, 0 0 5px #fff, 0 0 20px #000000, 0 0 25px #fff, 0 0 25px #fff, inset 0 0 1px #fff, inset 0 0 1px #fff;
  }
  to {
  box-shadow: 0 0 15px #fff, 0 0 20px #fff, 0 0 25px #000000, 0 0 30px #fff, 0 0 80px rgba(237,227,194,0.1), inset 0 0 3px #fff, inset 0 0 4px #000000;
  }
}


/ * The content url is to change the icon button */
/ *The animation you can change the 2s for faster/slower animation*/
.user-css-presentation .world-navigation-palette-trigger {
  -webkit-animation: glow 2s ease-in-out infinite alternate; 
  -moz-animation: glow 2s ease-in-out infinite alternate;
  animation: glow 2s ease-in-out infinite alternate;
  background: #ffffff;
  border: 2px solid black;
  border-radius: 10px;
  content: url(https://www.worldanvil.com/uploads/images/cf29d2af26e274b82cc057018c66e7e6.png
  position: absolute;
    top: 45px;
    left: 10px;
  height: 80px;
    max-height: 60vh;
  padding: 0px;
  width: 80px;
}


.user-css-presentation #world-navigation-sidebar {
  background: white;
  background-image: white;
  border: 1.5px solid black;
  border-radius: 10px;
  height: 100vh;
    max-height: 58vh;
  margin: 0;
  overflow: auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 25px;
  position: absolute;
    left: 10px; 
    top: 130px; 
  width: 325px !important;
    max-width: 325px !important;
    min-width: 325px !important;
  z-index: 1500;
}
  
.user-css-presentation #world-navigation-sidebar::after {
  bottom: unset;
  display: none;
  }


.user-css#world-navigation-sidebar h5 {
  font-size: 1.05em;
} 


/ * MANUAL TOC NAV MENU */


/ * Home link */
.user-css .home_nav h3 {
  text-align: center;
  background-color: darkred;
  color: white;
  padding: 3px;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  margin-top: 10px;
  font-size: 24px;
}


.user-css .home_nav h3 a {
  color: white;
}


.user-css .home_nav h3 a:hover {
  color: white;
}


/ * Hides uncategorized articles */
.user-css .nav_toc .world-toc-loader .list-box:nth-child(3) .category-list {
 display:none
}


/ * Blends secrets in and hidez secrets name and group */
.user-css .wrap_6 .user-css-secret {
 background-color: transparent;
 margin: 0px;
 padding: 0px;
}


.user-css .wrap_6 .user-css-secret h5 {
 display: none;
}


.user-css .wrap_6 .secret-groups {
 display: none;
}


/ * Menu Item Container */
.user-css .author_line a {
 white-space: nowrap;
 display: inline-block;
 font-size: 14px;
 font-weight: bold;
 padding-left: 20px;
 margin-top: 5px;
 margin-bottom: 5px;
 color: black;
}


/ * Menu Font Awesome Icon */
.user-css .fas fa-crosshairs {
 white-space: nowrap;
 display: inline-block;
 margin-right: 20px;
 color: black;
}

Original CSS for the Nav-Menu from Spartango and Stormbrill.

---

Original and really cool Accordian Spoiler code by User51