This is a question more geared towards those of you out there that have experience working with the popular SASS/JS Framework, Foundation by Zurb. I am trying to use it as my structural core to my new Wordpress theme and had a question...
Built into Foundation are stylings for buttons, forms, and of course the famous 12-column grid. However, it also comes with jQuery Tabs that can be used to display tabbed content! Well, I wanted to use these to display my theme's navigation and have no clue as to where to start.
Currently, I have the below in place:
<nav class="row" role="navigation"> <dl class="tabs"> <dd class="active"> <a href="#home">Home</a> </dd> <dd class> <a href="#about">About</a> </dd> <dd class> <a href="#contact">Contact</a> </dd> </dl> <ul class="tabs-content"> <li id="homeTab">Home Page?</li> <li id="aboutTab" style="display: none;">About Page?</li> <li id="contactTab" style="display: none;">Contact Page?</li> </ul> </nav>
Again, I'm just beginning with the Foundation framework and as I can tell, this is correct to display the actual tabs... however, this is just for pure content within the tab - NOT a link to a new part of the site that will show an active tab for that section.
How can I use this Foundation Tab logic and meld it with Wordpress so when a user clicks on it, it loads that part of the site and show the correct "active" tab per page.
- User clicks on "News" > An Article and is on single.php. The "News" tab should remain "active" while in the News section of the site.
- User clicks on "Contact" which loads a Wordpress page containing a contact form. "Contact" tab is active.
Any and all help would be greatly appreciated. If you're unclear on what the Foundation Framework is, click here to be taken to their Documentation center and the section on Tabs. I'm honestly at a lose and it's probably in front of me... figured I'd open a conversion to see if someone sees it. LOL