Tabbed Content:
Part I, Layout

Tabbed Content: Part I, Layout

In this three-part tutorial, we'll explore how to create tabbed content, style the navigation to be respectable, and then create an animation to make the whole process pretty.

HTML5 Structure

Using the following semantic HTML5 structure, we'll create the layout for our tabbed content.

  1. <article>
  2.  
  3. <h1>Washington Redskins Quarterbacks</h1>
  4.  
  5. <nav class="toggler">
  6. <a class="current" href="/qb/robert_griffin" title="Robert Griffin III">Robert Griffin III</a>
  7. <a href="/qb/rex_grossman" title="Rex Grossman">Rex Grossman</a>
  8. <a href="/qb/kirk_cousins" title="Kirk Cousins">Kirk Cousins</a>
  9. </nav>
  10.  
  11. <section id="players">
  12.  
  13. <section class="current">
  14. <h2>Robert Griffin III</h2>
  15. <img src="/images/players/robert_griffin_iii.jpg" title="Robert Griffin III"/>
  16. <p>An elusive quarterback with a rocket arm, RG3 has both the potential and the physical tools to turn around the Redskins franchise.</p>
  17. </section>
  18.  
  19. <section>
  20. <h2>Rex Grossman</h2>
  21. <img src="/images/players/rex_grossman.jpg" title="Rex Grossman"/>
  22. <p>A fearless gunner, Grossman was able to muster both wins and yardage without too many assets at his disposal in 2011.</p>
  23. </section>
  24.  
  25. <section>
  26. <h2>Kirk Cousins</h2>
  27. <img src="/images/players/kirk_cousins.jpg" title="Kirk Cousins"/>
  28. <p>Cousins is a raw talent, but has all of the intangibles and aptitude to become a viable backup, and maybe even a starter.</p>
  29. </section>
  30.  
  31. </section>
  32.  
  33. </article>

To add more tabs, simply add another child a to the parent nav, and also another inner section and your desired content.

Now that the HTML layout is set up, its time to style our tabbed content.

Tags

Add Comment

Leave a Comment or Reply
Fuel the conversation with your thoughts using the form below. Email is not made public.
× Processing...

Please Wait while your Comment is being Processed.

*
*
*

Comments 0 Total Responses