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

36 komentar

Sae kang, sepertinya bisa diisi untuk widget sosmed nya kang... :D

ane suka tu menu slide seperti itu.... memang dasar mas Ruly mah kreatif :D

Keren Kang... tinggal dimodif dikit ajah :)
Ngopi kang lah jangar yeuh can ngopi :D

Iya kang bisa .. di isi nu anom ge tiasa hehe

Ya daripada ngalamun neng hoho ...

Da aslina kang ker ngopi yeuhh bieu mah pun bojo nyanggakeun .. da ari teu ngopi teh asa rug-rug dunya teh hehe

simple dan tetap keren., warna templatex ganti lg ni kang..., pd suka abu2 ni *smile

Itu nama efeknya beneran toggle ya kang...hehe :)
Kok antik ya

Ijin simak Kang Ruly artikel yang menarik ini
Jadi memanfaatkan halaman Header yah Kang.
Kreatif deh Akang yang satu ini ide Cemerlang deh :-d

Bener nya Kang Heri keren deh Tutorial Kang Ruly teh
Tah kopi na mah gak apa-apa Kang Heri buat saya kalau
Jangarna mah buat Kang Ruly aja deh hehhe :)

Sami ari kitu mah jeung uing kang, jigana mun sapoe teu ngopi teh asa rarieut sirah hehehe...malahan uing mah geus nyandu pisan eta kana kopi teh, sapoe oge tiasa ampe 5 kali ngopi uing mah heheee :D

Kode-kodennya mayan panjang juga ya kang, kalo kepanjangan saya suka mumet duluan :D

kalau mumet Kang Marnes minta obatnya sama mas Anthoni tuh banyak disana hahaha

aaaya aya wae tutornya nih ,,membuat orang penasaran ingin mencoba achhhhhh

asik nih kang saya suka konsepnya.. sipp uyy moduf terus nambah pengalaman hehe

balap eta mah kang saya ge kuaten 6-7 gelas .. mbah surip dilawan soalna abdi mah kopi hideung kang resepna

Haha siakang dasar .. bagi-bagi atuh jangar na mah hehe

oh abu-abu ya mas kirain saya brown dark hehe

untuk konsep tombol'y aja .. efect'y sliding mas bud

ini mah sok lebih ae hehe .. iya kang .. cuma memanfaatkan imajinasi aja

kemana aja nih ...

Marnes : resiko kang panjang saalit mah
Dede : o iya bener kang dia ahli obat tuh

Cobian kang bisi molotot pensaran hehe

lumayan lah mas .. sekedar melengkapi !!

Harr nya leres atuh Kang Ruly..? sawios Akang nu sakantenan rieutna
Ngadamel artikel nu Kasep ieu sepertos abi heheheh. kin abi mah
Kantun tos jantena nembe di suhunkeun di Pincuk heula scriptna
Na Kang Ruly hatur saur nu di pihatur. hatur neda nu teu kaduga
Sae pisan :-d Kasep sapertos Kang Admina huhuhu :) :)

Wileujeng wengi Kang Ruly simak lagi artikelna yeuh
Perlu waktu lama untuk memahami pemasangan artikel
Se kasep ini kurang lebih 3 hari 3 malam atau lebih baru rada hapal
Sae pisan jadi kesan nya pada bagian header tidak kosong yah Kang :-d

Ya itu tujuan saya .. biar tampak padat lah gitu istilah nyah hehe

Sanes kinten ari admin na mah .. ditilik tigigir lentik - di teuteup tihareup sieup - disawang ti tukang lenjang ah pokona mah rahwana weh eh ramayana ketang hehe

sibuk... banyak tugas sklh.. + ujian

mantap nav yg ini hemat tempat ...

Owh sukses sob y

Iya nih sob ...

owalah,, tampilan blog jadi profesional klau gunain ini kang :-d

Iya sih , lumayan gimana gitu hehe

ditambah dropdown bisa gk gan....????