+ Floating Vocab Jump Menu (BBCode + CSS Container)

Using a CSS container for a Vocab Jump Navigation system.   Credit: I found the box idea in a return to top (can't remember the user) and powered by World Anvil box on Ademal's page.  

BBCode

You'll need to setup anchors of some sort for the [url=#LinkName] to link to. See 'WORLD ANVIL TAGS REFERENCE' on your editor page and look at the bottom for the anchor and h tags with '|ID' in them.   Copy, paste this BBCode and edit as needed (I place it in one of the top section boxes so it's not taking up space in my main article area.)
[container:side-box-vocab]
[center][h3]Navigate[/h3][/center]
[table][td]
[url=#a]A[/url][br]
[url=#e]E[/url][br]
[url=#i]I[/url][br]
[url=#m]M[/url][br]
[url=#r]R[/url][br]
[url=#v]V[/url][br]
[/td]
[td]
[url=#b]B[/url][br]
[url=#f]F[/url][br]
[url=#j]J[/url][br]
[url=#n]N[/url][br]
[url=#s]S[/url][br]
[url=#w]W[/url][br]
[/td]
[td]
[url=#c]C[/url][br]
[url=#g]G[/url][br]
[url=#k]K[/url][br]
[url=#o]O[/url][br]
[url=#t]T[/url][br]
[url=#y]Y[/url][br]
[/td]
[td]
[url=#d]D[/url][br]
[url=#h]H[/url][br]
[url=#l]L[/url][br]
[url=#p]P[/url][br]
[url=#u]U[/url][br]
[url=#z]Z[/url][br]
[/td]
[/table]
[hr]
[small][small][small][small]
[url=#top]return to top[/url]
[/small][/small][/small][/small]
[/container]
 

CSS

Copy, paste this CSS and edit as needed.  

.side-box-vocab{
  opacity: 0.5;
  border-radius: 10px; 
  top: 100px; 
  right: 20px; 
  padding: 10px;
  border: 3px RGBA(30, 30, 30, 0.3)solid; 
  background: #ddd; 
  position: fixed;
  z-index:10;
}

Vocab Container
opacity: 0.5; makes it see thru
border-radius: 10px; rounded corners
top: 100px; distance from top of screen
right: 20px; distance from side of screen
padding: 10px; give it space around the stuff inside
border: 3px RGBA(30, 30, 30, 0.3)solid; border width, color, style; makde the border 3px wide, color the border and make it partially transparent
background: #ddd; bg color; color of the background
position: fixed; Keep it at the top of the screen, even if scroll
z-index:10; Keep it on top of other layers of the page
}

 
*Note: in the #guild-css-help channel someone had troubles with the fixed option for position. Timepool was kind enough to suggest
position: -webkit-sticky;
position: sticky; 
That worked for them.
  A nice explanation of the position property is here. And helps explain the sticky element. Note you need the -webkit-sticky line. The sticky option doesn't seem to work by itself.
  A live example is: Japanese Words and Pronunciation Guide

Updates

8/6/2019:
  • Timepool's suggestion to try position: -webkit-sticky and sticky
  • cleaning up the page a bit and adding link to CSS reference and comments

For Grandmasters +

Grandmaster Icon


Containers and Sections are for guild members Grandmaster and above. If you're not subscribed at that level, you can upgrade your membership on your account page.


(Grandmaster icon property of World Anvil.)

CSS Reference


If you'd like to learn more about CSS, check out FreeCodeCamp and w3schools' CSS Reference.
 
The WA Codex is a good place to start learning about how to play in WA.
 
WA's discord #guild-css-help channel is also great. I hang out there just to learn from what people ask about.


Comments

Please Login in order to comment!
Powered by World Anvil