Responsive tabs to dropdown

index.html

<nav class="banner fake-tabs">
	<div class="wrapper">
		<h1>Section name</h1>
		<ul class="tabs">
			<li class="tab active"><a href="#">All articles</a></li>
			<li class="tab"><a href="#">Getting started</a></li>
			<li class="tab"><a href="#">Another Article</a></li>
			<li class="tab"><a href="#">Last article</a></li>
		</ul>
	</div>
</nav>

responsive-tabs-to-dropdown.markdown

Responsive tabs to dropdown

A Pen by Jiří Maha on CodePen.

License.

script.js

$('.fake-tabs')
	.on('click', 'li:not(".active") a', function(e) {
		e.preventDefault();
		$(this).closest('ul').removeClass('open');
	})
	.on('click', 'li.active a', function(e) {
		e.preventDefault();
		$(this).closest('ul').toggleClass("open");
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.scss

@import "bourbon";
@import "neat";

$screen-md: 768px;

.banner {
	background-color: #3B9C9C;
	padding-top: 1em;
	
	.wrapper {
		@include outer-container(980px);
		position: relative;
		padding: 0 20px;
	}
	
	h1 {
		text-transform: uppercase;
		font-weight: 200;
		color: white;
		margin-bottom: 3em;
	}
}


.tabs {
	position: relative;
	text-align: center;
	margin: 0 -20px;
	padding: 0;
	list-style: none;
	
	@include media($screen-md) {
		margin: 0 auto;
		text-align: left;
	}
	
	&::after {
		content: "";
    width: 0;
    height: 0;
    border: .5em solid transparent;
    border-color: white transparent transparent;
    position: absolute;
    top: .75em;
    right: .5625em;
		
		@include media($screen-md) {
			display: none;
		}
	}
	
	.tab:not(.active) {
		display: none;
		
		@include media($screen-md) {
			display: inline-block;
		}
	}
	
	&.open .tab {
		display: block;
		
		@include media($screen-md) {
			display: inline-block;
		}
	}	
	
		
	a {
		text-decoration: none;
		display: block;
		position: relative;
		padding: 0.5em 1em;
	}
}

.tab {
	display: block;
	text-align: center;
	
	@include media($screen-md) {
		display: inline-block;
		border: 0;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}
	
	&.active {
		@include media($screen-md) {
			background-color: #fff;
		}
	}
	
	&.active a {
		color: white;
		
		@include media($screen-md) {
			color: black;	
		}
	}
	
	&:not(.active) {
		background-color: white;
		border-bottom: 1px solid #3B9C9C;

		@include media($screen-md) {
			display: inline-block;
			background-color: transparent;
			border-bottom: 0;
		}
		
		&:hover {
			background-color: #d7d7d7;
			@include media($screen-md) {
				background-color: rgba(#fff, .38);
			}
		}
		a {
			color: black;
			
			@include media($screen-md) {
				color: white;	
			}
		}
	}
}