One design element I have been interested in incorporating into some of my own works is that of tabbed navigation elements where clicking on a tab header loads the content for that tab. I have put these in place here and you can see them in action above - you actually used them to get here.


But, how did I do this? Here's the process.


Tabbed Navigation Development Process

Step 1: Google Keywords

First off, I didn't even know the exact name for what I wanted to do. So, I started running a few of the following keywords through Google:

  • Tabs
  • Tabbed
  • Content
  • Navigation
  • CSS

Then I dug through the results. Eventually I found what I was looking for at: www.onextrapixel.com/

Step 2: RTFM

Next I read the instructions, copied the supplied code and, very carefully, added the necessary elements to my site.


It was, essentially, a CSS file for controlling the tab structure and a batch of HTML that made up the tab structure.

Step 3: Implementation

I put the new tabs.css file into my /css/ folder, updated my site pages to include the new CSS styling and built a page that included the tab-navigation HTML.


I was ready to go!

Step 4: Test Implementation

With the code and CSS in place, I opened up my creation in a browser to see what I had created.


It... was a bit ugly and clunky looking. But, it worked! So, how could I make this stuff pretty?


Through two of my favourite things - dissection and modification.

Step 5: Tweak

F12 fired up the Chrome Debugger that let me look at the code of the page I was on, see how the different elements were interacting and even modify them on the fly.


Using this tool I moved a few things around, tightened up some spacing and adjusted a few colours - all while making notes of what I was doing. Why? Because changes made in the Debugger are not saved to the HTML/CSS files in question. So, after making the change in the Debugger I changed the HTML/CSS file(s) in Notepad++, saved the changes and reloaded the page.

Step 6: Shazam?

With the page reloaded and the changes in place I checked the page again, liked the new look and uploaded it to the server - publishing it onto the World-Wide-Web.


Shazam!


From here I had the core Tabbed Navigation in place and set to building the HTML-pages that would populate each tab.


I also followed this same approximate process to implement this accordion-style list.