Multi-Tabbed Panel
This simulates a panel with several bookmark-style pull tabs that switch between the content.
Manufacturing
The Content
Where to insert it
Anywhere BBCode is supported.What to insert
First, we need an outer container to hold the tabbed panel. This needs to be set to a fixed height later, because it can't adjust to the content automatically.
I recommend assigning two separate classes: One for tabbed panels in general, and one that indicates a particular height.
Next, the different pages need to be inserted. Each one will be marked with a second class indicating its position.
Inside each page, there will be two more containers: one for the pull tab, and one for the actual content.
[container:tabs t-100p]
[container:tab-page tab-0]
[container:tab-caption]Page 0[/container]
[container:tab-content]
This is displayed by default.
[/container]
[/container]
[container:tab-page tab-1]
[container:tab-caption]Page 1[/container]
[container:tab-content]
This is the content for page 1.
[/container]
[/container]
[container:tab-page tab-2]
[container:tab-caption]Page 2[/container]
[container:tab-content]
This is the content for page 2.
[/container]
[/container]
[container:tab-page tab-3]
[container:tab-caption]Page 3[/container]
[container:tab-content]
This is the content for page 3.
[/container]
[/container]
[/container]The CSS to make it work
The different layers
First, let's define variables for layering the elements on top of each other. These will be used for the "z-index" property.
:root{
--layer-inactive-tab:1;
--layer-default-tab:2;
--layer-active-tab:3;
}Positioning
The outer container needs to be set to "position: relative" so that we can position the pages later.
.user-css .tabs{
position:relative;
}
Remember what I said about the fixed height? Here is how we use the second class to adjust the height. Note that the outer container will be taller than the content pages so that the pull tabs will fit inside. You also need to consider the top and bottom padding added to the content.
.user-css .tabs.t-100p{
height:170px;
}
.user-css .tabs.t-100p .tab-content{
height: 100px;
}
If you need several tab panels with different sizes, just add more blocks like these.
.user-css .tabs.t-200p{
height:270px;
}
.user-css .tabs.t-200p .tab-content{
height: 200px;
}
Styling the pages
The individual pages need to be set to "display: inline-block" so that they will line up horizontally. The height needs to be set to that of the pull tabs.
All pages will get the z-index corresponding to the inactive tab layer. Then we will target the default page - which we marked with the class "tab-0" - and place it above those.
.user-css .tabs .tab-page{
padding:0px;
margin-top:0px;
display: inline-block;
height: 50px;
z-index: var(--layer-inactive-tab) ;
}
.user-css .tabs .tab-page.tab-0{
z-index: var(--layer-default-tab) ;
}
Styling the pull tabs
For the pull tabs, I recommend a fixed width. They will be positioned next to each other with absolute values. I also prefer to hide the pull tab for the default page alltogether, because it will be shown anyway when we stop hovering over the panel. By default, the pull tabs are lowered behind the content panels by setting the "margin-top" property to a fraction of their height. Once the mouse hovers over the associated page - that is to say, the pull tab which is its only visible part - the pull tab slides up over the course of 0.2 seconds. This is done by setting the "transition" property.
.user-css .tabs .tab-page .tab-caption{
padding:10px;
width: 100px;
border: none;
background: #222222;
color: #ffffff;
position:absolute;
margin-top:20px;
transition: margin-top 0.2s linear;
}
.user-css .tabs .tab-page.tab-0 .tab-caption{ visibility:hidden; }
.user-css .tabs .tab-page.tab-1 .tab-caption{ left:5px; }
.user-css .tabs .tab-page.tab-2 .tab-caption{ left:110px; }
.user-css .tabs .tab-page.tab-3 .tab-caption{ left:215px; }
.user-css .tabs .tab-page:hover .tab-caption{
margin-top:0px;
transition: margin-top 0.2s linear;
}
Styling the content
Each page content block will be positioned absolutely. It will line up with the left edge of the parent container, stretch to the right one, and start below the space that we reserved for the pull tabs.
The "overflow-y" property displays a scroll bar in case the content should be too long for the reserved space.
.user-css .tabs .tab-content{
background: #444444;
border: 5px solid #222222;
color: #ffffff;
margin-top: 0px;
padding:10px;
overflow-y: auto;
position:absolute;
left: 0px;
top: 50px;
right: 0px;
z-index:var(--layer-inactive-tab) ;
}
.user-css .tabs .tab-page.tab-0 .tab-content{
z-index:var(--layer-default-tab) ;
}The content of the other pages will be brought to the front on hovering over the associated page.
.user-css .tabs .tab-page:hover .tab-content{
z-index:var(--layer-active-tab) ;
visibility:visible;
}
Access & Availability
Grandmaster
Complexity
Containers, CSS
Discovery
extensive experimentation,
plus inspiration from this article:
plus inspiration from this article:
Examples
.t-100p
Some filler text above it.Page 0
This is displayed by default.
Page 1
This is the content for page 1.
Page 2
This is the content for page 2.
Page 3
This is the content for page 3.
.t-200p
Of course, some filler text above THIS one, too.Default
Lorem ipsum dolor sit amet, yadda yadda et cetera
and so on...
and so on...
Page 1
Yet another Lorem ipsum for your reading pleasure.
Page 2
And yet another...
Lorem...
ipsum...
...
ZZZzzzZZZzzz...
Lorem...
ipsum...
...
ZZZzzzZZZzzz...
Page 3
...
Huh?
What?
I'm awake!
I swear I didn't...
Ah, whatever.
Huh?
What?
I'm awake!
I swear I didn't...
Ah, whatever.
.t-long
How about a story?Default
The Tale Of The Man With Seven Sons
Prologue
Once upon a time, there was a man.
The man had seven sons.
The seven sons said: "Father, tell us a story!"
And the man began...
The man had seven sons.
The seven sons said: "Father, tell us a story!"
And the man began...
Story
"Once upon a time, there was a man.
The man had seven sons.
The seven sons said: "Father, tell us a story!"
And the man began...
The man had seven sons.
The seven sons said: "Father, tell us a story!"
And the man began...
"Once upon a time, there was a man.
The man had seven sons.
The seven sons said: "Father, tell us a story!"
And the man began...
The man had seven sons.
The seven sons said: "Father, tell us a story!"
And the man began...
"Once upon a time, there was a man.
The man had seven sons.
The seven sons said: "Father, tell us a story!"
And the man began..."
The man had seven sons.
The seven sons said: "Father, tell us a story!"
And the man began..."
"
"Epilogue
And thus, the tale went down in history.
This is the most boring story I have ever heard.
Comments