• Madjongke.com
  • Kontak
  • Facebook

Madjongke

Bacaan Santai Kehidupan Sehari-hari

  • Beranda
  • Cinta
  • Kehidupan
  • Kesetiaan
  • Wanita/Cewek
  • Cowok/Pria
  • Kendaraan
  • Lainnya
    • Kata-kata
    • Travel
    • Berita
    • Komik
    • Suami
    • Mertua
    • Resep Masakan
    • Anak
    • Kisah nyata
    • Mantan
    • Lain-lain
Beranda » blog » Menu Header Responsive Sticky Tanpa Javascript, Cuma Css Super Ringan

Menu Header Responsive Sticky Tanpa Javascript, Cuma Css Super Ringan

Menu header responsive tanpa javascript sehingga membuat loading blog super ringan. Dengan fungsi sticky yang hanya berfungsi dalam tampilan web saja. Untuk tampilan mobile tidak diaktifkan karena pada browser lama tidak bekerja.

Selain ringan, menu header responsive ini juga pastinya valid Lighthouse Report Viewer dan Pagespeed Instights, sehingga sangat baik untuk web atau blog.

Kode Menu Header Responsive Sticky Tanpa Javascript, Cuma Css Super Ringan Untuk Blogspot


Tampilan web saat scroll ke bawah

menu header responsive

Tampilan smartphone saat di klik

menu header responsive sticky


1. Kode css

<style>
  #menu{background-image: linear-gradient(#333,#111);color:#eee;height:40px;width:100%;margin:0 auto;position: sticky;top: 0px;z-index: 9999;}#menu ul,#menu li{margin:0;padding:0;list-style:none}#menu ul{max-width:1200px;margin:auto;height:40px}#menu li{float:left;display:inline;position:relative;font-family:'Oswald',Arial;font-weight:bold;font-size:12px;text-shadow:0 -1px 0 #000;border-right:1px solid #444;text-transform:uppercase}#menu li:first-child{border-left:none}#menu a{display:block;line-height:40px;padding:0 14px;text-decoration:none;color:#eee}#menu li:hover >a,#menu li a:hover{background:#000}#menu input{display:none;margin:0;padding:0;width:100px;height:40px;opacity:0;cursor:pointer}#menu label{font:bold 30px font-family:'Oswald',Arial;font-weight:bold;display:none;width:35px;height:36px;line-height:36px;text-align:center}#menu label span{font-size:12px;position:absolute;left:40px}#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#393939;position:absolute;z-index:99;display:none;border:0}#menu ul.menus li{display:block;width:100%;font:12px font-family:'Oswald',Arial;font-weight:bold;text-transform:none}#menu li:hover ul.menus{display:block}#menu a.rohmadganteng{padding:0 27px 0 14px}#menu a.rohmadganteng::after{content:""width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}#menu ul.menus a:hover{background:#000} 
