Sky Tabs Documentation
Sky Tabs is a clean, responsive solution for creating beautiful tabbed navigation without any javascript usage. It has different layouts, auto-height, responsive design, 9 color schemes, lots of customization options and can be easily integrated to any design.
If you have any questions that are beyond the scope of this documentation, please feel free to email via my user page contact form here.
Integration
- Download the zipped pack from codecanyon and extract to a folder on your computer.
- Include css and js files to your project.
<link rel="stylesheet" href="css/sky-tabs.css"> <!--[if lt IE 9]> <link rel="stylesheet" href="css/sky-tabs-ie8.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/sky-tabs-ie8.js"></script> <![endif]-->
- Copy HTML code from one of demo files.
- Replace demo content with yours.
HTML structure
The main HTML structure of the tabs consists of radios, labels and unordered list. You can see the example of code below.
<div class="sky-tabs sky-tabs-pos-top-left">
<input type="radio" name="sky-tabs" checked id="sky-tab1" class="sky-tab-content-1">
<label for="sky-tab1"><span><span><i class="icon-bolt"></i>Tesla</span></span></label>
<input type="radio" name="sky-tabs" id="sky-tab2" class="sky-tab-content-2">
<label for="sky-tab2"><span><span><i class="icon-picture"></i>da Vinci</span></span></label>
<input type="radio" name="sky-tabs" id="sky-tab3" class="sky-tab-content-3">
<label for="sky-tab3"><span><span><i class="icon-cogs"></i>Einstein</span></span></label>
<input type="radio" name="sky-tabs" id="sky-tab4" class="sky-tab-content-4">
<label for="sky-tab4"><span><span><i class="icon-globe"></i>Newton</span></span></label>
<ul>
<li class="sky-tab-content-1">
<div class="typography">
<h1>Nikola Tesla</h1>
<p>Serbian-American inventor, electrical engineer, mechanical engineer, physicist, and futurist best known for his contributions to the design of the modern alternating current (AC) electrical supply system.</p>
<p>Tesla started working in the telephony and electrical fields before emigrating to the United States in 1884 to work for Thomas Edison. He soon struck out on his own with financial backers, setting up laboratories/companies to develop a range of electrical devices. His patented AC induction motor and transformer were licensed by George Westinghouse, who also hired Tesla as a consultant to help develop an alternating current system. Tesla is also known for his high-voltage, high-frequency power experiments in New York and Colorado Springs which included patented devices and theoretical work used in the invention of radio communication, for his X-ray experiments, and for his ill-fated attempt at intercontinental wireless transmission in his unfinished Wardenclyffe Tower project.</p>
<p>Tesla's achievements and his abilities as a showman demonstrating his seemingly miraculous inventions made him world-famous. Although he made a great deal of money from his patents, he spent a lot on numerous experiments. He lived for most of his life in a series of New York hotels although the end of his patent income and eventual bankruptcy led him to live in diminished circumstances. Tesla still continued to invite the press to parties he held on his birthday to announce new inventions he was working and make (sometimes unusual) statements. Because of his pronouncements and the nature of his work over the years, Tesla gained a reputation in popular culture as the archetypal "mad scientist". He died in room 3327 of the New Yorker Hotel on 7 January 1943.</p>
<p class="text-right"><em>Find out more about Nikola Tesla from <a href="http://en.wikipedia.org/wiki/Nikola_Tesla" target="_blank">Wikipedia</a>.</em></p>
</div>
</li>
<li class="sky-tab-content-2">
<div class="typography">
<h1>Leonardo da Vinci</h1>
<p>Italian Renaissance polymath: painter, sculptor, architect, musician, mathematician, engineer, inventor, anatomist, geologist, cartographer, botanist, and writer. His genius, perhaps more than that of any other figure, epitomized the Renaissance humanist ideal. Leonardo has often been described as the archetype of the Renaissance Man, a man of "unquenchable curiosity" and "feverishly inventive imagination". He is widely considered to be one of the greatest painters of all time and perhaps the most diversely talented person ever to have lived. According to art historian Helen Gardner, the scope and depth of his interests were without precedent and "his mind and personality seem to us superhuman, the man himself mysterious and remote". Marco Rosci states that while there is much speculation about Leonardo, his vision of the world is essentially logical rather than mysterious, and that the empirical methods he employed were unusual for his time.</p>
<p>Born out of wedlock to a notary, Piero da Vinci, and a peasant woman, Caterina, at Vinci in the region of Florence, Leonardo was educated in the studio of the renowned Florentine painter, Verrocchio. Much of his earlier working life was spent in the service of Ludovico il Moro in Milan. He later worked in Rome, Bologna and Venice, and he spent his last years in France at the home awarded him by Francis I.</p>
<p class="text-right"><em>Find out more about Leonardo da Vinci from <a href="http://en.wikipedia.org/wiki/Leonardo_da_Vinci" target="_blank">Wikipedia</a>.</em></p>
</div>
</li>
<li class="sky-tab-content-3">
<div class="typography">
<h1>Albert Einstein</h1>
<p>German-born theoretical physicist who developed the general theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics). While best known for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation"), he received the 1921 Nobel Prize in Physics "for his services to theoretical physics, and especially for his discovery of the law of the photoelectric effect". The latter was pivotal in establishing quantum theory.</p>
<p>Near the beginning of his career, Einstein thought that Newtonian mechanics was no longer enough to reconcile the laws of classical mechanics with the laws of the electromagnetic field. This led to the development of his special theory of relativity. He realized, however, that the principle of relativity could also be extended to gravitational fields, and with his subsequent theory of gravitation in 1916, he published a paper on the general theory of relativity.</p>
<p>He continued to deal with problems of statistical mechanics and quantum theory, which led to his explanations of particle theory and the motion of molecules. He also investigated the thermal properties of light which laid the foundation of the photon theory of light. In 1917, Einstein applied the general theory of relativity to model the large-scale structure of the universe.</p>
<p class="text-right"><em>Find out more about Albert Einstein from <a href="http://en.wikipedia.org/wiki/Albert_Einstein" target="_blank">Wikipedia</a>.</em></p>
</div>
</li>
<li class="sky-tab-content-4">
<div class="typography">
<h1>Isaac Newton</h1>
<p>English physicist and mathematician who is widely regarded as one of the most influential scientists of all time and as a key figure in the scientific revolution. His book Philosophiæ Naturalis Principia Mathematica ("Mathematical Principles of Natural Philosophy"), first published in 1687, laid the foundations for most of classical mechanics. Newton also made seminal contributions to optics and shares credit with Gottfried Leibniz for the invention of the infinitesimal calculus.</p>
<p>Newton's Principia formulated the laws of motion and universal gravitation that dominated scientists' view of the physical universe for the next three centuries. It also demonstrated that the motion of objects on the Earth and that of celestial bodies could be described by the same principles. By deriving Kepler's laws of planetary motion from his mathematical description of gravity, Newton removed the last doubts about the validity of the heliocentric model of the cosmos.</p>
<p class="text-right"><em>Find out more about Isaac Newton from <a href="http://en.wikipedia.org/wiki/Isaac_Newton" target="_blank">Wikipedia</a>.</em></p>
</div>
</li>
</ul>
</div>
CSS structure
Sky Tabs includes 11 css files.
- demo.css - demo page styles
- sky-tabs.css - required main styles
- sky-tabs-ie8.css - styles for IE8
- sky-tabs-red.css - red color scheme
- sky-tabs-orange.css - orange color scheme
- sky-tabs-green.css - green color scheme
- sky-tabs-purple.css - purple color scheme
- sky-tabs-pink.css - pink color scheme
- sky-tabs-yellow.css - yellow color scheme
- sky-tabs-blue.css - blue color scheme
- sky-tabs-black.css - black color scheme
The file "sky-tabs.css" contains all of the specific styling and separated into sections:
- font
- defaults
- positions
- animations
- grid system
- typography
- icons
- pad
- phone
If you would like to edit a specific section, simply find the appropriate label in the CSS file.
Layouts
Sky Tabs has 7 different layouts. To use one of them you need to add the appropriate class to tabs container. All available layouts and classes listed in the table below.
| Layout | Class |
|---|---|
| Horizontal top left | sky-tabs-pos-top-left |
| Horizontal top right | sky-tabs-pos-top-right |
| Horizontal top center | sky-tabs-pos-top-center |
| Horizontal top justify | sky-tabs-pos-top-justify sky-tabs-amount-* |
| Horizontal top left+right | sky-tabs-pos-top-left + inverse |
| Vertical left | sky-tabs-pos-left |
| Vertical right | sky-tabs-pos-right |
* Note: you need to set number of elements when you are using justify alignment.
Mobile versions
Sky Tabs includes 3 different responsive versions: icons, stack and switcher. To choose one of them you need to add specific class to the main container: sky-tabs-response-to-switcher, sky-tabs-response-to-stack or sky-tabs-response-to-icons. If you don't want to use responsiveness just do not add any of these classes.
<div class="sky-tabs sky-tabs-pos-top-left sky-tabs-response-to-icons"> <input type="radio" name="sky-tabs" checked id="sky-tab1" class="sky-tab-content-1"> <label for="sky-tab1"><span><span><i class="icon-bolt"></i>Tesla</span></span></label> <input type="radio" name="sky-tabs" id="sky-tab2" class="sky-tab-content-2"> <label for="sky-tab2"><span><span><i class="icon-picture"></i>da Vinci</span></span></label> <input type="radio" name="sky-tabs" id="sky-tab3" class="sky-tab-content-3"> <label for="sky-tab3"><span><span><i class="icon-cogs"></i>Einstein</span></span></label> <input type="radio" name="sky-tabs" id="sky-tab4" class="sky-tab-content-4"> <label for="sky-tab4"><span><span><i class="icon-globe"></i>Newton</span></span></label> <ul> <li class="sky-tab-content-1"> ... </li> <li class="sky-tab-content-2"> ... </li> <li class="sky-tab-content-3"> ... </li> <li class="sky-tab-content-4"> ... </li> </ul> </div>
Also, when you are using switcher version you need to add additional element:
<div class="sky-tabs sky-tabs-pos-top-left sky-tabs-response-to-switcher"> <input type="radio" name="sky-tabs" checked id="sky-tab1" class="sky-tab-content-1"> <label for="sky-tab1"><span><span><i class="icon-bolt"></i>Tesla</span></span></label> <input type="radio" name="sky-tabs" id="sky-tab2" class="sky-tab-content-2"> <label for="sky-tab2"><span><span><i class="icon-picture"></i>da Vinci</span></span></label> <input type="radio" name="sky-tabs" id="sky-tab3" class="sky-tab-content-3"> <label for="sky-tab3"><span><span><i class="icon-cogs"></i>Einstein</span></span></label> <input type="radio" name="sky-tabs" id="sky-tab4" class="sky-tab-content-4"> <label for="sky-tab4"><span><span><i class="icon-globe"></i>Newton</span></span></label> <label class="switcher"><span><span><a href="#"><i class="icon-reorder"></i>Tabs</a></span></span></label> <ul> <li class="sky-tab-content-1"> ... </li> <li class="sky-tab-content-2"> ... </li> <li class="sky-tab-content-3"> ... </li> <li class="sky-tab-content-4"> ... </li> </ul> </div>
Animations
There are 12 css3 animation effects. To use one of them you need to add the appropriate class to tabs container. All available effects and classes listed in the table below.
| Animation | Class |
|---|---|
| Fade | |
| Flip | sky-tabs-anim-flip |
| Scale | sky-tabs-anim-scale |
| Rotate | sky-tabs-anim-rotate |
| Slide up | sky-tabs-anim-slide-up |
| Slide right | sky-tabs-anim-slide-right |
| Slide down | sky-tabs-anim-slide-down |
| Slide left | sky-tabs-anim-slide-left |
| Slide up right | sky-tabs-anim-slide-up-right |
| Slide down right | sky-tabs-anim-slide-down-right |
| Slide down left | sky-tabs-anim-slide-down-left |
| Slide up left | sky-tabs-anim-slide-up-left |
Color schemes
There are 9 color schemes at your disposal. Cyan is the default scheme and to choose other you need to include appropriate css file. For example, if you want to use orange scheme include sky-tabs-orange.css file:
<link rel="stylesheet" href="css/sky-tabs.css"> <link rel="stylesheet" href="css/sky-tabs-orange.css">
Credits
- jQuery library by The jQuery Foundation
- Font Awesome by Dave Gandy