Question

如何让我的侧面菜单保持卡住状态，以便导航标签始终位于顶部，不要随页面滚动

如何让按钮更改hover上的背景颜色？问题是只有文字更改background color或只有一小部分

    <head>
    <title>Århus Gastronomi</title>

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="frontpage" class="content">
    <div id="sidebar">
        <ul id="navbar">
            <li class="navitem"><a href="#">Kat</a></li>
            <li class="navitem"><a href="#">Kat</a></li>
            <li class="navitem"><a href="#">Kat</a></li>
            <li class="navitem"><a href="#">Kat</a></li>
        </ul>
    </div>

    <p>Another item</p>
</div>
<div id="page2" class="content">


    <p>This is page 2</p>

</div>
</body>

Answer 1

将position: fixed;添加到您的#sidebar

您可能还想添加此内容：

.content {margin-left: 10%;}

并重新构建你的html，使用第一个内容部分之外的导航::

<body>
<div id="sidebar">
    <ul id="navbar">
        <li class="navitem"><a href="#">Kat</a></li>
        <li class="navitem"><a href="#">Kat</a></li>
        <li class="navitem"><a href="#">Kat</a></li>
        <li class="navitem"><a href="#">Kat</a></li>
    </ul>
</div>
<div id="frontpage" class="content">.......

这将使您的内容不会落后于您拥有的导航。

Stuck / Sticky side Navigation

1 个答案: