Skip to content

jackslowfuck/colorfulTab

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

simple & colorful jquery tab plugin — demo:

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 64.7%
  • CSS 26.3%
  • JavaScript 9.0%