CodePen

HTML

            
              <html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="Eduard Mayer">
	<title>Google Play Menu</title>
</head>
<body>

	<section class="pen">
		<div class="menu-container">
			<div class="show-entries-hover hidden">
				<span class="hover-arrow"></span>
			</div>
			<ul class="play-menu">
				<li id="store">
					<a href="#">
						<span class="menu-entry-icon store"></span>
						<span class="menu-entry-text">Store</span>
					</a>
				</li>
				<li id="apps">
					<a href="#">
						<span class="menu-entry-icon apps"></span>
						<span class="menu-entry-text">Apps</span>
					</a>
					<ul class="sub-menu">
						<li class="main-link">My Apps</li>
						<li class="main-link highlight">Shop</li>
						<li class="sub-menu-divider"></li>
						<li class="secondary-link">Games</li>
						<li class="secondary-link">Editors' Choice</li>
					</ul>
				</li>
				<li id="movies">
					<a href="#">
						<span class="menu-entry-icon movies"></span>
						<span class="menu-entry-text">Movies</span>
					</a>
					<ul class="sub-menu">
						<li class="main-link">My movies</li>
						<li class="main-link highlight">Shop</li>
						<li class="sub-menu-divider"></li>
						<li class="secondary-link">Studios</li>
					</ul>
				</li>
				<li id="music">
					<a href="#">
						<span class="menu-entry-icon music"></span>
						<span class="menu-entry-text">Music</span>
					</a>
					<ul class="sub-menu">
						<li class="main-link">My music</li>
						<li class="main-link highlight">Shop</li>
					</ul>
				</li>
				<li id="books">
					<a href="#">
						<span class="menu-entry-icon books"></span>
						<span class="menu-entry-text">Books</span>
					</a>
					<ul class="sub-menu">
						<li class="main-link">My books</li>
						<li class="main-link highlight">Shop</li>
					</ul>
				</li>
				<li id="devices">
					<a href="#">
						<span class="menu-entry-icon devices"></span>
						<span class="menu-entry-text">Devices</span>
					</a>
					<ul class="sub-menu">
						<li class="main-link highlight">Shop</li>
					</ul>
				</li>
			</ul>
		</div>
	</section>
	<!-- Pen zu ende -->
	<section class="credit">
		<p>Best viewed in Google Chrome</p>
		<p>Code by <a href="http://twitter.com/vsxed" target="_blank" class="credit-link">Eduard Mayer</a></p>
		<a href="http://vsxed.github.io/play-store-menu" target="_blank" class="credit-link button">View it on Github</a> <a href="https://github.com/vsxed/play-store-menu" target="_blank" class="credit-link button">Fork it on Github</a>
	</section>
</body>
</html>
            
          
!

CSS

            
              @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400);

@grey: #f0f0f0;
@shadow: rgba(0,0,0,0.165);
@highlight: #55beeb;
@bg-col: #333;
@elem-width: 200px;
@elem-height: 46px;
@m-height: 276px;

@store-color: #444;
@apps-color: #B3C833;
@movies-color: #CE5043;
@music-color: #FB8521;
@books-color: #1AA1E1;
@devices-color: #658092;

.transition (@value1,@value2:X,...) {
    @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
    -webkit-transition: @value;
    -moz-transition: @value;
    -ms-transition: @value;
    -o-transition: @value;
    transition: @value;
}

// -- Codepen related --
body {
  padding: 3em 2em;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1em;
  line-height: 1;
  background: url('http://www.eduardmayer.de/codepen-css-resources/images/play-store-menu/background.jpg') 0 0 no-repeat @bg-col;
}

.pen {
	max-width: @elem-width;
	left: 120px;
	top: 46px;
	position: relative;

}

.credit {
	display: block;
	max-width: 400px;
	text-align: center;
	margin: 150px auto 0;
	padding: 0;
	font-size: 0.8em;
	color: @grey;
	text-shadow: 0 1px 0 rgba(0,0,0,0.9);

	p a,
	a {
		color: white;
		text-decoration: none;
		font-weight: 700;

		&:hover,
		&:active {
			text-shadow: 0 0 5px rgba(255,255,255,0.4);
			color: white;
		}

		&.button {
			padding: 6px 12px;
			margin-top: 10px;
			background: darken(@bg-col, 10%);
			border-radius: 3px;

			&:hover {
				background: lighten(@bg-col, 10%);
			}
		}
	}

	p:last-of-type {
		margin-bottom: 30px;
	}
}

// -- Pen related --

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.menu-container {
	overflow: hidden;
	height: @m-height;
	background-color: #ebebeb;
}

