下拉菜单改成极简小浮窗(参考家书 FamilyBook 的 popup 做法)
用户第三次指出这个按钮不对,原话:
「你不用做那么复杂,就是参考一下 FamilyBook 里边那个设置按钮,
非常简单的,点了之后就拉下来一个很窄的一个框,
把所有的内容都铺在上面就可以了」
去看了 FamilyBook 的实现:顶栏那颗按钮是 bindSheet + SheetSize.FIT_CONTENT,
即「内容多高就多高」的小浮层,不是整幅面板。
改法:
- 面板从「left:0 right:0 铺满宽度 + 遮罩 + 锁滚动」
改成「贴按钮右下、min-width 172px、内容撑高、圆角 12px 小浮窗」
- 删掉 sw-mask 遮罩、删掉 body overflow 锁定
- 面板移进 .topbar .wrap(flex 内),以它为定位参照,右对齐按钮
- 删掉菜单里「选择软件」标题(按钮本身已经说明用途)
- 条目字号降到 14px、图标 18px、内边距收紧,贴合窄框
- 「当前」标记从胶囊缩成 6px 小圆点,窄框里不占地方
- 按钮简化:去掉边框与三横线变×的动效,只留 hover 浅底
实测(CDP 真实浏览器):下拉框 172×138px,仅占视口宽 13.7%,
右边缘与按钮相差 4px;390px 与 1280px 两种宽度下各 15 项断言全过
(浮窗非整幅、无遮罩、未锁滚动、贴按钮下方、右对齐、
高度由内容决定、有圆角边框、条目纵排同x、y递增、点外部可关)。
This commit is contained in:
+8
-16
@@ -88,24 +88,16 @@ function fb_layout_head($title, array $opt = []) {
|
||||
<a class="btn-mini hide-sm" href="new.php">我要反馈</a>
|
||||
|
||||
<?php if (count($swList) > 1): ?>
|
||||
<?php /* 软件切换收进右上角汉堡菜单:
|
||||
* 原来平铺一行「选择软件:」+ 若干 chip,占掉一整行,
|
||||
* 而且软件一多就把列表往下推。收进抽屉后页面更干净,
|
||||
* 移动端也不用单独适配那排 chip。 */ ?>
|
||||
<?php /* 右上角三横线:点开就是一个小下拉菜单。
|
||||
不用整页平铺「选择软件:」,也不必做成侧边栏。 */ ?>
|
||||
<button type="button" class="sw-toggle" id="swToggle"
|
||||
aria-label="切换软件" aria-expanded="false" aria-controls="swPanel">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php if (count($swList) > 1): ?>
|
||||
<?php /* 遮罩:抽屉打开时盖住正文,点击即关。
|
||||
用户要求「把下面的内容全部盖住」,加一层浅遮罩最直观。 */ ?>
|
||||
<div class="sw-mask" id="swMask" hidden></div>
|
||||
<div class="sw-panel" id="swPanel" hidden>
|
||||
<div class="wrap">
|
||||
<div class="sw-panel-hd">选择软件</div>
|
||||
<?php /* 极简下拉:贴在按钮下方、右对齐,内容多高就多高。
|
||||
参考家书 FamilyBook 顶栏那个小浮窗的做法。 */ ?>
|
||||
<div class="sw-panel" id="swPanel" hidden>
|
||||
<div class="sw-panel-list">
|
||||
<?php foreach ($swList as $s): ?>
|
||||
<?php
|
||||
@@ -114,14 +106,14 @@ function fb_layout_head($title, array $opt = []) {
|
||||
if ($href === '') { $href = '?sw=' . urlencode((string)$s['slug']); }
|
||||
?>
|
||||
<a class="sw-item<?php echo $on ? ' on' : ''; ?>" href="<?php echo e($href); ?>">
|
||||
<?php echo fb_software_badge($s, 'md'); ?>
|
||||
<?php echo fb_software_badge($s, 'sm'); ?>
|
||||
<?php if ($on): ?><span class="sw-item-cur">当前</span><?php endif; ?>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</header>
|
||||
<main class="wrap">
|
||||
<?php
|
||||
|
||||
Reference in New Issue
Block a user