html - 卡住/粘边导航

标签 html css twitter-bootstrap sidebar

如何让侧边菜单保持卡住状态,以便导航选项卡始终保持在顶部并且不随页面滚动

如何让按钮在悬停时更改背景颜色? 问题是只有文本改变背景颜色或只有一小部分

THE CODEPEN

    <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>

最佳答案

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">.......

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

关于html - 卡住/粘边导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33343729/

相关文章:

javascript - 如何将自动定时器设置为内容幻灯片?

html - 如何使用 body 和 html 预设大小正确计算出 briefed px to em

jquery - 使菜单下拉焦点以方便访问

css - Bootstrap - 进度条作为卡元素中的背景,具有锚定百分比

html - 透明 div 内的非透明 iframe

php - 提交表单后保持选择的值

jquery - 对齐分割图像的两半 - 响应式

html - Bootstrap 3 导航栏高度

css - 页面似乎看不到我的 css 文件

html - 在 chrome 或 firefox 中,为什么这段代码中有 padding-bottom?