Fancy tab

Fancy Tab

Add class .active to .nav-bar-item and corresponding .tab-content which you want to show after page loading.

 <div class="fancy-tab">
	<div class="nav-bar nav-bar-center">
		<div class="nav-bar-item active"><span class="icon-Home-4 fs-2"></span><br>Home</div>
		<div class="nav-bar-item"><span class="icon-Talk-Man fs-2"></span><br>Profile</div>
		<div class="nav-bar-item"><span class="icon-Security-Settings fs-2"></span><br>Settings</div>
	</div>
	<div class="tab-contents">
		<div class="tab-content active">
			<p class="lead text-1100">
				 Duis ac facilisis mauris. Pellentesque leo tortor, maximus sed gravida dapibus, suscipit non nisi. Duis ultrices diam a maximus imperdiet. Nam eu purus a erat tristique ornare. Donec condimentum tristique diam eu congue. </p>
		</div>
		<div class="tab-content">
			<p class="lead text-1100">
				 Nullam sed tempus mauris, vitae pretium nibh. Nam pretium diam id massa mollis pretium. Aenean lacus massa, tristique id mauris ac, sollicitudin auctor neque. Cras laoreet nunc nibh, ac tristique orci rutrum quis. Nam luctus, sapien ligula finibus turpis.</p>
		</div>
		<div class="tab-content">
			<p class="lead text-1100">
				 Vestibulum convallis diam id nibh tempus, ac scelerisque nulla congue. Cras laoreet nunc nibh, ac tristique orci rutrum quis. Sed eu tellus pharetra, scelerisque nulla in, vehicula libero. Curabitur interdum nec metus ante sed luctus.</p>
		</div>
	</div>
</div>

Position

You can change both the fancy-tab and contents position individulally by adding class positioning class to .nav-bar and .tab-contents .

Left Align

Left align position is the default postion. So no class is needed to add.

<div class="fancy-tab">
	<div class="nav-bar">
		<div class="nav-bar-item active">Home</div>
		<div class="nav-bar-item">Profile</div>
		<div class="nav-bar-item">Settings</div>
	</div>
	<div class="tab-contents">
		<div class="tab-content active">
			<p class="lead text-1100">
				....
			</p>
		</div>
		<div class="tab-content">
			<p class="lead text-1100">
				....
			</p>
		</div>
		<div class="tab-content">
			<p class="lead text-1100">
				....
			</p>
		</div>
	</div>
</div>

Center Align

Add class .nav-bar-center to .nav-bar for fancy-tab position and .text-center to .tab-contents for content position.

<div class="fancy-tab">
	<div class="nav-bar nav-bar-center">
		...
	</div>
</div>

Right Align

Add class .nav-bar-right to .nav-bar for fancy-tab position and .text-right to .tab-contents for content position.

<div class="fancy-tab">
	<div class="nav-bar nav-bar-right">
		...
	</div>
</div>