Skip to content

Instantly share code, notes, and snippets.

View rafonzoo's full-sized avatar

rafonzoo

2 followers · 4 following
View GitHub Profile
@rafonzoo
rafonzoo / navigasi-bertingkat-markup.html
Last active September 4, 2018 18:42
Navigasi bertingkat
<!-- 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>
@rafonzoo
rafonzoo / navigasi-markup.html
Last active September 4, 2018 18:33
Navigasi
<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>
@rafonzoo
rafonzoo / navigasi.scss
Last active September 6, 2018 15:40
Navigasi bertingkat
/*!
** 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');
@rafonzoo
rafonzoo / navigasi-compiled.css
Last active September 7, 2018 07:20
Navigasi bertingkat - Compiled
/*!
** 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;
@rafonzoo
rafonzoo / navigasi.js
Last active September 6, 2018 15:37
Navigasi bertingkat
( 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'),
@rafonzoo
rafonzoo / navigasi.min.css
Created September 7, 2018 15:31
@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
@rafonzoo
rafonzoo / navigasi.min.js
Created September 7, 2018 15:47
Navigasi bertingkat
/*!
** 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
rafonzoo / navigasi.html
Last active September 7, 2018 15:56
Navigasi Bertingkat
<!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">