Tab Bar in HTML

The video: https://youtu.be/p_VaPsLpyLw
 
First, I made these three SVG files that I can use for icons.

triangle.svg

<svg width='60' height='60' viewBox='0 0 60 60'
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink= "http://www.w3.org/1999/xlink">

    <polygon points='30 5 55 55 5 55 z' fill='green' />
</svg>

circle.svg

<svg width='60' height='60' viewBox='0 0 60 60'
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink= "http://www.w3.org/1999/xlink">

    <circle cx='30' cy='30' r='25' fill='red' />
</svg>

square.svg

<svg width='60' height='60' viewBox='0 0 60 60'
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink= "http://www.w3.org/1999/xlink">

    <polygon points='5 5 55 5 55 55 5 55 z' fill='yellow' />
</svg>

Then I made this HTML code for the three tabs. Note that the HTML files are red.html, green.html, and yellow.html.

    <div id='tabs'>
      <a href='red.html'>
        <figure>
          <img src='circle.svg' alt='red' />
          <figcaption>Red</figcaption>
        </figure></a>

      <a href='yellow.html'>
        <figure>
          <img src='square.svg' alt='yellow' />
          <figcaption>Yellow</figcaption>
        </figure></a>

      <a href='green.html'>
        <figure>
          <img src='triangle.svg' alt='green' />
          <figcaption>Green</figcaption>
        </figure></a>
    </div>

Of course, the trick is to apply the right styles to all of this.

Note that the tabs are in a DIV and each tab is in a FIGURE. We can put styles on the DIV and the FIGUREs to make it the way we want.

You can position the tabs using ABSOLUTE or FIXED to keep them at the top or bottom of the screen. But you'll need to make some allowances for the rest of the page content to keep it below the tabs (if the tabs are at the top of the page) or above the tabs (if the tabs are at the bottom).

I made some styles like this, and I put them in a file called tabs.css. These styles put the tabs at the bottom of the page. If you want the tabs at the top, change bottom: 0; to top: 0; and margin-bottom: 4em; to margin-top: 4em;

        a { text-decoration: none; }
        div#tabs { width: 100%; background-color: lightgray; 
            position: fixed;
            bottom: 0; right: 0; left: 0;
            padding: 4px 0;
        }
        div#tabs figure { display: inline-block; width: 32%; margin: 0; 
            text-align: center;
            font-family: sans-serif; font-size: 12px; 
        }
        div#tabs figure img { height: 24px; }
        div#content { margin-bottom: 4em; }