simple & colorful jquery tab plugin — demo:
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.gitignore
LICENSE
README.md
gulpfile.js
package.json

README.md

colorfulTab

simple & colorful jquery tab plugin

Demo


Usage

$("#exampleTab").colorfulTab();

HTML Structure

<div class="colorful-tab-wrapper" id="examplaTab">

	<!-- Tab Menu -->
	<ul class="colorful-tab-menu">
		<li class="colorful-tab-menu-item active" data-color="#000">
			<a href="#tab1">Tab 1</a>
		</li>
		<li class="colorful-tab-menu-item" data-color="#353535">
			<a href="#tab2">Tab 2</a>
		</li>
		<li class="colorful-tab-menu-item" data-color="#d5d5d5">
			<a href="#tab3">Tab 3</a>
		</li>
	</ul>
	
	<!-- Tab Content -->
	<div class="colorful-tab-container">
		<div class="colorful-tab-content active" id="tab1">...</div>
		<div class="colorful-tab-content" id="tab2">...</div>
		<div class="colorful-tab-content" id="tab3">...</div>
	</div>

</div>

Options

theme, backgroundImage, overlayColor, overlayOpacity

Example :

$("#exampleTab").colorfulTab({
	theme:"flatline",
	backgroundImage:"true",
	overlayColor: "#002F68",
    overlayOpacity: "0.8"
});

Background Image

<ul class="colorful-tab-menu">
	<li class="colorful-tab-menu-item" data-background="image.jpg">
	...
</ul>

Create a Custom Theme

Example :

$("#exampleTab").colorfulTab({
	theme:"custom-theme"
});

SCSS

.custom-theme{
	.colorful-tab-menu{
		/* custom style */
	}
	.colorful-tab-menu-item{
		/* custom style */
	}
	.colorful-tab-container{
		/* custom style */
	}
	.colorful-tab-content{
		/* custom style */
	}
}

License

MIT