左侧网站菜单显示异常排查及设置指导

问题排查 #

当前代码的.mobile-nav样式是按照底部全屏导航编写的，和左侧菜单需求完全不符：

• bottom: 0 将导航固定在页面底部
• width: 100% 让导航占满整个页面宽度
• 未设置内部列表的垂直布局样式

修改后的完整代码 #

style.css #

/* 补充自定义变量（若之前未定义） */
:root {
  --primary-container: #f5f5f5;
  --on-background-variant: #333;
  --shadow-1: 2px 0 8px rgba(0,0,0,0.1);
}

.mobile-nav {
  position: fixed;
  top: 0; /* 替换bottom:0，让菜单从顶部开始 */
  left: 0;
  width: 280px; /* 左侧菜单固定宽度，可按需调整 */
  height: 100vh; /* 占满整个视口高度 */
  background-color: var(--primary-container);
  color: var(--on-background-variant);
  padding: 20px 0; /* 上下内边距，替代原padding-block */
  z-index: 4;
  box-shadow: var(--shadow-1);
  overflow-y: auto; /* 菜单内容过多时允许滚动 */
}

/* 重置列表默认样式 */
.navbar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 导航项间距 */
.nav-item {
  margin-bottom: 8px;
}

/* 导航链接布局 */
.nav-link {
  display: flex;
  align-items: center;
  gap: 12px; /* 图标与文字的间距 */
  padding: 12px 20px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s;
}

/* 高亮当前页与hover效果 */
.nav-link:hover,
.nav-link[aria-current="true"] {
  background-color: rgba(0,0,0,0.05);
}

/* 图标容器固定宽度，保证对齐 */
.item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}

index.html（保持原结构即可） #

<nav class="mobile-nav" aria-label="primary">
  <ul class="navbar-list">
    <li class="nav-item">
      <a href="./recipes.html" class="nav-link">
        <span class="item-icon">
          <span class="material-symbols-outlined" aria-hidden="true">
            lunch_dining
          </span>
        </span>
        <span class="label-medium">Recipes</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link" aria-current="true">
        <span class="item-icon">
          <span class="material-symbols-outlined" aria-hidden="true">
            home
          </span>
        </span>
        <span class="label-medium">Home</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="./saved-recipes.html" class="nav-link">
        <span class="item-icon">
          <span class="material-symbols-outlined" aria-hidden="true">
            book
          </span>
        </span>
        <span class="label-medium">Saved</span>
      </a>
    </li>
  </ul>
</nav>

关键修改说明 #

1. 定位与尺寸调整：将bottom:0改为top:0，设置固定宽度和全屏高度，让菜单固定在页面左侧
2. 内部布局优化：重置列表默认样式，用Flex布局实现图标与文字的水平对齐，添加间距和交互效果提升体验
3. 滚动兼容：添加overflow-y: auto，避免菜单内容超出视口时被截断

内容的提问来源于stack exchange，提问作者A safari