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.