Skip to content

Instantly share code, notes, and snippets.

@mattkenefick

mattkenefick/gist:4982494

Created February 19, 2013 02:08
Show Gist options
  • Save mattkenefick/4982494 to your computer and use it in GitHub Desktop.
Save mattkenefick/4982494 to your computer and use it in GitHub Desktop.
Download ZIP
Start of Dribble.
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<style>
ul, li { margin: 0; padding: 0; list-style: none; }
.menu-wrapper {
position: absolute;
width: 200px;
font: 13px/1.4 "freight-sans-pro", "Helvetica", Arial, sans-serif;
font-weight: 600;
color: #555;
}
.menu-wrapper:after, .menu-wrapper:before {
border: solid transparent;
content: ' ';
height: 0;
right: 100%;
position: absolute;
pointer-events: none;
width: 0;
}
.menu-wrapper:after {
z-index: 20;
border-width: 12px;
border-right-color: #f0f0f0;
top: 15px;
margin-right: -2px;
}
.menu-wrapper:before {
z-index: 9;
border-width: 17px;
border-right-color: #a6a09e;
top: 10px;
margin-right: -6px;
}
.menu {
position: relative;
z-index: 11;
background: #f0f0f0;
border: 1px solid #a6a09e;
border-radius: 5px;
box-shadow: 3px 5px 15px rgba(0, 0, 0, 0.2), 1px 3px 3px rgba(0, 0, 0, 0.1);
padding: 7px 0;
}
.menu li {
line-height: 25px;
padding: 0 10px;
}
.menu li:hover {
background: #ccc;
cursor: pointer;
}
.menu li icon {
positon: absolute;
background: #aaa;
float: left;
display: block;
width: 15px;
height: 15px;
margin-right: 10px;
margin-top: 6px;
border-radius: 15px;
}
.menu li hr {
border: 0;
height: 1px;
background: #f0f0f0; /* Old browsers */
background: -moz-linear-gradient(left, #f0f0f0 0%, #ccc 48%, #f0f0f0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f0f0f0), color-stop(48%,#ccc), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #f0f0f0 0%,#ccc 48%,#f0f0f0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #f0f0f0 0%,#ccc 48%,#f0f0f0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #f0f0f0 0%,#ccc 48%,#f0f0f0 100%); /* IE10+ */
background: linear-gradient(to right, #f0f0f0 0%,#ccc 48%,#f0f0f0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#f0f0f0',GradientType=1 ); /* IE6-9 */
}
</style>
</head>
<body>
<span>Via <a href="http://dribbble.com/shots/943177-iTunes-Popover-Freebie">http://dribbble.com/shots/943177-iTunes-Popover-Freebie</a></span>
<div class="menu-wrapper">
<ul class="menu">
<li>
<icon class="plus"></icon>
<span>Add to Up Next</span>
</li>
<li class="divider"><hr></li>
<li>
<icon class="genius"></icon>
<span>Start Genius</span>
</li>
<li>
<icon class="genius"></icon>
<span>Create Genius Playlist</span>
</li>
<li>
<icon class="list"></icon>
<span>Genius Suggestions</span>
</li>
<li class="divider"><hr></li>
<li>
<icon class="list-add"></icon>
<span>Add to</span>
</li>
<li class="divider"><hr></li>
<li>
<icon class="artist"></icon>
<span>Go to &ldquo;Funeral for a Friend&rdquo;</span>
</li>
<li>
<icon class="album"></icon>
<span>Go to &ldquo;Hours&rdquo;</span>
</li>
<li>
<icon class="store"></icon>
<span>Show in iTunes Store</span>
</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
//$('.menu-wrapper').hide();
$(document).on('contextmenu', function(e) {
$('.menu-wrapper').css({
top: e.pageY - 30,
left: e.pageX + 13
}).fadeIn();
e.preventDefault();
e.stopPropagation();
});
$(document).on('click', function() {
$('.menu-wrapper').hide();
});
</script>
<script type="text/javascript" src="//use.typekit.net/aqz0yfw.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment