無論喺 software, web, kiosk 都需要 menu 整理多個選項方便比人柬，最簡單可以分為打橫同打直；造得 UI 設計應該比一舨人考慮嘅野多得多，唔限於觀感。打橫嘅 menu 同 tab 一樣，最大限制在於 minium width，所以唔會放倒好多個，適合簡單嘅web，好處係一眼就睇倒 web 嘅最頂部份包括整條 menu。最傳統左邊 treeview sidemenu 加右邊 content，好似 pdf reader 或者 file explorer 嘅 2column layout 係我覺得最通用 UX 最好嘅表達方式，sidemenu 放左邊嘅好處在於對応由左上開始嘅閱讀習慣，最頂放 logo 同時係 home link，有睇書 content index 嘅感覺；wordpress 嘅 web 有唔小用右邊 sidemenu，最主要係因為 responsive layout 就手机，打橫唔夠位就簡化到一粒制彈 menu，sidemenu 其他野clip 到底部，所以放啲比 content 更次要嘅野，同時右 menu 會接近啲 scrollbar會方便小小。touch screen 出現之後，UI 嘅諗法應該要從新檢討，同時方便 cursor 同 touch 嘅 UX；最大分別在於 mouse hover 要改晒造 click，menu 嘅特質更加似 file system，folder 只係 catagory 嘅特質包住一堆 link。
寫 code 同造 design 嘅人分別對 editor 同 UI 多，明顯係両種唔同特質嘅人；於是，有 code 先造倒 tree view 效果嘅 menu 並唔常見。我心目中最理想嘅分工，喺造 UI 設計嘅人未必需要識由零開始寫 code，但最小要識揾 code 同 library 番黎修改，達到最好嘅效果為止。如果要造 tree view menu 效果，coder 傾向用有 cdn 又常用功能強大嘅 library，例如 jstree 或者 fancytree 我都試過，但因為無 auto collapse 效果，最後我喺 jqueryscript.net 先揾倒一個簡單嘅 ACL tree view，可以改動到我心目中嘅效果。
<!DOCTYPE html>
<!-- https://github.com/imdrashedul/acl-tree-view -->
<!-- https://www.jqueryscript.net/other/accordion-tree-view-acl.html -->
<html lang="en">
<head>
<title>jQuery ACL Tree View</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Marcellus+SC" type="text/css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="acl-tree-view.js"></script>
</head>
<body>
<script type="text/javascript">
fetch('menuitem.json')
.then(response => response.json())
.then(data => {
const menuItem = data;
jQuery(function ($) {
const treeView = $('#sidemenu').aclTreeView({
animationSpeed: 500,
icon: "fa-solid fa-caret-right"
}, menuItem);
});
})
.catch(error => console.error('Error fetching menu items:', error));
</script>
<div id="acl-container">
<h1>ACL Tree View</h1>
<div id="sidemenu"></div>
</div>
</body>
</html>tree view menu 有可能會叫 multi level accordion，而打直嘅 accordion 可以完美取代打橫嘅 tab，但両者同黎放 content 嘅話，變相只係 hide 左其他大部份嘅 content，唔會 load 快啲，倒不如一篇長好似 pdf reader 咁 show 晒出黎。我想造到嘅效果係用 accordion 用黎放 link，好似 file explorer 由最宏觀一眼睇晒方便揾，到一層層更深入，所以 auto collapse 係必需嘅效果。加上 Font Awesome 嘅 icon 更加可以強化方便揾變得更易用，但 folder 或者 catagory 都適合用 icon 去表達時，最左邊嘅三角型係重點，表示裏面仲有堆野包住，而且要好似寫 code嘅 loop 咁用 indent 對齊嘅方式表達 level，如果 level 有幾層嘅話，可以加一條 breadcrumb 相當於 file path 嘅效果。
html, body {
height: 100%;
width: 100%;
margin: 0;
}
a, a:hover {
text-decoration: none;
}
#acl-container {
font-family: 'marcellus sc';
font-size: 16px;
max-width: 320px;
height: 100%;
width: 100%;
padding: 0;
margin: 0 auto;
background-color: #000;
color: white;
}
#acl-container h1 {
display: flex;
height: 60px;
justify-content: center;
align-items: center;
margin: 0;
}
ul.acl-tree-view {
padding: 0;
display: block;
overflow: auto;
}
ul.acl-tree-view ul {
padding: 0;
border: 2px #666;
border-style: none none dotted dotted;
margin-left: 1.5em;
display: block;
overflow: auto;
margin-top: 0;
padding-bottom: 0.5em;
}
ul.acl-tree-view li {
list-style-type: none;
display: block;
padding: 0.25em 0;
}
ul.acl-tree-view li a {
display: block;
color: #CCC;
transition: all 50ms ease-out;
font-size: 1.5em;
margin-left: 19px;
}
ul.acl-tree-view li a.acl-tree-view-toggle>span>i:first-child {
margin-left: 6px;
}
ul.acl-tree-view li a:not(.acl-tree-view-toggle)>i {
margin-left: 1em;
}
ul.acl-tree-view li a.acl-tree-view-toggle.acl-tree-view-active>i:first-child {
transform: rotate(90deg);
}
ul.acl-tree-view li a:active {
color: #FFF;
text-shadow: 0px 0px 10px #fff;
background-color: rgb(0, 127, 127);
box-shadow: inset 0 0 20px 5px #000;
}因為 UI 啲字或者 icon 一定要用 font 唔可以用 graphic，file size 會細啲同 search engine 可以理解，所以造 UI 設計識基本嘅 HTML 同 CSS 係必需，擺位受制於 HTML，而效果受制於 CSS；但現時嘅 broswer 內置嘅 developer tool 已經好方便可以作為 editor 即時反映調較效果。例如顔色或者透明度都可以用 color picker 柬，content 適合白底深色字容易睇，可以配合白底嘅 photo；而 menu 要凸顯有制可以黚同 content 唔同嘅話，適合反白用深色底白字，而且可以造倒 touch 或者 click 之後發光嘅 feedback效果。
因為 web 每頁嘅 menu 要保持一樣，而且唔可以用 frame，其中一個方法係用 dreamweaver 嘅 template 功能，每加一頁或者改動個 menu 就全部 page update 過晒。想造到一般人都可以 maintain 倒又唔用 CMS 嘅話，個 menu 上面啲 item 同 link 最好抽出黎寫成 JSON，方便用JSONedit 之類有 UI 嘅工具整理。就算無 web server，用 javascript 都可以靠fetch() 讀 file，甚至 HTML 嘅 content 都可以一頁頁用 fetch() 加 DOMParser() 取代𠝹 frame 嘅效果，而且速度反応一定係最快，衣啲大路嘅方法用 VScode 裏面 AI 功能寫就可以，係避免重覆性方便管理同修改嘅最簡單方法；但同樣缺乏 bookmark 某一頁或者 back forward 嘅 history 功能，始終唔及用 web server 同 database 嘅 CMS 咁理想。
Reference: