Hi-Tech Tabs - Effective and Animated Design

Unlimited Tabs - Hi-Tech Tabs


Thank you for Browsing our website. If you have any questions that are beyond the scope of this help file please feel free to contact with us at Hi-Tech Parks. Thanks again for Browsing our website!

Explanation


Hi-Tech Tabs - Effective and Animated Design Features:

  1. Unlimited Tab Steps.
  2. 4 Different Tabs Styles.
  3. 4 Different Tabs Layouts.
  4. 12+ Different Tabs Animations.
  5. 12 Different Tabs Colors.
  6. Auto Height Tabs.
  7. Nested Possibility.
  8. Can Use Tab Subtitle.
  9. Clean Design And Commented Code.
  10. Can Display Any Content, Video, Form, Table, Image or Other Elements.
  11. Fully Responsive.
  12. Made With Bootstrap
  13. Vertical & Horizontal Tabs Layouts.
  14. Include Steps or Wizard Button.
  15. Cross-Browser Compatibility.
  16. Clean HTML, Javascript & CSS Code.
  17. Animated Design.
  18. Ripple Effect.
  19. Uses Font Awesome Icon.
  20. Easy to Customize.
  21. Easy to Setup.
  22. Step by Step Documentation.
  23. And Much More!

Browser compatibility:

img

Hi-Tech Tabs - Effective and Animated Design will run in on all modern browsers. However you need JavaScript enabled to run the script smooth.

Installation


Installation Hi-Tech Tabs - Effective and Animated Design

