Question

我正在尝试使用HTML5和CSS3的垂直导航栏。希望菜单显示在左侧，页面的其余部分位于右侧。当用户向下滚动时，我希望菜单随用户向下移动。到目前为止，我的垂直菜单看起来像我想要的方式，但我还没能完成剩下的工作。我到目前为止尝试的每个解决方案要么意味着以奇怪的方式构建页面，要么使用Javascript。这可能只使用HTML5和CSS3吗？

CSS

/* Menu Navigation Properties */
nav
{
    text-align: center;
    padding-right: 1.0em;
}

/* Menu container */
nav ul
{
    float: left;
    list-style-type: none;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0.75em;
}

/* Menu item container */
nav ul li
{
    margin-top: 0em;
    margin-left: 0.15em;
    margin-right: 0.15em;
}

/* Menu item Appearance */
nav ul li a
{
    background-color: black;
    color: #D0E2F1; /* Light Blue */
    height: 2em;
    line-height: 2em;
    width: 9em;
    display: block;
    border-width: 0.1em;
    border-style: solid;
    border-color: #dcdce9;
    text-decoration: none;
    text-align: center;
}

/* Menu item hovered over by user */
nav ul li a:hover
{
    background-color: #D0E2F1; /* Light Blue */
    color: black;
}

/* Current Page on the Menu */
nav ul li a.current
{
    font-weight: bold;
}

HTML文件

<html>
   <body>
      <nav>
         <!-- Menu Item List -->
      </nav>
      <h1>Page Title</h1>
      <!-- rest of page -->
   </body>
</html>

Answer 1

如果您无法将其余部分包装在包装中，则可以使用

为菜单腾出空间

body {
    padding-left: 10em;
}

然后固定菜单的位置并将其拉回到身体上的填充物留下的空间

nav {
    position: fixed;
    width: 9em; // Probably a good idea to fix the width of the menu
    margin-left: -10em;
    ...
}

如果您可以将页面的其余部分包装在包装器中，只需给它足够的左边距以使其不受菜单影响。

将nav元素扩展到页面末尾，但不会结束

1 个答案: