Skip to content

Instantly share code, notes, and snippets.

@SalvadorP

SalvadorP/google-app-launcher.markdown

Last active October 20, 2022 20:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SalvadorP/47d9d3aad0eae5afbeae283fffeaea6a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SalvadorP/47d9d3aad0eae5afbeae283fffeaea6a to your computer and use it in GitHub Desktop.
Download ZIP
Google App launcher
Raw
google-app-launcher.markdown
Raw
index.html
<div class="gappslauncher container">
<header>
<h1>Scrollable dropdown like google app launcher</h1>
</header>
<div class="launcher">
<div class="button">
<i class="fa fa-th fa-2x"></i>
</div>
<div class="app-launcher">
<div class="apps">
<ul class="first-set">
<li><i class="fa fa-google-plus-square fa-4x"></i></li>
<li><i class="fa fa-facebook-square fa-4x"></i></li>
<li><i class="fa fa-twitter-square fa-4x"></i></li>
<li><i class="fa fa-youtube-square fa-4x"></i></li>
<li><i class="fa fa-skype fa-4x"></i></li>
<li><i class="fa fa-windows fa-4x"></i></li>
<li><i class="fa fa-linkedin fa-4x"></i></li>
<li><i class="fa fa-apple fa-4x"></i></li>
<li><i class="fa fa-android fa-4x"></i></li>
</ul>
<a href="#" class="more">More</a>
<ul class="second-set hide">
<li><i class="fa fa-dribbble fa-4x"></i></li>
<li><i class="fa fa-html5 fa-4x"></i></li>
<li><i class="fa fa-linux fa-4x"></i></li>
<li><i class="fa fa-css3 fa-4x"></i></li>
<li><i class="fa fa-github fa-4x"></i></li>
<li><i class="fa fa-pinterest fa-4x"></i></li>
<li><i class="fa fa-tumblr-square fa-4x"></i></li>
<li><i class="fa fa-dropbox fa-4x"></i></li>
<li><i class="fa fa-instagram fa-4x"></i></li>
</ul>
</div>
</div>
</div>
</div>
Raw
script.js
$(document).ready(function() {
var scroll = false;
var launcherMaxHeight = 396;
var launcherMinHeight = 296;
$(".app-launcher").toggle();
// Mousewheel event handler to detect whether user has scrolled over the container
$(".apps").bind("mousewheel", function(e) {
if (e.originalEvent.wheelDelta / 120 > 0) {
// Scrolling up
} else {
// Scrolling down
if (!scroll) {
$(".second-set").show();
$(".apps")
.css({ height: launcherMinHeight })
.addClass("overflow");
scroll = true;
$(this).scrollTop(e.originalEvent.wheelDelta);
}
}
});
// Scroll event to detect that scrollbar reached top of the container
$(".apps").scroll(function() {
var pos = $(this).scrollTop();
if (pos === 0) {
scroll = false;
$(".apps")
.css({ height: launcherMaxHeight })
.removeClass("overflow");
$(".second-set").hide();
}
});
// Click event handler to show more apps
$(".apps .more").click(function() {
$(".second-set").show();
$(".apps")
.animate({ scrollTop: $(".apps")[0].scrollHeight })
.css({ height: 296 })
.addClass("overflow");
});
// Click event handler to toggle dropdown
$(".button").click(function(event) {
event.stopPropagation();
$(".app-launcher").toggle();
});
$(document).click(function() {
//Hide the launcher if visible
$(".app-launcher").hide();
});
// Prevent hiding on click inside app launcher
$(".app-launcher").click(function(event) {
event.stopPropagation();
});
});
// Resize event handler to maintain the max-height of the app launcher
$(window).resize(function() {
$(".apps").css({ maxHeight: $(window).height() - $(".apps").offset().top });
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
@import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css);
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh7USSwiPHA.ttf) format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh6UVSwiPHA.ttf) format('truetype');
}
body {
background: #3db3e3;
color: white;
font-family: "Lato", Arial, sans-serif;
}
header {
text-align: center;
}
header h1 {
font-size: 2em;
font-weight: 300;
line-height: 1.3;
margin: 20px;
}
.gappslauncher.container {
margin: 0 auto;
width: 500px;
}
.gappslauncher .launcher {
color: white;
position: relative;
text-align: center;
}
.gappslauncher .app-launcher {
left: 84px;
position: absolute;
top: 40px;
}
.gappslauncher .app-launcher::before {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
content: "";
left: 50%;
margin-left: -5px;
position: absolute;
top: -9px;
z-index: 1;
}
.gappslauncher .apps {
border: 1px solid #ccc;
border-color: rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
height: 396px;
margin-bottom: 30px;
min-height: 196px;
position: relative;
overflow-y: auto;
overflow-x: hidden;
transition: height 0.2s ease-in-out;
-webkit-transition: height 0.2s ease-in-out;
width: 320px;
}
.gappslauncher .launcher .button {
cursor: pointer;
margin: 0 auto;
width: 32px;
}
.gappslauncher .hide {
display: none;
}
.gappslauncher .apps ul {
background: #fff;
list-style: none;
margin: 0;
overflow: hidden;
padding: 28px;
width: 264px;
}
.gappslauncher .apps ul li {
color: black;
float: left;
height: 64px;
padding: 18px 0;
text-align: center;
width: 88px;
}
.gappslauncher .apps .more {
background: #f5f5f5;
color: #282828;
cursor: pointer;
display: block;
height: 40px;
line-height: 40px;
overflow: hidden;
position: absolute;
text-align: center;
text-decoration: none;
width: 320px;
}
.gappslauncher .apps.overflow .more {
border-bottom: 1px solid #ebebeb;
cursor: default;
height: 0;
left: 28px;
outline: none;
width: 264px;
}
.gappslauncher .fa-facebook-square {
color: #3b5998;
}
.gappslauncher .fa-twitter-square {
color: #00aced;
}
.gappslauncher .fa-google-plus-square {
color: #dd4b39;
}
.gappslauncher .fa-youtube-square {
color: #bb0000;
}
.gappslauncher .fa-linkedin {
color: #007bb6;
}
.gappslauncher .fa-instagram {
color: #517fa4;
}
.gappslauncher .fa-pinterest {
color: #cb2027;
}
.gappslauncher .fa-tumblr-square {
color: #32506d;
}
.gappslauncher .fa-skype {
color: #009ee5;
}
.gappslauncher .fa-android {
color: #99cc00;
}
.gappslauncher .fa-dribbble {
color: #c35d9c;
}
.gappslauncher .fa-html5 {
color: #f65b1f;
}
.gappslauncher .fa-css3 {
color: #0070ba;
}
.gappslauncher .fa-dropbox {
color: #65b1ed;
}
.gappslauncher .fa-windows {
color: #1daae2;
}
.gappslauncher .fa-linux {
color: #dd4814;
}
.gappslauncher .fa-apple {
color: #403f3f;
}
.gappslauncher ::-webkit-scrollbar-thumb {
background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.3);
border: 5px solid transparent;
border-radius: 10px;
height: 5px;
min-height: 20px;
min-width: 20px;
width: 5px;
}
.gappslauncher ::-webkit-scrollbar {
background: white;
height: 15px;
width: 15px;
}
.gappslauncher ::-webkit-scrollbar-button {
height: 0;
width: 0;
}
Raw
style.less
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css);
body {
background: #3db3e3;
color: white;
font-family: "Lato", Arial, sans-serif;
}
header {
text-align: center;
}
header h1 {
font-size: 2em;
font-weight: 300;
line-height: 1.3;
margin: 20px;
}
.gappslauncher.container {
margin: 0 auto;
width: 500px;
}
.gappslauncher {
.launcher {
color: white;
position: relative;
text-align: center;
}
.app-launcher {
left: 84px;
position: absolute;
top: 40px;
}
.app-launcher::before {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
content: "";
left: 50%;
margin-left: -5px;
position: absolute;
top: -9px;
z-index: 1;
}
.apps {
border: 1px solid #ccc;
border-color: rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
height: 396px;
margin-bottom: 30px;
min-height: 196px;
position: relative;
overflow-y: auto;
overflow-x: hidden;
transition: height 0.2s ease-in-out;
-webkit-transition: height 0.2s ease-in-out;
width: 320px;
}
.launcher .button {
cursor: pointer;
margin: 0 auto;
width: 32px;
}
.hide {
display: none;
}
.apps ul {
background: #fff;
list-style: none;
margin: 0;
overflow: hidden;
padding: 28px;
width: 264px;
}
.apps ul li {
color: black;
float: left;
height: 64px;
padding: 18px 0;
text-align: center;
width: 88px;
}
.apps .more {
background: #f5f5f5;
color: #282828;
cursor: pointer;
display: block;
height: 40px;
line-height: 40px;
overflow: hidden;
position: absolute;
text-align: center;
text-decoration: none;
width: 320px;
}
.apps.overflow .more {
border-bottom: 1px solid #ebebeb;
cursor: default;
height: 0;
left: 28px;
outline: none;
width: 264px;
}
.fa-facebook-square {
color: #3b5998;
}
.fa-twitter-square {
color: #00aced;
}
.fa-google-plus-square {
color: #dd4b39;
}
.fa-youtube-square {
color: #bb0000;
}
.fa-linkedin {
color: #007bb6;
}
.fa-instagram {
color: #517fa4;
}
.fa-pinterest {
color: #cb2027;
}
.fa-tumblr-square {
color: #32506d;
}
.fa-skype {
color: #009ee5;
}
.fa-android {
color: #99cc00;
}
.fa-dribbble {
color: #c35d9c;
}
.fa-html5 {
color: #f65b1f;
}
.fa-css3 {
color: #0070ba;
}
.fa-dropbox {
color: #65b1ed;
}
.fa-windows {
color: #1daae2;
}
.fa-linux {
color: #dd4814;
}
.fa-apple {
color: #403f3f;
}
::-webkit-scrollbar-thumb {
background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.3);
border: 5px solid transparent;
border-radius: 10px;
height: 5px;
min-height: 20px;
min-width: 20px;
width: 5px;
}
::-webkit-scrollbar {
background: white;
height: 15px;
width: 15px;
}
::-webkit-scrollbar-button {
height: 0;
width: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment