/ Tabs

A nice Responsive Tab Navegation

A nice Responsive Tab Navegation

Tab Navegation Responsive

A nice Responsive Tab Navegation.

Made with

Html/pug
Css/SCSS
Javascript

Html

.author
		p.name Tab Navegation
			span by pedro Muñoz
		ul.sociales
			li: a(href="https://twitter.com/ordepFrontend" target="_blank").twitter
				span.fa.fa-twitter
			li: a(href="https://instagram.com/ordep96" target="_blank").instagram
				span.fa.fa-instagram
			li: a(href="https://github.com/ordep96" target="_blank").github
				span.fa.fa-github
			li: a(href="https://codepen.io/ordep96" target="_blank").codepen
				span.fa.fa-codepen



.tabs#tabs
	ul.tabs__head
		li: a(href="#" class="active-link" data-tab="inbox")
			span.fa.fa-inbox
			| Inbox
		li: a(href="#" data-tab="new")
			span.fa.fa-edit
			| New
		li: a(href="#" data-tab="gallery")
			span.fa.fa-camera
			| Gallery
		li: a(href="#" data-tab="store")
			span.fa.fa-shopping-cart
			| Store
		li: a(href="#" data-tab="settings")
			span.fa.fa-cogs
			| Settings
		li: a(href="#" data-tab="trash")
			span.fa.fa-trash
			| Trash
	.tabs__content
		.tabs__content__item#inbox.active-tab
			.content
				p Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod commodi eveniet asperiores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur consequatur aut vel! Doloremque?
				p p Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod commodi eveniet asperiores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur consequatur aut vel! Doloremque?
		.tabs__content__item#new
			.content
				p Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod commodi eveniet asperiores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur consequatur aut vel! Doloremque?
				p p Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod commodi eveniet asperiores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur consequatur aut vel! Doloremque?
		.tabs__content__item#gallery
			.content
				p Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod commodi eveniet asperiores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur consequatur aut vel! Doloremque?
				p p Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod commodi eveniet asperiores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur consequatur aut vel! Doloremque?.speriores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur,speriores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur,speriores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur,speriores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur,speriores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur
		.tabs__content__item#store
			.content
				p Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod commodi eveniet asperiores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur consequatur aut vel! Doloremque?
				p p Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod commodi eveniet asperiores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur consequatur aut vel! Doloremque?
		.tabs__content__item#settings
			.content
				p Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod commodi eveniet asperiores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur consequatur aut vel! Doloremque?
				p p Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod commodi eveniet asperiores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur consequatur aut vel! Doloremque?
		.tabs__content__item#trash
			.content
				p Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod commodi eveniet asperiores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur consequatur aut vel! Doloremque?
				p p Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod commodi eveniet asperiores pariatur soluta voluptatibus aliquid. Autem neque deserunt officiis, sit optio aperiam, quidem veniam aspernatur consequatur aut vel! Doloremque?
	

Css

*,*::after,*::before{margin:0;padding:0;box-sizing:border-box;}

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,500,600,700');

$bgColor:#1e272e;
$iconColor:#f05451;
$colorLetra:#182C61;
$montserrat:'Montserrat', sans-serif;
$tablet:768px;
$desktop:960px;
$twitter:#1da1f2;
$instagram:#c32aa3;
$github:#282D32;
$codepen:#14171a;

@mixin responsive($media){
	
	@if $media == $tablet{
		@media screen and (min-width:#{$tablet}) and (max-width:#{$desktop}){
			@content;
		}
	}@else if $media == $desktop{
		@media screen and (min-width:#{$desktop}){
			@content;
		}
	}

	
}

body{
	background:$bgColor;
	font-family:$montserrat;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

}

