1

我正在尝试使用仅 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>
4

1 回答 1

1

如果您不能将页面的其余部分包装在包装器中，则可以为菜单腾出空间

body {
    padding-left: 10em;
}

然后固定menu的位置，拉回body上padding留下的空间

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

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

于 2013-04-08T02:20:55.273 回答