{"id":49815,"date":"2026-04-07T20:40:22","date_gmt":"2026-04-07T13:40:22","guid":{"rendered":"https:\/\/muxidn.my.id\/?p=49815"},"modified":"2026-04-07T20:41:58","modified_gmt":"2026-04-07T13:41:58","slug":"membuat-navbar-responsive-dengan-html-dan-css","status":"publish","type":"post","link":"https:\/\/muxidn.my.id\/index.php\/2026\/04\/07\/membuat-navbar-responsive-dengan-html-dan-css\/","title":{"rendered":"Membuat Navbar Responsive dengan HTML dan CSS"},"content":{"rendered":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2024\/02\/Membuat-Menu-Navbar-Responsive.png\" alt=\"Membuat Menu Navbar Responsive\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>By\u00a0<a href=\"https:\/\/www.malasngoding.com\/author\/admin\/\">Diki Alfarabi Hadi<\/a><\/li>\n\n\n\n<li>11 February 2024<\/li>\n\n\n\n<li><a href=\"https:\/\/www.malasngoding.com\/category\/html\/\">HTML<\/a>\u00a0<a href=\"https:\/\/www.malasngoding.com\/category\/web-design\/\">Web Design<\/a><\/li>\n<\/ul>\n\n\n\n<p>Di tutorial ini teman-teman akan belajar membuat navbar&nbsp;<em>responsive<\/em>&nbsp;dengan HTML dan CSS.<\/p>\n\n\n\n<p>Dengan penggunaan&nbsp;<em>website<\/em>&nbsp;yang berkembang pesat saat ini, kita wajib memastikan&nbsp;<em>website<\/em>&nbsp;yang kita buat memiliki desain web yang menarik.<\/p>\n\n\n\n<p>Tapi bukan hanya desain tampilannya saja yang harus kita perhatikan, kita juga harus memastikan bahwa&nbsp;<em>website<\/em>&nbsp;kita dapat diakses dari berbagai perangkat dengan baik.<\/p>\n\n\n\n<p>Salah satu komponen yang terpenting adalah dengan membuat navbar yang responsive.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2024\/02\/Membuat-navbar-responsive-dengan-HTML-dan-CSS.png\" alt=\"Membuat navbar responsive dengan HTML dan CSS\" class=\"wp-image-5697\"\/><figcaption class=\"wp-element-caption\">Membuat navbar responsive dengan HTML dan CSS<\/figcaption><\/figure>\n\n\n\n<p>Navbar atau menu navigasi pada website kita harus&nbsp;<em>responsive<\/em>&nbsp;saat diakses menggunakan berbagai perangkat.<\/p>\n\n\n\n<p>Dalam tutorial ini, kamu akan diajarkan langkah-langkah untuk&nbsp;<strong>membuat navbar responsive menggunakan HTML dan CSS<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pengertian Website Responsive<\/h2>\n\n\n\n<p>Website responsive adalah website yang memiliki kemampuan untuk menyesuaikan tampilannya secara otomatis dengan layar perangkat pengguna.<\/p>\n\n\n\n<p>Tampilan akan disajikan sesuai dengan ukuran layar perangkat yang digunakan oleh pengguna.<\/p>\n\n\n\n<p>Seorang ahli desain web yaitu&nbsp;<mark>Ethan Marcotte<\/mark>&nbsp;mengakui betapa pentingnya website responsive. Om Ethan Marcotte adalah seorang Web Designer yang terkenal karena telah memperkenalkan konsep desain responsive pada tahun 2010 melalui tulisannya yang berjudul \u201c<em>Responsive Web Design<\/em>\u201d di situs&nbsp;<a href=\"https:\/\/alistapart.com\/article\/responsive-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">A List Apart<\/a>.<\/p>\n\n\n\n<p>Karena kontribusi dan edukasi yang diberikan oleh om Ethan ini, dia dianggap sebagai salah satu pakar terkemuka di bidang&nbsp;<em>website design<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pentingnya Tampilan Website Yang Responsive<\/h2>\n\n\n\n<p>Website yang responsive bertujuan untuk memberikan pengalaman dan kenyamanan untuk pengguna saat mengakses website kita.<\/p>\n\n\n\n<p>Manfaat lain :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tampilan website tetap rapi walaupun diakses dari perangkat berbeda<\/li>\n\n\n\n<li>Membuat pengguna nyaman berada di website<\/li>\n\n\n\n<li>Memudahkan pengguna mengakses link atau menu<\/li>\n\n\n\n<li>Memudahkan pengguna melihat informasi yang kita sajikan baik itu informasi atau layanan yang kita tawarkan<\/li>\n\n\n\n<li><a href=\"https:\/\/developers.google.com\/search\/docs\/crawling-indexing\/mobile\/mobile-sites-mobile-first-indexing?hl=id\" target=\"_blank\" rel=\"noreferrer noopener\">Meningkatkan SEO<\/a>\u00a0website di mesin pencari google<\/li>\n<\/ul>\n\n\n\n<p>Setelah memahami sedikit penjelasan tentang apa itu makna responsive dan manfaatnya, kita akan mulai dengan materi cara membuat menu navigasi atau navbar yang responsive dengan HTML dan CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Membuat Navbar Responsive dengan HTML dan CSS<\/h2>\n\n\n\n<p>Untuk mengikuti panduan cara membuat navbar responsive dengan HTML dan CSS ini, silahkan teman-teman sediakan sebuah file HTML dan file CSS.<\/p>\n\n\n\n<p>Siapkan file HTML tempat kita akan membuat navbar responsive.<\/p>\n\n\n\n<p>Di sini saya menyiapkan 2 buah file, yaitu :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>index.html<\/li>\n\n\n\n<li>style.css<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Membuat Kerangka Navbar Dengan HTML<\/h3>\n\n\n\n<p>Yuk mari kita buat&nbsp;<a href=\"https:\/\/www.malasngoding.com\/belajar-html-mengenal-tag-element-atribut-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">struktur kerangka HTML<\/a>&nbsp;dan struktur menu navigasi atau navbar nya.<\/p>\n\n\n\n<p><strong>index.html<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>123456789101112131415161718192021222324252627282930313233343536<\/td><td>&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset=&#8221;UTF-8&#8243;&gt; &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt; &lt;title&gt;Membuat Navbar Responsive Dengan HTML dan CSS&lt;\/title&gt; &lt;link rel=&#8221;stylesheet&#8221; href=&#8221;style.css&#8221;&gt;&lt;\/head&gt;&lt;body&gt; &lt;nav class=&#8221;navbar&#8221;&gt; &lt;div class=&#8221;container&#8221;&gt; &lt;a href=&#8221;https:\/\/www.malasngoding.com&#8221; class=&#8221;logo&#8221;&gt;Malas Ngoding&lt;\/a&gt; &lt;ul class=&#8221;menu&#8221;&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Home&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Tentang&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Produk&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Layanan&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Kontak Kami&lt;\/a&gt;&lt;\/li&gt; &lt;\/ul&gt; &lt;div class=&#8221;tombol&#8221;&gt; &amp;#9776; &lt;\/div&gt; &lt;\/div&gt; &lt;\/nav&gt; &lt;div&gt; &lt;center&gt;&lt;h2&gt;Panduan Membuat Navbar Responsive dari &lt;a href=&#8221;https:\/\/www.malasngoding.com\/membuat-navbar-responsive-html-css&#8221;&gt;www.malasngoding.com&lt;\/a&gt;&lt;\/h2&gt;&lt;\/center&gt; &lt;\/div&gt;&lt;\/body&gt;&lt;\/html&gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Perhatikan pada file&nbsp;<code>index.html<\/code>&nbsp;di atas.<\/p>\n\n\n\n<p>Dalam file&nbsp;<code>index.html<\/code>&nbsp;ini kita membuat kerangka struktur HTML, kemudian kita juga membuat struktur menu navbar dengan element&nbsp;<code>&lt;nav&gt; .. &lt;\/nav&gt;<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>1234567891011121314151617181920<\/td><td>&lt;nav class=&#8221;navbar&#8221;&gt; &lt;div class=&#8221;container&#8221;&gt; &lt;a href=&#8221;https:\/\/www.malasngoding.com&#8221; class=&#8221;logo&#8221;&gt;Malas Ngoding&lt;\/a&gt; &lt;ul class=&#8221;menu&#8221;&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Home&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Tentang&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Produk&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Layanan&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Kontak Kami&lt;\/a&gt;&lt;\/li&gt; &lt;\/ul&gt; &lt;div class=&#8221;tombol&#8221;&gt; &amp;#9776; &lt;\/div&gt; &lt;\/div&gt;&lt;\/nav&gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Untuk membuat navbar atau menu navigasi, kita bisa membuatnya dengan&nbsp;<a href=\"https:\/\/www.malasngoding.com\/belajar-html-membuat-list-pada-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">elemen list HTML<\/a>.<\/p>\n\n\n\n<p>Pada menu navbar ini kita membuat beberapa komponen, diantaranya :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Logo \/ Nama Website<\/li>\n\n\n\n<li><a href=\"https:\/\/www.malasngoding.com\/belajar-html-membuat-hyperlink-pada-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">Link<\/a>\u00a0menu\u00a0<mark>home<\/mark>,\u00a0<mark>tentang<\/mark>,\u00a0<mark>produk, layanan<\/mark>\u00a0dan\u00a0<mark>kontak kami<\/mark><\/li>\n\n\n\n<li>Tombol \u2630 untuk menu navigasi dengan salah satu\u00a0<em>symbol character<\/em>\u00a0HTML, yaitu\u00a0<code>&amp;#9776;<\/code><\/li>\n<\/ul>\n\n\n\n<p>Kita sudah pernah membahas tentang karakter simbol pada HTML di tutorial sebelumnya, silahkan baca kembali tutorial&nbsp;<a href=\"https:\/\/www.malasngoding.com\/belajar-html-membuat-symbol-pada-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">membuat simbol pada HTML<\/a>.<\/p>\n\n\n\n<p>Oke, jalankan file index.html, maka hasilnya akan tampil element list HTML seperti berikut.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2024\/02\/Membuat-menu-navbar-dengan-HTML-1024x471.png\" alt=\"Membuat menu navbar dengan HTML\" class=\"wp-image-5682\"\/><figcaption class=\"wp-element-caption\">Membuat menu navbar dengan HTML<\/figcaption><\/figure>\n\n\n\n<p>Tampilan masih polos karena kita belum mendesainnya.<\/p>\n\n\n\n<p>Proses desain akan kita lakukan dengan cara memberikan sentuhan CSS pada file&nbsp;<strong>style.css<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Desain Tampilan Navbar Dengan CSS<\/h3>\n\n\n\n<p>Silahkan teman-teman buka file&nbsp;<code>style.css<\/code>&nbsp;dan tulis atau copas script berikut.<\/p>\n\n\n\n<p><strong>style.css<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<\/td><td>body { margin: 0; font-family: Arial, sans-serif; background: #d6eff4;}.navbar{ background: #212121; margin: 0; padding: 20px 30px;}.logo{ font-size: 14pt; font-weight: bold; text-decoration: none; color: white;}.container{ display: flex; justify-content: space-between; align-items: center;}.tombol{ display: none; color: white; font-size: 14pt; }.tombol:hover{ cursor: pointer;}.menu{ margin: 0; display: flex; list-style: none; padding: 0; }.menu li{ padding-left: 0; margin-right: 10px;}.menu li a{ padding:10px; color: white; text-decoration: none; display: inline-block;}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Perhatikan pada script CSS di atas.<\/p>\n\n\n\n<p>Script CSS yang kita gunakan di atas pasti tidak asing lagi bagi teman-teman. karena sudah pernah dibahas di malasngoding.com.<\/p>\n\n\n\n<p>Baca juga :&nbsp;<a href=\"https:\/\/www.malasngoding.com\/category\/css\" target=\"_blank\" rel=\"noreferrer noopener\">Tutorial CSS dasar untuk pemula<\/a><\/p>\n\n\n\n<p>Kamu bisa fokus pada class&nbsp;<code>.menu<\/code>. di sini kita menggunakan&nbsp;<code>display: flex;<\/code>&nbsp;agar tampilan dari logo\/judul website, menu navigasi dan tombol responsive nya terletak sejajar bersampingan.<\/p>\n\n\n\n<p>Tapi secara default, tombol responsive (<code>.tombol<\/code>) kita sembunyikan dengan perintah&nbsp;<code>display: none;<\/code>.<\/p>\n\n\n\n<p>Karena kita akan menampilkan tombol responsive (<code>.tombol<\/code>) hanya saat website diakses dari ukuran layar yang kecil nantinya.<\/p>\n\n\n\n<p>Lihat hasil menu navbar kita.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2024\/02\/Desain-navbar-dengan-css-1024x544.png\" alt=\"Desain navbar dengan css\" class=\"wp-image-5684\"\/><figcaption class=\"wp-element-caption\">Desain navbar dengan css<\/figcaption><\/figure>\n\n\n\n<p>Sampai di sini, kita sudah berhasil membuat navbar, tapi belum responsive.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Simulasi Tampilan&nbsp;<em>Responsive<\/em>&nbsp;Website Di Perangkat Lain<\/h3>\n\n\n\n<p>Untuk melihat simulasi bagaimana tampilan website jika dijalankan dari perangkat lain, teman-teman bisa&nbsp;<strong>klik kanan<\/strong>&nbsp;pada halaman website, dan pilih \u201c<em><strong>inspect<\/strong><\/em>\u201c.<\/p>\n\n\n\n<p>Kemudian pilih \u201c<strong><em>Responsive Design Mode<\/em><\/strong>\u201d atau tampilan icon&nbsp;<strong><em>gadget<\/em>.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2024\/02\/tampilan-website-di-hp-1024x544.png\" alt=\"tampilan website di hp\" class=\"wp-image-5687\"\/><figcaption class=\"wp-element-caption\">tampilan website di hp<\/figcaption><\/figure>\n\n\n\n<p>Seperti yang bsia teman-teman lihat, navbar website kita belum&nbsp;<em>responsive<\/em>, masih berantakan jika dibuka melalui&nbsp;<em>handphone<\/em>\/<em>smartphone<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Membuat Navbar Responsive Dengan Media Query<\/h3>\n\n\n\n<p>Langkah selanjutnya kita akan masuk ke proses membuat menu navbar yang&nbsp;<em>responsive<\/em>.<\/p>\n\n\n\n<p>Sehingga saat dibuka dari perangkat&nbsp;<em>smartphone<\/em>&nbsp;atau tablet, tampilan navbar kita akan otomatis menyesuaikan desainnya.<\/p>\n\n\n\n<p>Untuk membuat halaman website yang responsive, kita akan sering menggunakan sebuah aturan pada CSS. yaitu&nbsp;<code>@media<\/code>.<\/p>\n\n\n\n<p><strong>Media query<\/strong>&nbsp;merupakan teknik CSS terbaru yang hadir pada&nbsp;<a href=\"https:\/\/www.malasngoding.com\/tutorial-css3-part-1-pengertian-dan-pengenalan-css3\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS3<\/a>.<\/p>\n\n\n\n<p><code>@media<\/code>&nbsp;adalah aturan dalam CSS yang digunakan untuk membuat gaya tertentu yang hanya berlaku saat diakses dari ukuran layar tertentu juga.<\/p>\n\n\n\n<p>Misal, kita bisa membuat script CSS tertentu yang hanya dijalankan saat halaman website diakses dari ukuran layar laptop, dan juga bisa mengatur suatu script CSS tersebut hanya dijalankan saat diakses dari ukuran layar lain seperti&nbsp;<em>smartphone<\/em>&nbsp;atau tablet.<\/p>\n\n\n\n<p>Misalnya lagi, kita mau jika warna&nbsp;<em>background<\/em>&nbsp;website berwarna merah saat diakses dari laptop, dan background nya berubah menjadi kuning jika diakses dari&nbsp;<em>smartphone<\/em>.<\/p>\n\n\n\n<p>Begitulah kira-kira kegunaan aturan&nbsp;<code>@media<\/code>&nbsp;di CSS ini.<\/p>\n\n\n\n<p>Jadi bisa mempermudah kita jika kita mau mengatur letak, warna, ukuran font dan desain lainnya saat diakses di berbagai resolusi layar dan perangkat.<\/p>\n\n\n\n<p>Tambahkan script CSS berikut ini pada file&nbsp;<code>style.css<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>123456789101112131415161718192021222324<\/td><td>@media screen and (max-width: 768px) { .menu { display: none; } .menu.aktif{ display:inline-block; position: absolute; top: 64px; background: #212121; padding: 10px 20px; right: 0; left: 0; } .menu.aktif li a{ padding: 10px; display: inline-block !important; } .tombol { display: block; }}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Kita lihat hasilnya.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2024\/02\/Membuat-menu-responsive-1024x655.png\" alt=\"Membuat menu responsive\" class=\"wp-image-5688\"\/><figcaption class=\"wp-element-caption\">Membuat menu responsive<\/figcaption><\/figure>\n\n\n\n<p>Tampilan navbar menjadi lebih rapi karena kita membuat penyesuaian CSS dengan script&nbsp;<code>@media screen and (max-width: 768px)<\/code>&nbsp;di atas.<\/p>\n\n\n\n<p>Perhatikan pada aturan&nbsp;<code>@media<\/code>&nbsp;tadi.<\/p>\n\n\n\n<p>Artinya jika halaman website diakses dari layar yang memiliki lebar maksimal&nbsp;<code>768px<\/code>, maka :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sembunyikan menu (<code>.menu<\/code>) dengan perintah CSS\u00a0<code>display: none;<\/code>.<\/li>\n\n\n\n<li>Tampilkan tombol navigasi navbar (<code>.tombol<\/code>) dengan perintah\u00a0<code>CSS display: block;<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>Maka jadilah tampilan seperti di atas. navbar menjadi lebih ringkas dan rapi.<\/p>\n\n\n\n<p>Coding CSS lainnya yang di atas akan kita bahas juga menurut alur panduan ini, agar lebih mudah dipahami.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Membuat Event Click Pada Menu Navigasi<\/h3>\n\n\n\n<p>Langkah selanjutnya, kita akan menampilkan menu saat tombol navigasi diklik.<\/p>\n\n\n\n<p>Agar tombol navigasi bisa menampilkan menu saat di klik, kita harus&nbsp;<a href=\"https:\/\/www.malasngoding.com\/belajar-javascript-part-7-mengenal-event-pada-javascript\/\" target=\"_blank\" rel=\"noreferrer noopener\">membuat event dengan javascript<\/a>.<\/p>\n\n\n\n<p>Kita akan membuat&nbsp;<code>event click()<\/code>&nbsp;pada tombol menu, script nya bisa kita tulis pada file&nbsp;<code>index.html<\/code>&nbsp;di atas tag&nbsp;<code>&lt;\/body&gt;<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>123456789101112<\/td><td>&lt;script type=&#8221;text\/javascript&#8221;&gt; \/\/ deklarasi tombol dan menu const tombol = document.querySelector(&#8216;.tombol&#8217;); const menu = document.querySelector(&#8216;.menu&#8217;); \/\/ membuat event click \/\/ pada saat tombol di click, tambahkan class aktif pada class menu \/\/ saat diklik lagi, maka class aktif dihilangkan dari class menu (toggle) tombol.addEventListener(&#8216;click&#8217;, () =&gt; { menu.classList.toggle(&#8216;aktif&#8217;); });&lt;\/script&gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Perhatikan pada script JavaScript di atas, pertama kita deklarasikan class&nbsp;<code>.tombol<\/code>&nbsp;dan&nbsp;<code>.menu<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>12<\/td><td>const tombol = document.querySelector(&#8216;.tombol&#8217;);const menu = document.querySelector(&#8216;.menu&#8217;);<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Selanjutnya kita buat event&nbsp;<code>click()<\/code>&nbsp;pada class&nbsp;<code>.tombol<\/code>, jika tombol diklik, maka beri&nbsp;<code>toggle()<\/code>&nbsp;class \u201caktif\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>123<\/td><td>tombol.addEventListener(&#8216;click&#8217;, () =&gt; { menu.classList.toggle(&#8216;aktif&#8217;);});<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Maka secara otomatis akan menambahkan class&nbsp;<code>.aktif<\/code>&nbsp;pada class&nbsp;<code>.menu<\/code>. dan saat diklik lagi, secara otomatis class&nbsp;<code>.aktif<\/code>&nbsp;akan dihapus lagi dari class&nbsp;<code>.menu<\/code>.<\/p>\n\n\n\n<p>Untuk apa sih class&nbsp;<code>.aktif<\/code>&nbsp;ini?<\/p>\n\n\n\n<p>Jika teman-teman perhatikan lagi pada script CSS di atas, kita sudah membuat aturan CSS pada class&nbsp;<code>.aktif<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>1234567891011121314<\/td><td>.menu.aktif{ display:inline-block; position: absolute; top: 64px; background: #212121; padding: 10px 20px; right: 0; left: 0;}.menu.aktif li a{ padding: 10px; display: inline-block !important;}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Pada class&nbsp;<code>.aktif<\/code>&nbsp;ini kita beri perintah&nbsp;<code>display:inline-block;<\/code>, dengan tujuan menampilkan menu dalam bentuk panjang ke samping.<\/p>\n\n\n\n<p>Sehingga tampilan menu yang awal nya berbaris ke samping, menjadi ke bawah karena memiliki lebar maksimal.<\/p>\n\n\n\n<p>Perhatikan video berikut untuk melihat hasil dan cara kerjanya.<video controls=\"\" src=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2024\/02\/Membuat-navbar-responsive-dengan-html-dan-css.webm\"><\/video>Membuat navbar responsive dengan html dan css<\/p>\n\n\n\n<p>Sip mantap. menu navbar responsive kita sudah jadi.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Panduan Ukuran Layar Perangkat<\/h2>\n\n\n\n<p>Pada panduan membuat menu navbar responsive ini kita menggunakan pengaturan ukuran&nbsp;<code>max-width: 768px<\/code>. yakni ukuran untuk layar dari tablet sampai&nbsp;<em>smartphone<\/em>.<\/p>\n\n\n\n<p>Berikut informasi tambahan tentang ukuran responsive perangkat menggunakan media query untuk berbagai ukuran lainnya.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>Media query<\/td><td>Keterangan<\/td><\/tr><tr><td><code>@media only screen and (max-width: 600px) { \u2026 }<\/code><\/td><td>Ukuran layar ekstra kecil (hp \/ smartphone,&nbsp;<code>600px<\/code>&nbsp;ke bawah)<\/td><\/tr><tr><td><code>@media only screen and (min-width: 600px) { \u2026 }<\/code><\/td><td>Ukuran layar kecil (portrait tablet,&nbsp;<code>600px<\/code>&nbsp;ke atas)<\/td><\/tr><tr><td><code>@media only screen and (min-width: 768px) { \u2026 }<\/code><\/td><td>Ukuran layar sedang (landscape tablet,&nbsp;<code>768px<\/code>&nbsp;ke atas)<\/td><\/tr><tr><td><code>@media only screen and (min-width: 992px) { \u2026 }<\/code><\/td><td>Ukuran layar besar (laptop,&nbsp;<code>992px<\/code>&nbsp;ke atas)<\/td><\/tr><tr><td><code>@media only screen and (min-width: 1200px) { \u2026 }<\/code><\/td><td>Ukuran layar ekstra besar (laptop atau monitor besar,&nbsp;<code>1200px&nbsp;<\/code>ke atas)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Panduan ukuran perangkat dengan media query<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Source Code Contoh Navbar Responsive<\/h2>\n\n\n\n<p>Setelah mengikuti materi&nbsp;<strong>membuat navbar responsive dengan HTML dan CSS<\/strong>&nbsp;ini, berikut hasil jadi contoh source code navbar&nbsp;<em>responsive<\/em>-nya.<\/p>\n\n\n\n<p><strong>index.html<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<\/td><td>&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset=&#8221;UTF-8&#8243;&gt; &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt; &lt;title&gt;Membuat Navbar Responsive Dengan HTML dan CSS&lt;\/title&gt; &lt;link rel=&#8221;stylesheet&#8221; href=&#8221;style.css&#8221;&gt;&lt;\/head&gt;&lt;body&gt;&lt;nav class=&#8221;navbar&#8221;&gt; &lt;div class=&#8221;container&#8221;&gt; &lt;a href=&#8221;https:\/\/www.malasngoding.com&#8221; class=&#8221;logo&#8221;&gt;Malas Ngoding&lt;\/a&gt; &lt;ul class=&#8221;menu&#8221;&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Home&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Tentang&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Produk&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Layanan&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Kontak Kami&lt;\/a&gt;&lt;\/li&gt; &lt;\/ul&gt; &lt;div class=&#8221;tombol&#8221;&gt; &amp;#9776; &lt;\/div&gt; &lt;\/div&gt;&lt;\/nav&gt; &lt;div&gt; &lt;center&gt; &lt;h2&gt;Panduan Membuat Navbar Responsive dari &lt;a href=&#8221;https:\/\/www.malasngoding.com\/membuat-navbar-responsive-html-css&#8221;&gt;www.malasngoding.com&lt;\/a&gt;&lt;\/h2&gt; &lt;\/center&gt; &lt;\/div&gt; &lt;script type=&#8221;text\/javascript&#8221;&gt; \/\/ deklarasi tombol dan menu const tombol = document.querySelector(&#8216;.tombol&#8217;); const menu = document.querySelector(&#8216;.menu&#8217;); \/\/ membuat event click \/\/ pada saat tombol di click, tambahkan class aktif pada class menu \/\/ saat diklik lagi, maka class aktif dihilangkan dari class menu (toggle) tombol.addEventListener(&#8216;click&#8217;, () =&gt; { menu.classList.toggle(&#8216;aktif&#8217;); }); &lt;\/script&gt;&lt;\/body&gt;&lt;\/html&gt;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>style.css<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879<\/td><td>body { margin: 0; font-family: Arial, sans-serif; background: #d6eff4;}.navbar{ background: #212121; margin: 0; padding: 20px 30px;}.logo{ font-size: 14pt; font-weight: bold; text-decoration: none; color: white;}.container{ display: flex; justify-content: space-between; align-items: center;}.tombol{ display: none; color: white; font-size: 14pt; }.tombol:hover{ cursor: pointer;}.menu{ margin: 0; display: flex; list-style: none; padding: 0; }.menu li{ padding-left: 0; margin-right: 10px;}.menu li a{ padding:10px; color: white; text-decoration: none; display: inline-block;}@media screen and (max-width: 768px) { .menu { display: none; } .menu.aktif{ display:inline-block; position: absolute; top: 64px; background: #212121; padding: 10px 20px; right: 0; left: 0; } .menu.aktif li a{ padding: 10px; display: inline-block !important; } .tombol { display: block; }}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Kesimpulan<\/h2>\n\n\n\n<p>Berikut kami rangkum inti dari proses pembuatan dan cara kerja navbar&nbsp;<em>responsive<\/em>&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Media query yang menjalankan script CSS untuk menyembunyikan\u00a0<code>.menu<\/code>\u00a0saat website diakses dari perangkat smartphone.<\/li>\n\n\n\n<li>Buat event\u00a0<code>click()<\/code>\u00a0pada .tombol yang memberi\u00a0<code>toggle()<\/code>\u00a0class \u2018<code>.aktif<\/code>\u2018 pada menu.<\/li>\n\n\n\n<li>Buat script CSS untuk menampilkan menu pada class\u00a0<code>.aktif<\/code>\u00a0dengan script\u00a0<code>display:inline-block;<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>Sesederhana itu, tapi prosesnya saja yang lumayan panjang karena menggunakan penalaran logika.<\/p>\n\n\n\n<p>Terima kasih sudah mengikuti panduan membuat navbar responsive di malasngoding.com.<\/p>\n\n\n\n<p>Semoga bisa bermanfaat untuk teman-teman semua.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Di tutorial ini teman-teman akan belajar membuat navbar&nbsp;responsive&nbsp;dengan HTML dan CSS. Dengan penggunaan&nbsp;website&nbsp;yang berkembang pesat saat ini, kita wajib memastikan&nbsp;website&nbsp;yang kita buat memiliki desain web yang menarik. Tapi bukan hanya desain tampilannya saja yang harus kita perhatikan, kita juga harus memastikan bahwa&nbsp;website&nbsp;kita dapat diakses dari berbagai perangkat dengan baik. Salah satu komponen yang terpenting adalah [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-49815","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/muxidn.my.id\/index.php\/wp-json\/wp\/v2\/posts\/49815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/muxidn.my.id\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/muxidn.my.id\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/muxidn.my.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/muxidn.my.id\/index.php\/wp-json\/wp\/v2\/comments?post=49815"}],"version-history":[{"count":1,"href":"https:\/\/muxidn.my.id\/index.php\/wp-json\/wp\/v2\/posts\/49815\/revisions"}],"predecessor-version":[{"id":49816,"href":"https:\/\/muxidn.my.id\/index.php\/wp-json\/wp\/v2\/posts\/49815\/revisions\/49816"}],"wp:attachment":[{"href":"https:\/\/muxidn.my.id\/index.php\/wp-json\/wp\/v2\/media?parent=49815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/muxidn.my.id\/index.php\/wp-json\/wp\/v2\/categories?post=49815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/muxidn.my.id\/index.php\/wp-json\/wp\/v2\/tags?post=49815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}