.author{
	color:#fff;
	text-transform:uppercase;
	text-align:center;
	margin-top:30px;
	span{
		display:block;
		text-transform:none;
	}
	
	.sociales{
		list-style:none;
		display:flex;
		justify-content:center;
		margin-top:20px;
		li{
			margin:5px;
			a{
				display:flex;
				justify-content:center;
				align-items:center;
				width:30px;
				height:30px;
				text-decoration:none;
				color:#fff;
				background:red;
				border-radius:50%;
				box-shadow:0 0 4px rgba(#fff,.5);
				&.twitter{background: $twitter;}
				&.instagram{background: $instagram;}
				&.github{background: $github;}
				&.codepen{background: $codepen;}
			}
		}
	}
}


.tabs{
	width:90%;
	margin-top:50px;
	@include responsive($tablet){
		display:grid;
		grid-template-columns:60px 1fr;
	}
	
	@include responsive($desktop){
		width:800px;
	}
	
	&__head{
		width:100%;
		background:rgba(#fff,.94);
		display:flex;
		align-items:center;
		list-style:none;
		overflow-x:auto;
		@include responsive($tablet){
			flex-direction:column;
			overflow:hidden;
		}
		
		@include responsive($desktop){
			background:none;
		}
		
		li{
			a{
				display:flex;
				flex-direction:column;
				justify-content:center;
				text-align:center;
				width:60px;
				height:50px;
				text-decoration:none;
				font-size:.70em;
				font-weight:600;
				color:rgba(#000,.3);
				transition:.4s all;
				position:relative;
					@include responsive($tablet){
						height:70px;
					}
				
					@include responsive($desktop){
						background:rgba(#fff,.94);
						flex-direction:row;
						align-items:center;
						width:100px;
					}

					&:hover{
						background:rgba(#fff,.90);
						color:#000;
						span{
							color:rgba(#000,.3);
						}
				}
				
			
				
				
				&.active-link{
					box-shadow:0 2px $iconColor inset;
					color:#000;
					background:#fff;
					z-index:10;
					span{
						color:$iconColor;
					}
					@include responsive($tablet){
						box-shadow:2px 0 $iconColor inset;
					}
				}
				
				span{
					margin-bottom:2px;
					font-size:1.2em;
					pointer-events:none;
					@include responsive($desktop){
						position:relative;
						left:-5px;
					}
				}
			}
		}
	}
	
	&__content{
			position:relative;
			transition:transform .4s ;
			height:300px;
			overflow:hidden;
			box-shadow: 0 0 6px rgba(#000,.2);
		@include responsive($tablet){
			height:100%;
		}
		&__item{
			background:#fff;
			position:absolute;
			transition:.5s all;
			opacity:0;
			transition:.3s all;
			height:100%;
			overflow-y:auto;
			z-index:1;
			@include responsive($tablet){
				height:100%;
			}
			
			.content{
				padding:.90em 3em 3em 3em;
				font-size:.90em;
				p{
					margin-top:20px;
					font-size:.95em;
					color:$colorLetra;
					line-height:25px;
				}
			}
			
			&.active-tab{
				z-index:5;
				opacity:1;
			}
			
			
		}
	}
	
}


Javascript

let containerTabs = document.getElementById("tabs");

// get info Tabs
const getInfoTabs = container =>{
	return [...container.querySelectorAll(".tabs__content__item")];
}

//get links tab
const getLinksTab = container =>{
	return [...container.querySelectorAll("a[data-tab]")];
}



const activeTab = (linktab,container) => {
		let tabsInfo = getInfoTabs(container),
				LinksTab = getLinksTab(container);
		
	LinksTab.map(info => info.classList.remove("active-link"));
		tabsInfo.map(info => info.classList.remove("active-tab"));
		tabsInfo.map(info => {
				if(linktab.getAttribute("data-tab") === info.getAttribute("id")){
					info.classList.add("active-tab");
					linktab.classList.add("active-link");
					
				}
				
			
			
		})

	
	
}


const getLinkTab = e => {
		let target = e.target;
		if(target.tagName === "A"){
				activeTab(target,containerTabs);
		}	
}


containerTabs.addEventListener("click", getLinkTab);

Author

Pedro Muñoz

Demo

See the Pen Tab Navegation Responsive by Pedro Muñoz (@ordep96) on CodePen.