.nav1{width:100%;height:auto;min-height:24px;margin:0 auto;padding:3px 0;background:#c00;background-image:linear-gradient(#a00,#000)}.nav1 ul{margin:auto;max-width:1200px;padding-left:2px;color:#666;text-transform:capitalize;list-style-type:none;font:normal 12px Arial,Helvetica,Verdana,sans-serif;}.nav1 li{display:inline;margin:0}.nav1 li a{float:left;display:block;text-decoration:none;border-right:0 solid #415770;font-weight:700;color:#fff;padding:5px 6px 3px}.nav1 li a:hover{background:#070;border-radius:10px;-webkit-border-radius:10px;-opera-border-radius:10px;-moz-border-radius:10px;color:#fff;text-decoration:none}
@media screen and (max-width: 800px){.widget-content ul li a{font-size:15.5px}.nav1{display:none} #menu{background:#222;background-image: -moz-linear-gradient(#444, #111);position:relative;z-index: 10} #menu ul{background:#393939;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;text-align:left;display:none} #menu ul.menus{width:100%;position:static;padding-left:20px} #menu li{display:block;float:none;width:auto} #menu input,#menu label{position:absolute;top:0;left:0;display:block} #menu input{z-index:4} #menu input:checked + label{color:red;font-weight:bold} #menu input:checked + label:before {padding-left:5px;content: "x";color:#c00}#menu input:checked ~ ul{display:block}}
</style>

Letakkan kode css diatas kode </head>

2. Kode html

<nav id='menu' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<input id='menusa' type='checkbox'/>
<label for='menusa'>
<span style='margin-top:1px;font-size:17px;'>Menu</span>
<svg style='width:30px;height:30px' viewbox='0 -3 24 24'>
<path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' fill='currentColor'></path>
</svg>
</label>
<ul>
<li><a href='https://www.madjongke.com' title='Halaman utama madjongke.com'>
<span style='margin:3px;'>Beranda</span></a>
</li><li><a href='https://www.madjongke.com/search/label/cinta' title='Artikel kategori cinta'>Cinta</a></li><li><a href='https://www.madjongke.com/search/label/mantan' title='Artikel kategori mantan'>Mantan</a></li><li><a href='https://www.madjongke.com/search/label/kesetiaan' title='Artikel kategori kesetiaan'>Kesetiaan</a></li><li><a href='https://www.madjongke.com/search/label/kata-kata' title='Artikel kategori kata-kata'>Kata-kata</a></li><li><a href='https://www.madjongke.com/search/label/wanita' title='Artikel kategori wanita'>Wanita/Cewek</a></li><li><a href='https://www.madjongke.com/search/label/cowok' title='Artikel kategori pria/cowok'>Cowok/Pria</a></li><li><a class='rohmadganteng' href='#' title='Daftar kategori lain'>Lainnya</a>
<ul class='menus'><li><a href='https://www.madjongke.com/search/label/berita' title='Artikel kategori berita'>Berita</a></li><li><a href='https://www.madjongke.com/search/label/komik' title='Artikel kategori komik'>Komik</a></li><li><a href='https://www.madjongke.com/search/label/suami' title='Artikel kategori Suami'>Suami</a></li><li><a href='https://www.madjongke.com/search/label/mertua' title='Artikel kategori mertua'>Mertua</a></li><li><a href='https://www.madjongke.com/search/label/resep%20masakan' title='Artikel kategori resep masakan'>Resep Masakan</a></li><li><a href='https://www.madjongke.com/search/label/anak' title='Artikel kategori anak'>Anak</a></li><li><a href='https://www.madjongke.com/search/label/kisah' title='Artikel kategori kisah nyata'>Kisah nyata</a></li><li><a href='https://www.madjongke.com/search/label/kehidupan' title='Artikel kategori kehidupan'>Kehidupan</a></li><li><a href='https://www.madjongke.com/search/label/lain-lain' title='Artikel kategori lain-lain'>Lain-lain</a></li></ul>
</li></ul>
</nav>

Letakkan kode diatas pada area navigasi atau di bawah kode <body> kemudian simpan template.

Untuk kode <a href='https://www.madjongke.com' title='Halaman utama madjongke.com'><span style='margin:3px;'>Beranda</span></a> dan <a href='https://www.madjongke.com/search/label/cinta' title='Artikel kategori cinta'>Cinta</a> dan seterusnya silahkan disesuaikan sendiri dengan blog kalian.

Kelebihan menu header diatas

1. Tanpa javascript sehingga loading blog lebih ringan

2. Dengan posisi sticky sehingga akan selalu terlihat ketika pengunjung scroll ke bawah.

3. Terdapat menu dropdown sehingga lebih ringkas dan bisa muat link lebih banyak.

4. Yang pasti responsive sehingga cocok untuk semua ukuran blog

Baca juga: Related Posts Gambar Jernih Valid Lighthouse, PageSpeed, Googleusercontent

Rohmad Nur Hidayat, Rabu, 08 Desember 2021

Bagikan

#blog #Terbaru
Artikel Terkait
Lebih baru
Lebih lama
Beranda

10 Terpopuler

  • 8 Perbedaan Hasil Kursus Mengemudi Mobil Dengan Belajar Otodidak
    Ada perbedaan mendasar terkait apa yang kita dapatkan ketika belajar menyetir mobil baik secara otodidak atau melalui kursus mengemudi. Mana...
  • Solusi Alternatif Jika Kampas Kopling Mobil Habis Tanpa Harus Ganti Baru
    Kampas kopling yang sudah tidak lagi maksimal, tentunya perlu dilakukan penggantian agar mobil kembali bertenaga. Tapi apa daya, karena kebu...
  • 4 Penyebab Konsumsi BBM Mobil Boros Yang Jarang Orang Tahu, Bisa Jadi Kamu Baru Tahu
    Penyebab konsumsi bbm mobil boros yang sudah umum, tentu semua orang sudah paham. Tapi kalau yang belum umum tentu tidak banyak orang yang t...
  • Alasan Harga Kredit Mobil Bekas Lebih Murah Daripada Bayar Tunai
    Kita sering melihat sebuah postingan jual beli mobil bekas, dimana ada harga yang berbeda antara beli cash dengan sistem kredit. Biasanya ha...
  • Alasan Piringan Cakram Dibuat Dari Bahan Yang Mudah Berkarat
    Apakah kalian pernah menyadari, hanya beberapa hari saja parkir kemudian melihat piringan cakram pada kendaraan tampak mulai berkarat. Menun...
  • Rumus Sederhana Mengemudi Mobil Hemat BBM Dari Petunjuk Jarum RPM
    Ketika mengemudi mobil sebagian besar orang akan berusaha untuk hemat bbm. Konsumsi bbm menjadi lebih efisien sehingga untuk jarak yang sama...
  • Beli Mobil Dulu Atau Latihan Mengemudi Dulu, Ini Jawabannya
    Menyetir mobil merupakan kemampuan yang banyak diinginkan oleh kebanyakan orang. Apalagi jika sudah ada gambaran akan membeli mobil untuk ke...
  • 10 Arti Kata Hmm Dari Wanita Saat Chat, Kamu Yang Mana?
    Penggunaan kata hmm sebenarnya digunakan untuk menunjukkan kondisi sedang berpikir. Seharusnya setelah menggunakan kata itu ada kalimat teru...
  • 6 Alur Pedagang Mobil Dalam Menata Mobil Bekas Agar Layak Jual, Patut Ditiru
    Unit kendaraan yang baru saja didapatkan oleh pedagang mobil, tidak serta merta dijual langsung begitu saja. Untuk sasaran calon pembeli pem...
  • 7 Perbedaan Sensasi Mengemudi FWD (Penggerak Roda Depan) Dengan RWD (Belakang)
    Sistem penggerak mobil ada dua yaitu FWD (Front Wheel Drive), yang merupakan jenis mode penggerak di mana tenaga dari mesin akan disalurkan ...
Beranda | Tentang | Kontak | Privacy Policy | Syarat Dan Ketentuan | Sitemap
Copyright © 2012-2022 Madjongke - All Rights Reserved
Powered by Blogger