.show-entries-hover {
	height: @m-height;
	width: 24px;
	top:0;
	z-index: 3;
	background: white;
	position: absolute;

	&.hidden {
		display:none;
	}

	.hover-arrow {
		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAbklEQVRIx2P4//8/Ay0xw6gFg98CbKCjo8MAiA8AcQHVLYAa/gGI/4MsoaoFaIaDaAOqWYBmOAgHgMSpYgEWwxNgFlNsAT7DqWXBBVyGDxkLaBtENI9kPMk0gaoW0Dyj0aWowFLYNYzWB6MWMAAAq1H3+AVacVQAAAAASUVORK5CYII=");
		background-repeat: no-repeat;
		position: relative;
		top: 50%;
		width: 24px;
		height: 24px;
		display: block;
	}
}

.play-menu {
	list-style-type: none;
	width: @elem-width;
	padding: 0;
	z-index: 4;
	margin: 0;
	position: relative;
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);

	li {
		position: absolute;
		height: @elem-height;
		.transition(top 500ms, left 500ms, background 0s, opacity 500ms);

		a {
			text-decoration: none !important; // Safari-Fix for underlined anchors
		}

		.menu-entry-icon {
			display: inline-block;
			padding: 10px;
		}

		.menu-entry-text {
			line-height: 20px;
			display: block;
			vertical-align: middle;
			font-size: 18px;
			position: absolute;
			padding: 13px 10px;
			margin-left: 46px;
			top:0;
			width: 154px;
			font-weight: 300;
			font-family: "Roboto", sans-serif;
			color: #555;
			background-color: #ebebeb;
		}

		&:hover * + .menu-entry-text { color: white; }
		&:hover .store + .menu-entry-text { background: @store-color; }
		&:hover .apps + .menu-entry-text { background: @apps-color; }
		&:hover .movies + .menu-entry-text { background: @movies-color; }
		&:hover .music + .menu-entry-text { background: @music-color; }
		&:hover .books + .menu-entry-text { background: @books-color; }
		&:hover .devices + .menu-entry-text { background: @devices-color; }

		&#apps .highlight { color: darken(@apps-color, 12%); }
		&#movies .highlight { color: darken(@movies-color, 12%); }
		&#music .highlight { color: darken(@music-color, 12%); }
		&#books .highlight { color: darken(@books-color, 12%); }
		&#devices .highlight { color: darken(@devices-color, 12%); }

		.menu-entry-icon {
			width: 46px;
			height: 46px;
			background-repeat: no-repeat;
			background-position: center;

			&.store {
				background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAA0UlEQVRIx+XWUQ2DMBCA4UpAAhIqAQmTgIRJqIRKqAQkIAEJSKiDfy+3rFm6wpWyJeySvnC0H1euBAOYbwzzE6gUQAcEIPKKCbCFOToIsAkQAAd4uRaBWytokQVtpspnrj8EAaNUMn7I95L3R6EJWDfeX/YeLTQD0wbkyCxQam9P+3A5yF0OuhcmRGBtBQ2FCXPS7lEBDVVQclDdTrAeejusoQbqNFAClh7QZg+ssqI9W2gOQdIUe7qwDpJtWhRdp4aifPe0oYZq4x+g6/1unTkek/bCyLhDiUMAAAAASUVORK5CYII=");
				
				background-color: @store-color;
			}

			&.movies {
				background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAANklEQVRIx2P4//8/Az0ww6hF1LCIVmCALWKAArJNxdQ/GnSjQTcadKNBNxp0wyLoRtsMI9wiAFADCXZf9dlZAAAAAElFTkSuQmCC");
				background-color: @movies-color;
			}

			&.music {
				background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAABWklEQVRIx82W0Y2DMAxAGSEjZARGYARGYAQ2aDYoG7QbXDcoG8AGxwZlg3cf50i+NA2BRtVZCh/E8Usc23EFVJ8Yv58MAZpwJHT3gYAOuJGWEegOgYAWWNgnC9Bmg4AhYmQCzsBJjbP8D2XYBEUgF8Bu3J0VPS3XlyBxl5dH6rITwfJQNtonEGCAVUHq6oDI6b7Fzip2/4D6dyEKVquT9SFo9hNVAVEbn0PQCbhUhURsTmL3KRjGxO5cGH1yHy7mBTG+vAoGACOKRgx1OiEDY6uaawSq1xMLBqd8atRCp5MjAGnxuo2sn8Pk9SCdqKuKmDETNKgAWGNVwoNskGzeHbmgUfQJkt7GgqEvDOpTte6rEOi+VVRdIZD7NyBTCGRyHr6rKHc7QDf1zFxzX1gjdcqF/UJGwk6x06R6BquqQw6oFw/Yo11QrUM2mLurOftWu6VOVyc2YnP6uh+8uEodULzJQAAAAABJRU5ErkJggg==");
				background-color: @music-color;
			}

			&.books {
				background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAA9klEQVRIx+3VYQ2DMBCGYSQgYRJwMCQgAQk4ACcgAQfgAAnMAXPw7sc+kqOjwBjjF5c0hGt7D21ILgCCM4abSIAaaPUsgFuwEsBNa+3e2AcVQASEQM40aiD2AJVZNwC55mKhH9AYlbAI6BywMEgKPM1cIzh0cC+ECqQq6J6u0BXbGE+ROfgqNEarr4z1xY3yD/MeaU3rqbEJGk+X4f+j5k6xC7IbtuQu6IIu6IJ2QAnvfnIUNKjmFDKNrDsA6lBnnoU0EQLlD1AJhKbePOR00OELaEDN0qmzDGmRbedLUAdEnhrrkHOVAdAbpFfubq9qFfr3OA16AcSstrz4r0qKAAAAAElFTkSuQmCC");
				background-color: @books-color;
			}

			&.devices {
				background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAa0lEQVRIx2P4//8/Az0wusCC/5SDBAYowGcRVQDRFjGQCciyiBxfjFo0ci0C5TkBAqmQKhYZEKHmA8UWwdQQka9GLRq1aNSiUYtItYjYqpsii4gAB3BZhFyi47PoApEWgUplBShNVulNMwwA8TkerCj0FuMAAAAASUVORK5CYII=");
				background-color: @devices-color;
			}

			&.apps {
				background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAArUlEQVRIx+2VjQmAIBBGHcERGsFRGsERGsERGsFRHMERGqENLiMDO866oz+IHnyQ4vmOA0kBgHoi6hVRSVq3c5QAXMMVBVgwTInJ54NUZHHhgWhtzIpEqNil+JQIW2Led3k9oHq2yIMMJxKlb010z2Fkj+6EpKTjiHpcxBihz+dK7N6DbYhLDHEJEM0YYoy6JurhWrqaKF4sijXRHbwreuw38b3R/aJf9OEHe1smWkR6nqQuDSUAAAAASUVORK5CYII=");
				background-color: @apps-color;
			}
		}
	}
}