Please follow all the steps carefully...

  • Step 1: Download the Zip file which you have purchased.
  • Step 2: Extract the zip file.
  • Step 3: Copy all plugin CSS, JS and fonts files (you can find that's inside of customs and external folders inside of assets), and paste it your own website css, js and fonts folder.
  • Step 4: Link all plugin css file in your own web page head section and js file in your own web page before end of the body section (whose template page you want to add this Tabs).
    (NB: Just copy only one tab-style color css file whose color you want to use. like as "tab-style-red.css" file for red color style tabs.)

  • -----



  • Step 5: Choice your Tabs template .html file, whose Layout and Style you wont to use.
  • Step 6: Edit this HTML file in Notepad / Notepad++ (you can use another code editor).
  • Step 7: Copy the tabs content from tabs template and paste it where you need to show this in your website template body.
    (Copy form there : Our tab contect srart from <section class="tab-area"> and end from </section> that's commented inside of the template you can find it easily.)

  • -----



  • Step 8: Save your own website template. It's done!



Note: After setup check your template, If your design broken then please rename or delete your plugin css class, whose class was broken your design.

Customization


If you wont to customize this tabs color, effect, animation, steps, icon or etcetera then flow this instruction carefully...

  • Step 01 - Change Tabs Color: If you need to change the tab color then you have to just change the CSS file name!! Do it very simply, like as "tab-style-red.css" for make it red color (You can find this css file name link inside the head section). Our template other colors name are there
    ( black, blue, red, pink, purple, teal, green, yellow, orange, brown, cyan, lime ). Replace the name and make it awesome!!!



  • Step 02 - Change Tabs Animation: If you need to change the tab animation then you have to just change the CSS class name!! Do it very simply, like as ".fadeIn" for make it fadeIn animated (You can find this css class name inside the every step of Tab Panel). Our template other animation name that's we recommended for you
    ( pulse, bounce, bounceIn, bounceInUp, bounceInLeft, bounceInRight. fadeIn, fadeInUp, fadeInLeft, fadeInRight, lightSpeedIn, slideInUp, slideInLeft, slideInRight, zoomIn, zoomInDown, zoomInLeft, zoomInRight, flipInX, flipInY ). Replace the class name and make it awesome!!!



    (NB: You can use another animation that's class name you can fine hear Animate.css Library)

  • Step 03 - Change Tab Steps: If you need to Add or Remove some Tab steps from the tabs then you have to do it very simply.

    A. Add or Remove some "Nav Item" inside the "nav-tabs" section.



    B. Add or Remove some "Tab Panel" inside the "tab-content" section.




    C. Formatting the every tab item of "Tabs Nav" by the id name like as #tab1,#tab2,#tab3 inside of a tag: Ex: href="#tab1" for first step.




    D. Formatting the every tab item "Tab Panel" by the id name like as tab1,tab2,tab3 inside of tabpanel div: Ex: id="tab1" for first step.




  • Step 04 - Remove Ripple Effect: If you need to Remove the tab click Effect then you have to just Remove the CSS class name from every steps of nav!! Do it very simply, Just Remove class ".ripple" (you can find it insdie the "nav-tabs" every step of nav tabs) for make it simple.




  • Step 05 - Add Steps or Wizard: If you need to Add Steps or Wizard button in your tabs then you have to just Add Steps or Wizard button inside the every steps of your tabs!! Do it very simply (you can find this code inside the plugin zip folder) for make it awesome!!!


    NB: Formatting every step of wizard like this
    (Ex: For Tab Step-2 use href="#tab1" to back Previous Tab and use href="#tab3" to go Next Tab.)

    NB: Don't forget to add custom js file tab-custom.js end of the template body for perfect using the wizard system.

  • Step 06 - Change Tabs Justify Layouts: If you need change the tabs Justify Layouts then you have to just Add or Remove a class!! Do it very simply, just Add or Remove ".nav-justified" class inside the "Nav tabs" for make this tab justify or normal Layout.



  • Step 07 - Change Tabs Icon: If you need to change the tab Icon then you have to use Font Awesome Library. Do it very simply for make it awesome!!!

    A. Go to the Font Awesome Library and find the icon that you need.





    B. Click over the icon and get the iconic code below the sambol.

    C. Just copy this code and paste it inside the tabs nav area.

    -----


    (NB: If you don't this icon, You can Remove the icon code form there)


  • Step 08 - Change Tabs Style: If you want to move a tab style to another tab Style, you can do it very simply. Just change a CSS class name for convert it!! Change the class Like as "tab-style-1" inside the "tab-main-area" div, For make this tabs look style-1 (You can use hear tab-style-1 to tab-style-4). Replace the name and make it awesome!!!



  • Step 09 - Add sub Title: If you need to Add sub-titile under the main tab Title, you can do it very simply. Just add this code ‹span›sub-titile‹/span› inside the every single tab of "Nav tabs" and make it awesome!!!



  • Step 10 - Change Activate Tab: If you need to change the Activate tab then you have to just move the active class in a different tab. whose tab you want to see Activate on first loading time. Move the active class one tab to another tab form inside of "Nav tabs" and inside of "Tab panels". Do it very simply for make it awesome!!!

  • -----


    Note: The active class must be paste inside the same tab nav and panel. Don't use the active class inside of double tabs.


  • Step 11 - Change Tabs Content: If you need to change the tab Content then you have to use Bootstrap Framework or your own HTML code!! Do it very simply for make it awesome!!!


  • Step 12: Now save it. Let's go It's ready to use!


Note: Don't try to using a layout html or css file (Top Side/Left Side/Right Side) for making another layout, It's can broken your design.

How To Use


01. Press any Tab for active this Tab-Panel



02. Press Next button to go Next Tab



03. Press Previous button to back Previous Tab


Update


Hi-Tech Tabs - Effective and Animated Design v1.0.0


Version 1.0.0 – 18 May 2017
- Initial release.

Support


With browsing Hi-Tech Tabs - Effective and Animated Design you will get first class support! Please feel free to contact with us by email at any time if you run into problems.

Email Us: hitechparks@gmail.com

You need to confirm your purchase from codecanyon.net to get any support.

Credits


Credit Goes to...

  1. Bootstrap
  2. Font Awesome
  3. Animate css
  4. jQuary