Hi friends! I updated the tabbed networking coding I had on the last site in case anyone wants to use it over here!
Changes:
-there are five tabs now. As before, you can rename these to be whatever works best for your needs - separating out boys and girls, hurlables and marries, whatever you want.
-there is now a :hover command built into the code. If you're planning on using hovers, you can do so without an additional hosted .css. More on that below.
-as with before, any html coding (or bbcode if that's how you roll) should work within the tabs and shouldn't make anything look wonky. Holler if it does.
you can see it in action over here!
For the hover, you can add html coding to personalize your stuff as much as you want. Here's the base:
Replace the X's with whatever style coding you want and you're all set! If you need help making it look a certain way, just holler!
Changes:
-there are five tabs now. As before, you can rename these to be whatever works best for your needs - separating out boys and girls, hurlables and marries, whatever you want.
-there is now a :hover command built into the code. If you're planning on using hovers, you can do so without an additional hosted .css. More on that below.
-as with before, any html coding (or bbcode if that's how you roll) should work within the tabs and shouldn't make anything look wonky. Holler if it does.
you can see it in action over here!
Code:
<link href="https://dl.dropboxusercontent.com/s/nyryjmch79kr8gt/networking2.css?dl=0" rel="stylesheet"><div class="container"><div class="tabbed"><!-- base panel --><input name="tabbed" id="tabbed5" type="radio" checked><section><h1><label for="tabbed5">Basics</label></h1><div><!-- content -->
FIRST TAB CONTENT HERE!
</div></section><!-- first panel --><input name="tabbed" id="tabbed1" type="radio"><section><h1><label for="tabbed1">Upper Class</label></h1><div><!-- content -->
UPPER CLASS CONTENT HERE!
<br><br><br><br><br><br></div></section><!-- second panel --><input name="tabbed" id="tabbed2" type="radio"><section><h1><label for="tabbed2">Middle Class</label></h1><div><!-- content -->
MIDDLE CLASS CONTENT HERE!
<br><br><br><br><br><br></div></section><!-- third panel --><input name="tabbed" id="tabbed3" type="radio"><section><h1><label for="tabbed3">Working Class</label></h1><div><!-- content -->
WORKING CLASS CONTENT HERE!
<br><br><br><br><br><br></div></section><!-- fourth panel --><input name="tabbed" id="tabbed4" type="radio"><section><h1><label for="tabbed4">Needs</label></h1><div><!-- content -->
LAST TAB CONTENT HERE!
</div></section></div></div>For the hover, you can add html coding to personalize your stuff as much as you want. Here's the base:
Code:
<div class="hoverarea" style="XXXXX"><div class="overlay" style="XXXXXXX">
<--! hover text goes here!-->
</div><img src="IMAGE HERE"></div>Replace the X's with whatever style coding you want and you're all set! If you need help making it look a certain way, just holler!