Skip to content

Instantly share code, notes, and snippets.

View semiarthanoian's full-sized avatar

Semi Art semiarthanoian

1 follower · 57 following
  • Hanoi, Vietnam
View GitHub Profile
@semiarthanoian
semiarthanoian / sidenav.js
Created April 27, 2022 11:33
/* Utility Functions */
const queryAllLinks = function () {
var allSidenavLinks = document.querySelectorAll('.sidenav-link');
var sidenavLinkArray = Array.from(allSidenavLinks);
return sidenavLinkArray;
};
const checkIfLinkMatchesKeyword = function (
theLink = new Element(),
@semiarthanoian
semiarthanoian / sidenav.css
Created April 27, 2022 11:32
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Noto+Serif:wght@400;700&display=swap'); */
/* Reset CSS */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
@semiarthanoian
semiarthanoian / sidenav.html
Created April 27, 2022 11:31
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- --- -->
<title>Sidebar w/ Filter</title>
<!-- --- -->
<link rel="stylesheet" href="sidenav.css">
@semiarthanoian
semiarthanoian / sidenav.html
Created April 27, 2022 11:28
<!-- Danh mục HTML -->
<a class="sidenav-link" href="#" data-tag="html,begin">Tạo Một Trang Web</a>
<a class="sidenav-link" href="#" data-tag="html,image,link">Chèn Ảnh & Liên Kết</a>
<a class="sidenav-link" href="#" data-tag="html,embed,content">Các Nội Dung Nhúng</a>
<a class="sidenav-link" href="#" data-tag="html,container">Các Thẻ Container</a>
<a class="sidenav-link" href="#" data-tag="html,list,table">Danh Sách & Bảng Biểu</a>
<a class="sidenav-link" href="#" data-tag="html,text,format">Các Thẻ Định Dạng Chữ</a>
<a class="sidenav-link" href="#" data-tag="html,input,form">Nhập Liệu & Biểu Mẫu</a>
<a class="sidenav-link" href="#" data-tag="html,input,other">Các Thành Phần Nhập Liệu</a>
@semiarthanoian
semiarthanoian / dropdown.css
Created April 27, 2022 11:23
/* Reset CSS */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Typography */
@semiarthanoian
semiarthanoian / dropdown.js
Created April 27, 2022 11:22
/* Utility Functions */
const elementHasClass = function(element, theClass) {
return element.className.includes(theClass);
};
const elementAddsClass = function (element, theClass) {
var classArray = element.className.split(' ');
var newClassArray = classArray.concat(theClass);
@semiarthanoian
semiarthanoian / dropdown.css
Created April 27, 2022 04:14
.dropdown {
font-family: Arial, sans-serif;
font-size: 16px;
display: inline-block;
position: relative;
}
.dropdown-btn {
font-size: 14px;
@semiarthanoian
semiarthanoian / dropdown.html
Created April 27, 2022 04:13
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>A Normal Dropdown</title>
@semiarthanoian
semiarthanoian / dropdown.js
Created April 27, 2022 03:51
var toggleTheList = function(event) {
var theBtn = event.target;
var theList = theBtn.nextElementSibling;
var theListIsHidden = theList.className.includes('hidden');
if (theListIsHidden)
theList.className = 'dropdown-list shown';
else
theList.className = 'dropdown-list hidden';
};
@semiarthanoian
semiarthanoian / dropdown.css
Created April 27, 2022 03:50
.dropdown {
font-family: Arial, sans-serif;
font-size: 16px;
display: inline-block;
position: relative;
}
.dropdown-btn {
font-size: 14px;