Membuat menu blog keren responsive

Selamat malam sobat

Tadi sore saya membuat sebuah menu responsive untuk blogger dan alhamdulilah sekarang sudah selesai,

ini adalah misi saya untuk bisa meberikan sebuah konten konten terbaik, untuk blog ini, dan di waktu senggang saya saya habiskan untuk belajar tentang coding,

Cuma mau ngingetin ajah bahwa Ini bukan pertama kalinya saya membuat menu untuk blogger karna di artikel sebelumnya juga saya sudah pernah membagikan hal yang serupa tentunya dengan desain yang berbeda beda

Berikut adalah demonya Kalian juga bisa klik di sini





Saya menggunakan css murni tanpa javascrip ini bukan tanpa alasan , 2 hari yang lalu saya mendapat permintaan dari teman yang kebtulan ngeblog di forum tetangga dia meminta saya untuk membuatkan sebuah menu responsive, dan alhamdulilah tadi saya sudah mengirimkanya via email,

Dan sekarang saya ingin search di sini buat kalian , siapa tau di antara kalian ada yang membutuhkan berikut adalah codenya

CSS

.header{display:block;margin:0 auto;top:0;left:0;width:100%;max-width:100%;box-shadow:none;
background-color:#099;position:fixed;height:40px;overflow:hidden;z-index:10;}
img,.logo{float:right;width:27px;height:25px;margin-right:3px;margin-top:2px;font-weight:1000;color:#f00;}
.main{margin: 0 auto;display:block;height: 100%;margin-top:40px;}.mainInner{display:table;width:100%;text-align:center;}.mainInner div{display:table-cell;vertical-align:middle;font-size:2em;font-weight:bold;letter-spacing:1.25px;}
#sidebarMenu{float:left;width:100%;}.sidebarMenuInner{list-style-type:none;position:fixed;left:-15px;z-index:199;float:left;width:100%;border-top:1px solid rgba(255, 255, 255, 0.10);}.sidebarMenuInner li{list-style:none;color:#222;float:left;width:100px;font-weight:bold;padding:1px;font-size:14px;text-transform:uppercase;cursor:pointer;text-decoration:none;}.sidebarMenuInner li a{color:#fff;margin-top:-48px;float:left;width:100px;z-index:1999px;font-weight:bold;text-decoration:none;font-family:'Varela Round',sans-serif;}input[type="checkbox"]:checked ~ #sidebarMenu{transform:translateX(0);}
input[type=checkbox]{transition:all 0.3s;box-sizing:border-box;display:none;}.sidebarIconToggle{transition:all 0.3s;box-sizing:border-box;cursor:pointer;
position:fixed;z-index:99;height:100%;width:100%;top:12px;left:13px;height:22px;width:22px;}
/* ////////////////////////////////////
// Nama    : menu sidebar responsive //
// Di buat : 11-05-2018              //
// kalian boleh hapus ini...         //
//////////////////////////////////// */
@media screen and (max-width:600px){
.header{display:block;margin:0 auto;top:0;left:0;width:100%;max-width:100%;box-shadow:none;
background-color:#099;position:fixed;height:40px;overflow:hidden;z-index:10;}img,.logo{float:right;width:27px;height:25px;margin-right:3px;margin-top:4px;font-weight:1000;color:#f00;}.main {margin: 0 auto;display:block;height:100%;margin-top:40px;}.mainInner{display:table;height:100%;width:100%;text-align:center;}.mainInner div{display:table-cell;vertical-align:middle;font-size:2em;font-weight:bold;letter-spacing:1.20px;}#sidebarMenu{height:100%;position:fixed;left:0;width:250px;margin-top:0px;transform:translateX(-250px);transition:transform 250ms ease-in-out;background:linear-gradient(180deg,#099 10%,#3F5EFB 100%);}.sidebarMenuInner{margin:0;padding:0;border-top:1px solid rgba(255, 255, 255, 0.10);}.sidebarMenuInner li{list-style:none;margin-top:50px;margin-left:20px;color:#fff;width:100%;text-transform:uppercase;font-weight:bold;padding:5px;cursor:pointer;border-bottom:1px solid rgba(255, 255, 255, 0.10);}
.sidebarMenuInner li span{display:block;font-size:14px;color:rgba(255, 255, 255, 0.50);}
.sidebarMenuInner li a{color:#fff;text-transform:uppercase;font-weight:bold;cursor:pointer;text-decoration:none;font-family:'Varela Round',sans-serif;}
input[type="checkbox"]:checked ~ #sidebarMenu{transform:translateX(0);}
input[type=checkbox]{transition:all 0.3s;box-sizing:border-box;display:none;}.sidebarIconToggle{transition:all 0.3s;box-sizing:border-box;cursor:pointer;
position:fixed;z-index:99;height:100%;width:100%;top:12px;left:13px;height:22px;width:22px;}.spinner{transition:all 0.3s;box-sizing:border-box;position:absolute;height:3px;width:100%;background-color:#fff;}.horizontal{transition:all 0.3s;box-sizing:border-box;position: relative;float:left;margin-top:3px;}.diagonal.part-1{position:relative;transition:all 0.3s;box-sizing:border-box;float:left;}
.diagonal.part-2{transition:all 0.3s;box-sizing:border-box;position:relative;float:left;margin-top:3px;}input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal{transition:all 0.3s;box-sizing:border-box;opacity:0;
}input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1{transition:all 0.3s;box-sizing:border-box;transform:rotate(135deg);margin-top:8px;}input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2{transition: all 0.3s;box-sizing: border-box;transform: rotate(-135deg);margin-top: -9px;}}

HTML

<div class="header"><b class="logo"><img src="logo.png"></b></div>
  <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle">
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
</label>
  <div id="sidebarMenu">
    <ul class="sidebarMenuInner">  
      <li><a href="https://webcensar.com" target="_blank">webcensar</a></li>
      <li><a href="https://webcensar.com" target="_blank">Company</a></li>
      <li><a href="https://instagram.com/toatcs" target="_blank">Instagram</a></li>
      <li><a href="https://twitter.com/Gwtoat" target="_blank">Twitter</a></li>
      <li><a href="https://www.youtube.com/channel/" target="_blank">YouTube</a></li>
    </ul>
  </div>
  <div id='center' class="main center">
    <div class="mainInner">
      <div>CSS MURNI MENU SIDEBAR RESPONSIVE</div>
    </div>
    <div class="mainInner">
      <div>CSS MURNI MENU SIDEBAR RESPONSIVE</div>
    </div>
    <div class="mainInner">
      <div>CSS MURNI MENU SIDEBAR RESPONSIVE</div>
    </div>
  </div>

Itulah yang bisa saya search , semoga bermanfaat dan berkah AMIN

Baca juga