.sub-menu {
	// Debbuging: 1, Production: 0;
	opacity: 0;
	padding: 0;
	position: absolute;
	top: 52px;
	left: 24px;
	list-style-type: none;

	&.index { z-index: -1 !important; }

	&.active li {
			top: 0px;
			opacity: 1;
			.transition(top 500ms 550ms, opacity 500ms 550ms);
		}

	li {
		position: relative;
		height: auto;
		width: 176px;
		color: #555;
		font-weight: 300;
		font-family: "Roboto", sans-serif;
		cursor: pointer;
		top: -7px;
		opacity: 0;

		&.main-link:hover,
		&.secondary-link:hover {
			background-color: rgba(0, 0, 0, 0.05);
		}

		&.main-link {
			line-height: 20px;
			font-size: 18px;
			padding: 8px 12px 8px 23px;

			&.highlight { font-weight: 400; }
		}

		&.sub-menu-divider {
			background: rgba(0, 0, 0, 0.1);
			height: 1px;
			margin: 14px;
			width: 148px;
			cursor: default;
		}

		&.secondary-link {
			font-size: 14px;
			line-height: 18px;
			font-weight: 400;
			padding: 6px 12px 6px 23px;
		}
	}
}

.hide {
	// Debbuging: 1, Production: 0;
	opacity: 0; 
	left: -200px;

	a .menu-entry-text {
		background: white;
	}
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function () {
	var link = $('.play-menu li a'),
		expander = $('.show-entries-hover'),
		container = $('.menu-container'),
		pos1 = 0,
		pos2 = "46px",
		pos3 = "92px",
		pos4 = "138px",
		pos5 = "184px",
		pos6 = "230px",
		left = "-200px"
		storeColor = "#444",
		appsColor = "#B3C833",
		moviesColor = "#CE5043",
		musicColor = "#FB8521",
		booksColor = "#1AA1E1",
		devicesColor = "#658092";
	
	// Initialization, start positions
	$('li#store').css('top', pos1);
	$('li#store .menu-entry-text').css({'background-color' : storeColor,'color' : 'white'});
	$('li#apps').css('top', pos2);
	$('li#movies').css('top', pos3);
	$('li#music').css('top', pos4);
	$('li#books').css('top', pos5);
	$('li#devices').css('top', pos6);
	
	// Click function standard
	link.each(function() {
		$(this).on('click', function() {
			// Remove Background-Color when i click on an unselected item
			// Hiding is removed for debugging
			link.not($(this)).parent().addClass('hide');
			expander.removeClass('hidden');
			link.not($(this)).children('.menu-entry-text').attr("style", "");
			// Hide all menus except the right one
			link.not($(this)).next('.sub-menu').css({'opacity' : 0}).addClass('index').removeClass('active');
			$(this).next('.sub-menu').css({'opacity' : 1}).addClass('active');

			// Changing Background-Color and Position
			// "Store"
			// This also resets all menu entries to their initial order
			if ($(this).children().hasClass('store')) {
				$(this).children('.menu-entry-text').css({'background-color' : storeColor,'color' : 'white'});
				$(this).parent().css('top', pos1).removeClass('hide');
				$('#apps').css('top', pos2);
				$('#movies').css('top', pos3);
				$('#music').css('top', pos4);
				$('#books').css('top', pos5);
				$('#devices').css('top', pos6);
				$('li').removeClass('hide');
			}
			// "Apps"
			else if ($(this).children().hasClass('apps')) {
				$(this).children('.menu-entry-text').css({'background-color' : appsColor,'color' : 'white'});
				$(this).parent().css('top', pos1).removeClass('hide');
				$('#store').css('top', pos6);
				$('#movies').css('top', pos2);
				$('#music').css('top', pos3);
				$('#books').css('top', pos4);
				$('#devices').css('top', pos5);
				$('.hide').css({'left': left, 'opacity' : 0, 'transition' : 'all 0s', '-webkit-transition' : 'all 0s', '-moz-transition' : 'all 0s' });
			}
			// "Movies"
			else if ($(this).children().hasClass('movies')) {
				$(this).children('.menu-entry-text').css({'background-color' : moviesColor,'color' : 'white'});
				$(this).parent().css('top', pos1).removeClass('hide');
				$('#store').css('top', pos6);
				$('#apps').css('top', pos2);
				$('#music').css('top', pos3);
				$('#books').css('top', pos4);
				$('#devices').css('top', pos5);
				$('.hide').css({'left': left, 'opacity' : 0, 'transition' : 'all 0s', '-webkit-transition' : 'all 0s', '-moz-transition' : 'all 0s' });
			}
			// "Music"
			else if ($(this).children().hasClass('music')) {
				$(this).children('.menu-entry-text').css({'background-color' : musicColor,'color' : 'white'});
				$(this).parent().css('top', pos1).removeClass('hide');
				$('#store').css('top', pos6);
				$('#apps').css('top', pos2);
				$('#movies').css('top', pos3);
				$('#books').css('top', pos4);
				$('#devices').css('top', pos5);
				$('.hide').css({'left': left, 'opacity' : 0, 'transition' : 'all 0s', '-webkit-transition' : 'all 0s', '-moz-transition' : 'all 0s' });
			}
			// "Books"
			else if ($(this).children().hasClass('books')) {
				$(this).children('.menu-entry-text').css({'background-color' : booksColor,'color' : 'white'});
				$(this).parent().css('top', pos1).removeClass('hide');
				$('#store').css('top', pos6);
				$('#apps').css('top', pos2);
				$('#movies').css('top', pos3);
				$('#music').css('top', pos4);
				$('#devices').css('top', pos5);
				$('.hide').css({'left': left, 'opacity' : 0, 'transition' : 'all 0s', '-webkit-transition' : 'all 0s', '-moz-transition' : 'all 0s' });
			}
			// "Devices"
			else if ($(this).children().hasClass('devices')) {
				$(this).children('.menu-entry-text').css({'background-color' : devicesColor,'color' : 'white'});
				$(this).parent().css('top', pos1).removeClass('hide');
				$('#store').css('top', pos6);
				$('#apps').css('top', pos2);
				$('#movies').css('top', pos3);
				$('#music').css('top', pos4);
				$('#books').css('top', pos5);
				$('.hide').css({'left': left, 'opacity' : 0, 'transition' : 'all 0s', '-webkit-transition' : 'all 0s', '-moz-transition' : 'all 0s' });
			}
        return false;
		});
	});
	
	// Hide menu when you leave the menu container
	container.on('mouseleave', function() {
		$('.hide').css({'left': left, 'opacity' : 0, 'transition' : '', '-webkit-transition' : '', '-moz-transition' : ''});
		$('.sub-menu').removeClass('index');
	})

	// Show the menu when you hover the trigger 
	expander.on('mouseover', function() {
		$('.hide').css({'left': 0, 'opacity' : 1, 'transition' : '', '-webkit-transition' : '', '-moz-transition' : ''});
		$('.sub-menu').addClass('index');
	});
});

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................