Speed up your Oxygen workflow

with Swiss Knife

A true Oxygens Editor Enhancer
For only $25

Tabs with CSS only

HTML structure

<nav>
  <ul class="stepProgress">
    <li><a href="#1" >1</a></li>
    <li><a href="#2" >2</a></li>
    <li><a href="#3" >3</a></li>
    <li><a href="#4" >4</a></li>
  </ul>
</nav>
<div id="1"> Step 1 </div>
<div id="2"> Step 2 </div>
<div id="3"> Step 3 </div>
<div id="4"> Step 4 </div>
<div id="5"> Step 5 </div>

CSS

div{
  width:200px; height:200px;
  border:2px solid grey;
  text-align:center;
  display:none;
}

div:target{
  display:block;
}

Example on JSFiddle

If you need help with custom scripts or you are not skilled enough to implement something from the tutorial?

HIRE ME

Stay up to date with latest post and updates.