<div class="wrap">
  <header class="header">
    <div class="logo">
      <a href="index.html">Link text under logo<span>Hover Logo Image</span></a>
    </div>
    <div class="banner">
      <h1><a href="index.html">Business Name - Site Heading</a></h1>
    </div>
  </header>

  <div class="content">
    <ul class="menu">
      <li><a class="bar0" href="#">Home<span></span></a></li>
      <li><a class="bar1" href="#">Anout Me<span></span></a></li>
      <li><a class="bar2" href="#">Contact Me<span></span></a></li>
      <li><a class="bar3" href="#">Gallery<span></span></a></li>
      <li><a class="bar4" href="#">Design<span></span></a></li>
      <li><a class="bar5" href="#">Editor<span></span></a></li>
    </ul>
    <main class="main">
      <h2>Slide Out Menu Tabs</h2>
      <p>The header logo and the slide out menu tabs both use the <strong>Gilder/Levin Image Replacement</strong> method.</p>
      <p>Lorem ipsum dolor sit amet consectetuer adipiscing Sed Morbi libero consectetuer. Pellentesque sagittis leo nunc Phasellus sapien Curabitur semper vel dignissim sodales. </p>
      <p>Sed felis augue semper risus mus netus in Phasellus sagittis penatibus. Curabitur Vestibulum tortor Ut commodo consectetuer laoreet leo felis orci elit. Arcu et.</p>
      <p>Augue wisi a semper Mauris risus arcu vel Morbi iaculis non. Felis est dui nunc dictumst est ut ac lobortis tellus adipiscing. Eros vel sapien et urna at metus lorem eu morbi condimentum. Nonummy dui congue.</p>
    </main>
  </div>

  <footer class="footer">
    <div>Footer Text</div>
    <div>Footer Text</div>
    <div>Footer Text</div>
  </footer>
</div>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  background: #eee;
}
img {
  display: block;
}
.wrap {
  overflow: hidden;
  width: 100%;
  max-width: 1015px;
  margin: 1em auto;
  border: 1px solid #000;
  border-radius: 20px;
  background: #fff;
}

/*-- Header Styles --*/
.header {
  display: table;
  width: 100%;
  border-bottom: 1px solid;
}
.logo {
  display: table-cell;
  width: 20%;
  max-width: 215px; /*logo image size*/
  max-height: 135px; /*logo image size*/
  position: relative;
}
  .logo span {   /*Image Replacement*/
    position: absolute;
    top:0; left:0;
    width: 100%;
    height: 100%;
    padding: 20px;
    background: orange url(images/logoglow.png) no-repeat center;
    background-size: 100%;
  }
  .logo a:hover span, .logo a:focus span {
    background-color: purple;
    color: #fff;
  }
.banner {
  display: table-cell;
  width: 80%;
  max-width: 800px;
  height: 135px;
}
  .banner h1 {
    display: block;
    height: 100%;
    font-size: 1.5em;
    text-align: center;
    margin: 0;
  }
  .banner a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 1em 0;
    text-decoration: none;
    color: #000;
    background: lime url(images/ac.png) no-repeat center;
    background-size: 100%;
  }
  .banner a:hover, .banner a:focus  {
    background-color: purple;
    color: #fff;
  }

/*-- Main Content Styles --*/
.content {
  display: table; /*contain floats*/
  padding: 1em 0;
}
.main {
  overflow: hidden; /*prevent from sliding under floated ul*/
  padding: 0 1em;
}
h2 {
  font-size: 1.3em;
  margin: 0 0 1em 0;
}
.main p {
  margin: 0 0 3em 0;
}
/*-- Menu Styles --*/
ul.menu {
  float: left;
  list-style: none;
  margin: 0 0 0 -175px;
  padding: 0;
}
.menu li {
  display: block;
  width: 200px; /*background image size*/
  height: 35px; /*background image size*/
  margin: 0 0 2.5em 0;
  position: relative;
}
.menu li a {
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: 100%;
  margin-left: 0;
  transition: margin-left .4s .5s ease;
}
.menu li a:hover, .menu li a:focus {
   margin-left: 175px;
   transition: margin-left .2s 0s ease;
}
li a span {
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: 100%;
  border-radius: 0 10px 10px 0;
  background-repeat: no-repeat;
}
li a.bar0 span {
  background: red url(images/homeSilverGlassText.png);
}
li a.bar1 span {
  background: blue url(images/aboutSilverGlassText.png);
}
li a.bar2 span {
  background: orange url(images/contactSilverGlassText.png);
}
li a.bar3 span {
  background: yellow url(images/gallerySilverGlassText);
}
li a.bar4 span {
  background: purple url(images/uiSilverGlassText.png);
}
li a.bar5 span {
  background: lime url(images/imgeditSilverGlassText.png);
}

/*-- Footer Styles --*/
.footer {
  display: table;
  width: 100%;
  border-top: 1px solid;
}
.footer div {
  display: table-cell;
  width: 33.33%;
  padding: .5em;
  text-align: center;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.