MiniBar CSS

Button
One

BUTTON ONE CONTENT HERE

Button
Two

BUTTON TWO CONTENT HERE

Button
Three

BUTTON THREE CONTENT HERE

Container break down

[container:mini-bar-dad] [br]
[container:mini-bar-button]
[container: fas fa-burn burn-card-icon][/container]
[container:btn btn-primary]Button [br] One[/container]
[container:mini-bar-content] BUTTON ONE CONTENT HERE [/container]

[/container]
[br] [br] [br] [br] [br] [br] [br] [br] [/container]

---

[container:mini-bar-dad]

Arguably the most important element, daddy mini-bar will organize where the content appears. This also makes it possible to easily scale with extra buttons as it forces all content to appear in the same location regardless of which button is being pressed. If it doesnt have enough height for the content blocks add additional [br] tags to the beginning or the end of container.

[container:mini-bar-button]

The second layer of container, this parent container makes it possible to alter properties of different child elements on click.

[container: fas fa-burn burn-card-icon]

Grabbed a flame icon from FontAwesome if you want to switch to something else replace the 'fas fa-burn' with corresponding icon code. Do not remove burn-card-icon, this descriptor sets asides CSS for color shifting.

[container:btn btn-primary]

WorldAnvil supports a series of bootstrap containers, one of which is the generic button icon. While you could theoreticaly use anything here, I recommend having a solid size body to offer ample space for the :hover effect.

[container:mini-bar-content]

super straight-forward, this is the place to put all your content. It will support text, headers, images, links, and additional containers. If you wish to include clickable links, ensure you remove {pointer-events: none;} from .mini-bar-content.

CSS Code Snippet

Add this CSS code to your world

.mini-bar-dad{
background: lightgreen;
position: relative;
width: 740px;
height: 100%;
}


.mini-bar-content {
opacity: 0;
transition: opacity 1s 10s ease;
position: absolute;
width: 75%;
max-height: 100%;
top: 0%;
left: 25%;
background: white;
overflow: hidden;
pointer-events: none;
}


.burn-card-icon {
color: white;
transition: color 1s 10s ease;
padding: 6px;
transform: scale(1.2)
}


.mini-bar-button:active .burn-card-icon, .mini-bar-button:focus .burn-card-icon {
color: crimson;
transition: color 0.5s 0s ease-out;
}


@keyframes zforward{
 0% {
  z-index: 0;
 }
 100% {
  z-index: 100;
 }
}


.mini-bar-button:active .mini-bar-content, .mini-bar-button:focus .mini-bar-content {
opacity: 1;
transition: opacity 0.5s 0s ease-out;
animation: zforward 1s forwards;
}


.mini-bar-button:hover .mini-bar-content{
animation: zforward 1s forwards;
}


.mini-bar-button {
display: inline-block;
padding: 6px;
margin-left: 1%;
}

Fiddling with the properties of the css code above will allow to alter both the background information and the timing of the fade-in and fade-out effects. If you need the content to hold on the page for slightly longer adjust the 10s underneath the .mini-bar-content descriptor, several examples are below:

This is the current default and will hold content for a complete 10 seconds

.mini-bar-content {transition: opacity 1s 10s ease; }

This change will hold content for an even longer 30 seconds

.mini-bar-content {transition: opacity 1s 30s ease; }

This alteration will only hold content for 3 seconds (okay sanic, slow down buddy)

.mini-bar-content {transition: opacity 1s 3s ease; } 

About the MiniBar

Affectionately referred to as the 'MiniBar' this small CSS hack will allow you to build a JS-Esque display while only relying on key CSS animation features. Clicking briefly on the mini-bar-buttons will trigger an opacity transition for the content within the green region, while simutaneously shifting the icon color.
Working consistently if the user activates the buttons sequentially, the z-index makes displaying content tricky if activated in reverse. I've attempted tackling this issue via two methods:

1. Adding the small animated icon to the left assists the user in knowing their action is registered even if the content is not always displayed.
2. Given the limitations of WA, we only have access to -attribute:active and -attribute:hover. Each button while hovered will force their corresponding content block to the front z-layer providing the illusion of a css-attribute:focused as long as the user does not leave the safety of said button.

Please Take Note:

This code heavily relies on nested containers to target specific properties on the page. Only WorldAnvil members of GrandMaster⁺ will be able to take advantage of the code found here.

Throw Me a Bone?

If you found these code snippets useful and utilized them on any of your world pages, I would appreciate if you credited back to me directly or linked to this article here. I'll even link back to your articles below!
If you need help getting your code working or have any questions feel free to contact me through one of the following portals:

• WorldAnvil: icastbolt
• Twitter: icastbolt
• Discord: BOLdT#7923

ENJOY!

Worlds Using the MiniBar

No pages use the minibar quite yet
Be the first to adopt tiny fridge technology!