ipad dark toolbar

ipad style dark toolbar with button

by voodoomonkey

HTML

<script src="https://dl.dropboxusercontent.com/u/97182346/fonts/icomoon.eot"></script>
<script src="https://dl.dropboxusercontent.com/u/97182346/fonts/icomoon.ttf"></script>
<script src="https://dl.dropboxusercontent.com/u/97182346/fonts/icomoon.woff"></script>
<div id="top-toolbar-dark">
    <div class="gripper-dark">
        <span class="gripperbg"></span>
        <span class="gripperbg"></span>
        <span class="gripperbg"></span>
    </div>
    <span class="top-toolbar-dark-divider"></span>
 <span class="top-toolbar-dark-button">Some tool</span>
 <span class="top-toolbar-dark-divider"></span>
 <span class="top-toolbar-dark-button">Some toggletool</span>

</div>
<div id="top-toolbar-light">
    <div class="gripper-light">
        <span class="gripperbg"></span>
        <span class="gripperbg"></span>
        <span class="gripperbg"></span>
    </div>
   <span class="top-toolbar-light-divider"></span>
    <span class="top-toolbar-light-button-left">Some</span>
 <span class="top-toolbar-light-button-middle">other</span>
 <span class="top-toolbar-light-button-right">tool</span>
<span class="top-toolbar-light-divider"></span>
    <!-- some toolbar icons achieved with icon font technique-->
    <div class="icons">
        <span class="box1"> <span aria-hidden="true" class="icon-pencil"></span></span>
        <span class="box1"> <span aria-hidden="true" class="icon-disk"></span></span>
        <span class="box1"> <span aria-hidden="true" class="icon-remove"></span></span>
        <span class="box1"> <span aria-hidden="true" class="icon-location"></span></span>
        <span class="box1"> <span aria-hidden="true" class="icon-calendar"></span></span>
        <span class="box1"> <span aria-hidden="true" class="icon-search"></span></span>
        <span class="box1"> <span aria-hidden="true" class="icon-plus"></span></span>
    </div>
  <span class="top-toolbar-light-divider"></span>
    <span class="top-toolbar-light-button-single">Single click</span>
  <span...

CSS

* {
    margin:0;
}
@font-face {
	font-family: 'icomoon';
	src:url('https://dl.dropboxusercontent.com/u/97182346/fonts/icomoon.eot');
	src:url('https://dl.dropboxusercontent.com/u/97182346/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('https://dl.dropboxusercontent.com/u/97182346/fonts/icomoon.woff') format('woff'),
		url('https://dl.dropboxusercontent.com/u/97182346/fonts/icomoon.ttf') format('truetype'),
		url('https://dl.dropboxusercontent.com/u/97182346/fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'icomoon';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-disk, .icon-pencil, .icon-remove, .icon-location, .icon-calendar, .icon-search, .icon-plus, .icon-Untitled-1 {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
    font-size:16px;
    color:#ccc;
    cursor:pointer;
}
.icon-disk:hover, .icon-pencil:hover, .icon-remove:hover, .icon-location:hover, .icon-calendar:hover, .icon-search:hover, .icon-plus:hover, .icon-Untitled-1:hover {
     color:#545454;
}

.icon-disk:before {
	content: "\e000";
    text-shadow: 1px 1px #fff; 
}

.icon-pencil:before {
	content: "\e001";
    text-shadow: 1px 1px #fff;
}
.icon-remove:before {
	content: "\e003";
       text-shadow: 1px 1px #fff;
}
.icon-location:before {
	content: "\e004";
       text-shadow: 1px 1px #fff;
}
.icon-calendar:before {
	content: "\e005";
       text-shadow: 1px 1px...

JavaScript

$('.top-toolbar-dark-button').on('click', function () {
    $(this).toggleClass('active').siblings().removeClass('active');
});

//this is to disable highlighting of button text when double clicking on the button ; requires jqueryui
$("body").disableSelection();

$('.top-toolbar-light-button-left').on('click', function () {
    $(this).toggleClass('active').siblings().removeClass('active');
});
$('.top-toolbar-light-button-middle').on('click', function () {
    $(this).toggleClass('active').siblings().removeClass('active');
});
$('.top-toolbar-light-button-right').on('click', function () {
    $(this).toggleClass('active').siblings().removeClass('active');
});