Instantly share code, notes, and snippets.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> | |
</head> | |
<link rel="stylesheet" href="https://cdn.rawgit.com/rafonzoo/750db23934120abd5c34c9cc902a8258/raw/589bd3eaac85abc11124ec838e10404e005f3a06/navigasi.min.css"> | |
<body> | |
<nav id="navigasi" class="navigasi" role="navigation"> | |
<button class="tombol-hamburger" aria-expanded="false"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
** Navigation Menu by @rafonzoo | |
** See details https://blog.helloraf.com/?p=1263&preview=true | |
** Working demo https://htmlpreview.github.io/?https://cdn.rawgit.com/rafonzoo/navigation/master/assets/navigation.html | |
** jQuery required at least ver: 1.- or higher **/ | |
(function($){var button=$('.tombol-hamburger'),ariaNav=$('.navigasi-utama'),unitsNav=$('.punya-turunan a'),clickSet=$('.punya-turunan'),clickChld=$('.navigasi-turunan');function clickAct(){clickSet.attr('aria-expanded','false');unitsNav.on('click',function(e){$(this).next('ul').toggleClass('show').slideToggle('fast');$(this).parent().attr('aria-expanded',$(this).next().hasClass('show'));if($(this).next().hasClass('show')){$(this).next().attr('aria-hidden','false')}else{$(this).next().attr('aria-hidden','true')} | |
if($('.unit-navigasi').hasClass('punya-turunan')){$('.punya-turunan').children('a').addClass('locked')} | |
if($(this).hasClass('locked')){e.preventDefault()}});button.next().children('ul').attr('aria-hidden','true');button.on('click',funct |
rafonzoo
/ navigasi.min.css
Created
September 7, 2018 15:31
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "UTF-8";/*! | |
** Navigation Menu — Compiled | |
** Navigation color theme: ID Flag | |
** See details https://blog.helloraf.com/?p=1263&preview=true | |
** Working demo https://htmlpreview.github.io/?https://cdn.rawgit.com/rafonzoo/navigation/master/assets/navigation.html | |
** By @rafonzoo **/@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*,body{margin:0;padding:0;font-size:16px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";-webkit-box-sizing:border-box;box-sizing:border-box}.navigasi .pembungkus-navigasi{display:block;width:100%;max-width:100%}.navigasi .pembungkus-navigasi .navigasi-utama{list-style:none;display:block;position:relative;text-align:left}.navigasi .pembungkus-navigasi .navigasi-utama:after,.navigasi .pembungkus-navigasi .navigasi-utama:before{content:"";display:table;clear:both}.navigasi .pembungkus-navigasi .navigasi-utama .unit-navigasi{text-decoration:none;display:inline-block;font-f |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
( function( $ ) | |
/*! | |
** Navigation Menu by @rafonzoo | |
** See details https://blog.helloraf.com/?p=1263&preview=true | |
** Working demo https://codepen.io/rafonzoo/pen/KxvbwX?editors=0110 | |
** jQuery required at least ver: 1.- or higher **/ | |
{ | |
// Set up variables, includes all | |
var button = $('.tombol-hamburger'), |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
** Navigation Menu — Compiled | |
** Navigation color theme: Indonesia Flag | |
** See details https://blog.helloraf.com/?p=1263&preview=true | |
** Working demo https://codepen.io/rafonzoo/pen/KxvbwX?editors=0110 | |
** By @rafonzoo **/ | |
*, html, body { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
** Navigation Menu SCSS | |
** Navigation color theme: Indonesia Flag | |
** See details https://blog.helloraf.com/?p=1263&preview=true | |
** Working demo https://codepen.io/rafonzoo/pen/KxvbwX?editors=0110 | |
** By @rafonzoo **/ | |
/* Set up variables */ | |
@import url('https://fonts.googleapis.com/css?family=Noto+Sans'); | |
@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav id="navigasi" class="navigasi" role="navigation"> | |
<button class="tombol-hamburger" aria-expanded="false"> | |
<span class="hamburger garis-atas"></span> | |
<span class="hamburger garis-tengah"></span> | |
<span class="hamburger garis-bawah"></span> | |
</button> | |
<!-- Navigasi utama --> | |
</nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Ganti comment navigasi utama diatas dengan dengan kode berikut --> | |
<div class="pembungkus-navigasi" role="container"> | |
<ul class="navigasi-utama" aria-expanded="false"> | |
<li class="unit-navigasi"><a href="#url">Menu 1</a></li> | |
<li class="unit-navigasi"><a href="#url">Menu 2</a></li> | |
<li class="unit-navigasi"><a href="#url">Menu 3</a></li> | |
<li class="unit-navigasi punya-turunan"> | |
<a href="#url">Menu 4</a> | |
<ul class="navigasi-turunan"> | |
<li class="unit-navigasi"><a href="#url">SubMenu 1</a></li> |