Modifikasi Logo Header Dengan Menu

Setelah sebelumnya membahas cara Modifikasi Header Dengan Menu , kali ini kita akan mencoba untuk menyentuh bagian navigation dengan efect toggle yang bisa dijadikan alternatif lain apabila sobat males dengan modifikasi bagian logo pada header dan kefikiran ingin menambahkan display:none pada logo header dan mengganti posisi logonya yang ditempatkan pada bagian menu atau mungkin hanya ingin menjadikan sebuah menu biasa saja . Lebih jelasnya silahkan lihat demonya 

Untuk mendapatkan hasil yang maksimal semua tergantung pada kreatifitas kita.

CSS

#nav{
  background-color: #248080;
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #e7e8e9;
  box-shadow: 0 0 5px #ccc;
}
#innerNav{
  max-width: 960px;
  height: 70px;
  margin: 0 auto;
}
#logo{
  font-family: 'Grand Hotel', cursive;
  font-size: 3em;
  color: #e7e8e9;
  padding-top: 5px;
  padding-left: 5px;
  float: left;
}
.toggleBtn{
  float: right;
  height: 30px;
  border-left: 2px solid #e7e8e9;
  padding: 20px;
  font-family: 'Exo', sans-serif;
  font-size: 1.4em;
  font-weight: bold;
  color: #e7e8e9;
  cursor: pointer;
}
#menu{
  width: 200px;
  height: 100%;
  background-color: #248080;
  border-left: 1px solid #e7e8e9;;
  float: right;
  position: absolute;
  right: -201px;
  transition: all 0.3s ease-out;
}
.btn{
  height: 30px;
  width: 90%;
  padding: 10px;
  border-bottom: 2px solid #e7e8e9;
  font-family: 'Exo', sans-serif;
  font-size: 1.4em;
  font-weight: bold;
  color: #e7e8e9;
  background-color: #248080; 
}
.btn:hover, .toggleBtn:hover{
  background-color: #e7e8e9;
  color: #c63c41;
  cursor: pointer;
}
.show{
  right: 0px !important;
}

Perubahan posisi pada nav perhatikan kode yang diawali float: right; .
HTML

<div id="nav">
  <div id="innerNav">
    <div id="logo">Action Blog</div>
    <div class="toggleBtn">Menu</div>
  </div>
</div>
<div id="menu">
  <div class="btn">jQuery</div>
    <div class="btn">CSS</div>
    <div class="btn">HTML</div>
</div>

JS

$(".toggleBtn").click(function () {
  $("#menu").toggleClass("show");
});

Silahkan sobat kreasikan kembali untuk hasil yang lebih maksimal yang sesuai dengan tema .

Resource : Peter Bork/denmark