Skip to content

Instantly share code, notes, and snippets.

@driesd
Created October 15, 2013 08:29
Show Gist options
  • Save driesd/6988373 to your computer and use it in GitHub Desktop.
Save driesd/6988373 to your computer and use it in GitHub Desktop.
Provides toggle icons for mobile usability
<div id="mobile-icons">
<span class="mobile-icon mobile-icon-search">Search</span>
<span class="mobile-icon mobile-icon-menu">Menu</span>
</div>
//TOGGLES
$('.mobile-icon-search').click(function() {
$(".search").slideToggle('fast');
});
$('.mobile-icon-menu').click(function() {
$(".secondary-menu").slideToggle('fast');
});
//------------------
//-- MOBILE ICONS --
//------------------
#mobile-icons {
position: absolute;
top: 0.5em;
right: 1em;
z-index: 10;
.mobile-icon {
cursor: pointer;
float: left;
margin-left: 0.5em;
text-indent: -999px;
overflow: hidden;
position: relative;
height: 36px;
width: 36px;
&:after {
content: "";
position: absolute;
}
}
.mobile-icon-search:after {
@include png-sprite(icon-search-big);
left: 8px;
top: 6px;
}
.mobile-icon-menu:after {
@include png-sprite(icon-menu-big);
left: 8px;
top: 6px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment