Environment Bar

by merganser

HTML

<div class="menubar">
  <img src="https://is1-ssl.mzstatic.com/image/thumb/Purple124/v4/0d/1d/20/0d1d2041-0fa4-cc63-4fce-8a90071aa510/source/256x256bb.jpg" />
</div>
<div class="environment development">
  DEVELOPMENT ENVIRONMENT
</div>

CSS

.menubar {background-color:#1B1515; width:100%; height:50px;}
  .menubar img{height: 50px;}
  
  .environment {
		display: block;
		position: absolute;
		width: 100%;
		padding: 5px 0;
		font-weight: bold;
		text-align: center;
		color: #fff;
	}

	.environment.local {
		background-color: #56ca85;
	}

	.environment.development {
		background-color: #000dbe;
	}

	.environment.test {
		background-color: #be5500;
	}

	.environment.production {
		display: none;
	}

JavaScript

$(document).ready(function () {
    if ($(".development").length || $(".test").length || $(".local").length) {
      setTimeout("HideEnvironment('.environment')", 2000);   
      $(".menubar").mouseenter(function () {
        ShowEnvironment();
      })
        .mouseleave(function(){
        HideEnvironment(".environment");
      });
    }
  });

  function ShowEnvironment() {
      $(".environment").stop().animate({
          height: '22px',
          padding: '5px 0px',
          'text-indent': '-0px'
      }, 400);
  }

  function HideEnvironment(selector) {
      $(selector).stop().animate({
          height: '2px',
          padding: '0px 0px',
         'text-indent': '-9999px'
      }, 400);
  }