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 ?
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..
Udah gan, tapi ketika di ukuran desktopnya, ikut ke toggle jadi menunya ga ada kaya ke atas gitu
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...
Wah keliatannya bagus nih, biar saya coba dulu gan.
@Moch Fikri ada contoh script-nya ga? Boleh liat?