I am currently developing a comprehensive CSS tabs navigation system. Here is the link to what I'm trying to achieve: http://jsfiddle.net/7fZnn/1/
However, I want to avoid using inline CSS to position my tabs. In my search for alternatives, I came across the following options:
- The attr() function, which is only supported for content attribute when selecting an element with :before or :after
- CSS counters would be ideal, but like the attr() function, it only works in content attribute
- CSS variables should work in Firefox 29; unfortunately, even though I am using version 30, it doesn't seem to work and I'm unsure why...
Here is my code utilizing CSS variables (with counters in comments): http://jsfiddle.net/j8wxQ/2/
The HTML
<div class="container">
<div class="tabs">
<div class="tab" id="foo">
<a href="#foo">Foo</a>
<div class="content">
<h1>Tab 1</h1>
<p>Lorem Ipsum...</p>
</div>
</div>
<div class="tab" id="bar">
<a href="#bar">Bar</a>
<div class="content">
<h1>Tab 2</h1>
<p>Lorem Ipsum...</p>
</div>
</div>
<div class="tab" id="toto">
<a href="#toto">Toto</a>
<div class="content">
<h1>Tab 3</h1>
<p>Lorem Ipsum...</p>
</div>
</div>
<div class="tab" id="tata">
<a href="#tata">Tata</a>
<div class="content">
<h1>Tab 4</h1>
<p>Lorem Ipsum...</p>
</div>
</div>
<div class="tab default" id="titi">
<a href="#titi">Titi</a>
<div class="content">
<h1>Tab 5</h1>
<p>Lorem Ipsum...</p>
</div>
</div>
</div>
</div>
The CSS
:root {
var-tab: 0px;
}
@media screen and (min-width: 1025px) {
.container {
width: 1000px;
margin: auto;
}
}
@media screen and (max-width: 1024px) and (min-width: 641px) {
.container {
width: 99%;
margin: auto;
}
}
@media screen and (max-width: 640px) {
.container {
width: 100%;
margin: 0;
padding: 0;
}
body, html {
margin: 0;
padding: 0;
}
}
.tabs {
position: relative;
width: 100%;
/*counter-reset: tab 0;*/
}
.tab {
/*counter-increment: tab;*/
var-tab: calc(var(tab) + 75px);
}
.tab .content {
display: none;
position: absolute;
top: 50px;
margin-top: -5px;
border: solid 5px rgba(0,0,255, 0.1);
padding: 10px 10px 10px 10px;
}
.tab:target .content {
display: block;
position: absolute;
top: 50px;
}
.tab.default .content{
display: block;
position: absolute;
top: 50px;
}
.tab:target ~ .tab.default .content {
display: none;
}
.tabs .tab a {
position: absolute;
top: 0;
left: var(tab);
/*left: calc(75px * counter(tab));*/
display: inline-block;
height: 45px;
line-height: 45px;
min-width: 75px;
margin: 0;
padding: 0;
text-decoration: none;
color: #000;
vertical-align: middle;
border-bottom: solid 5px rgba(0,0,255, 0.1);
text-align: center;
}
.tabs .tab a:hover {
border-bottom: solid 5px rgba(0,0,255,0.5);
}
.tabs .tab:target a {
border-bottom: solid 5px rgba(0,0,255,1);
}
p {
text-align: justify;
}
If you have any insights into what I might be overlooking or suggestions for alternative methods to achieve my objective, your assistance would be greatly appreciated!
Thank you for your help!