卡片 · card-menus 侧栏菜单
卡片家族
索引
base
cpanel
crumb
full
page
border
radius
api
artic
namecode
imgs
tips
total
default
box
checkbox
form
form-item
form-inpselect
table
pager
multipled
menubar
mode
menus
tabmenu
code
json
template
tab
slide
paginate
tree
toggle
marquee
timeaxis
waterfall
popup
nav
chatbox
drag
choose
progress
roll
侧栏菜单卡
card-menus：带折叠过渡的侧栏骨架（width:14rem、--sidebar-bg 底、右边框），内置手风琴子菜单（is_menu / is_open 展开收起、a.active 高亮）；变体：menus-h 横向、menus-mobile 移动端、menus-weixin 微信导航、isclose 折叠态。
结构示例
<div class="card card-menus">
<ul class="menus-items">
<li class="is_menu is_open">
<a><i class="icon"></i><span>仪表盘</span></a>
<ul>
<li><a class="active"><span>卡片总览</span></a></li>
</ul>
</li>
</ul>
</div>
变体速查
| 变体 | 用途 / 特征 |
|---|---|
| menus-h | 横向导航：ul 转 flex，子菜单绝对定位下拉 |
| menus-mobile | 移动侧栏：清底色，项间分隔线，字体主色 |
| menus-weixin | 微信式导航：底栏固定 bottom:3rem，箭头翻转符 |
| isclose | 折叠态：宽收 3.5rem，仅剩图标（span 隐藏） |
| card-menus-light | 旧版浅色渐变侧栏（主色渐变底） |
| card-menus-control | 右上折叠切换钮（绝对定位圆角三角） |
注意项
a：
is_menu 的箭头/子菜单开关由运动 JS 切 is_open；纯静态页面写死展开态即可。
b： 基类自带 height:100%，独立演示必须显式给容器定高；overflow-x:hidden 防止折叠时横向溢出。
c： 三态配色走 --sidebar-* 变量（bg / text / item-hover / active / border），换肤只改变量。
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI ·
返回首页