... and without javascript help. This may look easy, but the fact said otherwise. And since I spent hours to complete it, it is here now for my own reference :)
The basics, in colors
-
A couple of paragraphs as 1st tab's content
Duis suscipit fringilla sem, vel convallis enim. Donec efficitur diam ornare ante posuere lacinia. Sed nec dolor placerat, ullamcorper mi quis, finibus felis. Nulla quis dui id ligula vulputate accumsan. Nullam vitae diam hendrerit, malesuada urna a, malesuada purus. Sed vitae augue urna. Suspendisse vel tortor ipsum. In suscipit in mi viverra blandit.
Facilis molestias voluptatem eum. Repellendus velit velit aut velit ut dolor rem ducimus. Laudantium delectus soluta sit et ex sed non voluptatem. Qui unde et culpa hic. Ea consequuntur et ex sed totam veritatis voluptas iure.
Soluta reiciendis aperiam odio sunt. Ipsum ullam dolorem fugit sit veritatis consequatur. Illum et quis quisquam omnis aut et quisquam omnis. Aut animi qui voluptatum voluptatem est non nemo eius. Laborum optio sint ut reiciendis.
-
An image as 2nd tab's content
-
A list of links as 3rd tab's content
- Temporibus voluptatibus assumenda quaerat beatae voluptates. Consectetur a temporibus est doloribus maxime. Illum illum laudantium et non non.
- Totam non error inventore reprehenderit tempora praesentium. Facere iusto enim molestiae. Temporibus dolorem quis mollitia aliquam quos autem ab alias. Reprehenderit aut sapiente omnis. Rerum ut ut esse similique. Consequuntur autem tempora et soluta recusandae dolore voluptatem.
Same as above tabs, with a better look (after some fine-tune)
-
A couple of paragraphs as 1st tab's content
Duis suscipit fringilla sem, vel convallis enim. Donec efficitur diam ornare ante posuere lacinia. Sed nec dolor placerat, ullamcorper mi quis, finibus felis. Nulla quis dui id ligula vulputate accumsan. Nullam vitae diam hendrerit, malesuada urna a, malesuada purus. Sed vitae augue urna. Suspendisse vel tortor ipsum. In suscipit in mi viverra blandit.
Facilis molestias voluptatem eum. Repellendus velit velit aut velit ut dolor rem ducimus. Laudantium delectus soluta sit et ex sed non voluptatem. Qui unde et culpa hic. Ea consequuntur et ex sed totam veritatis voluptas iure.
Soluta reiciendis aperiam odio sunt. Ipsum ullam dolorem fugit sit veritatis consequatur. Illum et quis quisquam omnis aut et quisquam omnis. Aut animi qui voluptatum voluptatem est non nemo eius. Laborum optio sint ut reiciendis.
-
An image as 2nd tab's content
-
A list of links as 3rd tab's content
- Temporibus voluptatibus assumenda quaerat beatae voluptates. Consectetur a temporibus est doloribus maxime. Illum illum laudantium et non non.
- Totam non error inventore reprehenderit tempora praesentium. Facere iusto enim molestiae. Temporibus dolorem quis mollitia aliquam quos autem ab alias. Reprehenderit aut sapiente omnis. Rerum ut ut esse similique. Consequuntur autem tempora et soluta recusandae dolore voluptatem.
Feel tree to further adjust it and use it for your webpages...
Note for its "just a bit of complicated" CSS
If you take a look at the source of this page, you'll see that for a simple HMTL structure like below:
<ul class="tabs"> <li><input id="tab-1" name="tab" type="radio" checked> <label for="tab-1">Tab 1</label> <div>...</div></li> <li><input id="tab-2" name="tab" type="radio"> <label for="tab-2">Tab 2</label> <div>...</div></li> <li><input id="tab-3" name="tab" type="radio"> <label for="tab-3">Tab 3</label> <div>...</div></li> </ul><!-- end of ul.tabs -->
you'll need to style it in a bit hard way (see its styling companion, below):
<style>
ul.tabs{
position: relative; /* as ref absolutely positioned ul.tabs's div */
min-width: 18em; /* avoid list items get wrapped to next line */
margin-bottom: 13em; /* 1em by default, but now is a bit larger to make room for
ul.tabs's div (by pushing page content under ul.tabs to bottom).
how far? see CSS height rule under ul.tabs input[type="radio"]~div{} somewhere below.*/
}
ul.tabs>li{
display: inline-block; /* list items to be displayed in a line */
}
ul.tabs input[type="radio"]{
display: none; /* hide the traditional radio buttons and use labels instead as menu items */
}
ul.tabs input[type="radio"]+label{
position: relative; /* allow menu items ordering in z direction (see following line below) */
z-index: 1; /* menu items need to be on top, basically */
padding: 1em; /* basic padding */
}
ul.tabs input[type="radio"]~div{
display: none;
position: absolute;
left: 0;
width: calc(100% - 2em);
height: 10em; /* distance to push page content under ul.tabs,
see margin-bottom rule under ul.tabs{} rule above.*/
overflow: auto; /* show scroller when necessary */
padding: 1em; /* basic padding to content */
}
ul.tabs input[type="radio"]:checked~div{
display: block;
}
</style>
We may want to work on an alternative, using CSS feature
:target,
but I find that much much harder in other couple of ways:
- Navigation will be jumpy.
- You can't style selected tab (anchor), without some help from javascript.
Comments