如何将phpMyAdmin 4.9的侧边栏美化为悬浮式菜单？-phpMyAdmin-PHP中文网

phpmyadmin 4.9 的左侧菜单无法安全实现悬浮式效果，因其导航依赖静态 html 和硬编码 js，强行添加 fixed 或 sticky 会导致折叠失效、点击错位、布局错乱；唯一可行的“视觉悬浮”仅限顶部工具栏（#topmenu）使用 position: sticky。

phpmyadmin 4.9 的侧边栏无法通过官方方式“美化为悬浮式菜单”——它压根不支持悬浮交互逻辑，强行加 css 或 js 会破坏导航状态、折叠/展开失效、sql 执行按钮错位，甚至导致数据库列表加载失败。

为什么 phpMyAdmin 4.9 的左侧菜单不能做成悬浮式

4.9 版本的左侧导航（#serverlinks 和 #databases）是纯静态 HTML + 内联 JS 控制显隐，所有折叠/展开依赖 display: none/block 切换和硬编码的 onclick 事件。没有事件委托、无状态管理、不暴露 API。你加 position: fixed 后：

滚动时菜单悬停，但点击“数据库名”后页面跳转，fixed 容器位置错乱，后续链接全部失效
折叠图标（.hide）的 JS 绑定只认原始 DOM 路径，移入 fixed 容器后 onclick 丢失
右侧主区域（#main_pane）的宽度计算基于原始浮动布局，强行 fixed 会导致内容被遮盖或横向滚动条暴走

真能“视觉悬浮”的最低成本方案：仅限顶部导航栏

如果你只是想让顶部操作区（新建、导入、导出等按钮）在滚动时始终可见，这个可以安全做：

编辑 phpmyadmin/css/common.css，在末尾追加：

/* 滚动时固定顶部工具栏 */
#topmenu {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

注意：#topmenu 在 4.9 中存在且结构稳定；sticky 兼容 Chrome 56+/Firefox 59+，iOS Safari 15.4+ 也支持，老安卓 WebView 不行但影响小。

PHP

编写健壮的PHP代码，规避类型转换陷阱、数组怪癖及常见安全漏洞。

下载

别碰 #left_panel 或 #serverlinks ——它们没有 sticky 友好结构，加了反而更卡
不要用 fixed + transform 模拟悬浮，4.9 的 JS 会因 offsetTop 计算错误导致菜单项点击偏移

改不动又想要悬浮体验？唯一可行路径是换界面层

4.9 的 UI 层是紧耦合 PHP 模板（navigation/main.php），没法抽离。若坚持要悬浮菜单效果，只能绕过原生导航：

在 config.inc.php 中关闭左侧菜单：$cfg['LeftDisplayLogo'] = false; 和 $cfg['LeftDisplayServers'] = false;
用自定义 HTML + JS 在底部注入一个独立悬浮按钮（如 <div id="pma-float-nav"></div>），点击后弹出绝对定位菜单
菜单数据从 index.php?route=/server/databases&ajax_request=1 异步拉取（需处理 CSRF token，4.9 的 token 字段在页面 hidden input 里）
所有跳转用 window.location.href 拼接完整 URL，不依赖原生 JS 导航函数（它们全绑在 #serverlinks 上，已失效）