إنضم لنا

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
Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail