Postingan lainnya

Bagaimana membuat toggle menu ??

Gan saya coba buat toggle menu dengan event slideToggle() jquery. Nah itu udah bisa tapi pas resize browser ke ukuran desktop, top barnya juga ikut kena effect nya. Biar cuma di ukuran smartphone gimana ya ?

jquery

@fikriwado

131 Kontribusi 41 Poin

Diperbarui 6 tahun yang lalu

7 Jawaban:

Pake media query di CSS. Contoh:

/* Asumsi: Minimum Desktop 1024px */

.top-bar {
    /* Properti Top Bar, misalnya background, width, etc. */
}

/* Media Query apabila browser di resize ke ukuran desktop */
@media (min-width: 1024px) {
    .top-bar {
        display: none;
    }
}

Semoga terjawab..

@nurimansyah

98 Kontribusi 87 Poin

Dipost 6 tahun yang lalu

Udah gan, tapi ketika di ukuran desktopnya, ikut ke toggle jadi menunya ga ada kaya ke atas gitu

@fikriwado

131 Kontribusi 41 Poin

Dipost 6 tahun yang lalu

Jawaban Terpilih

Oh kalo itu, ane biasanya cukup pake CSS aja sih:

HTML Code:

<nav>
  <div class="logo">LOGO</div>

  <div class="toggle"><span class="fa fa-bars"></span></div>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Article</a></li>
    <li><a href="#">About Me</a></li>
  </ul>
</nav>

CSS Code

@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
  font-family: "Roboto";
  margin: auto;
}

a {
  text-decoration: none;
  color: #F1A49F;
}

.logo {
  text-align: center;
  line-height: 30px;
  padding-left: 10px;
  padding-right: 10px;
}
.toggle {
  position: absolute;
  top: 0;
  right: 10px;
  color: white;
  line-height: 30px;
  cursor: pointer;
}

ul {
  list-style: none inside;
  padding: 0;
  margin: auto;
}
nav {
 background-color: #706F77;
 position: fixed;
 width: 100%;
 height: 30px;
}
nav > .logo {
  color: white;
}
nav > .menu {
  position: fixed;
  top: 30px;
  width: 100%;
  background-color: white;
  display: none;
}
nav > .menu > li {
  padding: 5px;
}

/* Ane ambil 321px untuk ukuran selain mobile phone */
@media (min-width: 321px) {
  .toggle {
    display: none;
  }
  .logo {
    text-align: initial;
    display: inline-block;
    vertical-align: top;
  }

  nav > .menu {
    position: static;
    display: inline-block !important;
    background-color: transparent;
    width: auto;
  }

  nav > .menu > li {
    float: left;
  }
  nav > .menu::after {
    clear: both;
    content: '';
    display: block;
  }
}

JS Code

(function($) {
	'use strict';

  // On Ready
  $(document).ready(function() {
		// Inisialisasi DOM
    var $nav = $('nav');
    var $menu = $('.menu');
    var $toggle = $('.toggle');

    // Slide Toggle untuk menu
    $toggle.on('click', function() {
    	// Ganti icon bars
      $(this).children('span')
      	.toggleClass('fa-bars')
        .toggleClass('fa-times');

      // Slide Toggle menu
    	$menu.slideToggle('fast');
    });
  });
})(jQuery);

NB: Ane pake library font-awesome dan jquery.

Demo: https://jsfiddle.net/nurimansyah/ah2s6zsr/ Untuk ngetest-nya, kecilin aja bagian previewnya. Ane buat media query di 321px.

Preview:

Semoga membantu...

@nurimansyah

98 Kontribusi 87 Poin

Dipost 6 tahun yang lalu

Wah keliatannya bagus nih, biar saya coba dulu gan.

@fikriwado

131 Kontribusi 41 Poin

Dipost 6 tahun yang lalu

sip gan, senang bisa membantu

@nurimansyah

98 Kontribusi 87 Poin

Dipost 6 tahun yang lalu

ko saya coba ga ada perubahan ya ??

@fikriwado

131 Kontribusi 41 Poin

Dipost 6 tahun yang lalu

@Moch Fikri ada contoh script-nya ga? Boleh liat?

@nurimansyah

98 Kontribusi 87 Poin

Dipost 6 tahun yang lalu