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
Tampilan smartphone saat di klik
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