Question

事情就是这样：我想为我正在研究的网站制作一个固定的顶栏导航菜单。我也希望它能够响应（它应该隐藏并显示=按钮，使其从顶部或画布外显示）。我一直在玩这个解决方案（ css-tricks.com/responsive-menu-concepts / ），因为我更喜欢只使用CSS。问题是我让菜单工作，但当我将导航容器的位置设置为固定时，它停止工作，我无法弄清楚原因。我在这里发现了一些questions，但没有一个能解决我的问题......

另外，如果您认为我更喜欢使用像JPanelMenu这样的Javascript解决方案可以告诉我为什么......

以下是code，因此您可以查看

非常感谢您的帮助和对他的链接感到抱歉（显然我在使用两个以上链接之前需要更多声誉）...

这是HTML

<div id="container-header">
  <header id="nav"> <a href="home.html" class="brand"><h2>Brand Name</h2></a>
    <!-- Checkbox hack -->
    <input type="checkbox" id="menu">
    <label for="menu" onclick></label>
    <nav role="off-canvas">
        <ul id="nav-main">
            <li><a href="#">item1</a>

            </li>
            <li><a href="#">item2</a>

            </li>
            <li><a href="#">item3</a>

            </li>
            <li><a href="#">item4</a>

            </li>
            <li><a href="#">item5</a>

            </li>
        </ul>
        <ul id="nav-sec">
            <li><a href="#">item6</a>

            </li>
            <li><a href="#">item7</a>

            </li>
        </ul>
    </nav>
</header>
</div>
<div class="content">
<section id="some-content">
        <h2>Sub-title</h2>

        <h1>Main Title</h1>
<span>something</span> | <a href="#">another thing</a>

</section>
</div>

这是CSS

/* NAVIGATION */
 #container-header {
height: 2.4em;
background: #CCC;
overflow: hidden;
}
.brand {
font-family:"Amatic SC", Helvetica, sans-serif;
float: left;
}
.brand h2 {
line-height: 1.2em;
}
#nav-sec {
float: right;
}
#container-header li {
float: left;
background: #CCC;
margin: 0;
}
#container-header a {
display: block;
height: 2.4em;
line-height: 2em;
padding: 0 1.2em;
}
#container-header h2:hover, a:hover {
background: #000;
color: #FFF;
}
/* CHECKBOX HACK (MOBILE MENU) */
body {
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {
    padding: 0;
}
to {
    padding: 0;
}
}
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
position: absolute;
right: 3.2em;
display: none;
width: 2.8em;
height: 2.4em;
color: #333;
transition: color .3s ease-in-out;
cursor: pointer;
user-select: none;
margin: 0;
}
@media screen and (max-width: 50em) {
html, body {
    margin: 0;
    overflow-x: hidden;
}
nav[role="off-canvas"] {
    position: absolute;
    top: 2.4em;
    left: -30em;
    width: 100%;
    opacity: 0;
}
nav[role="off-canvas"] ul > li {
    height: 100%;
    width: 100%;
    text-align: left;
    margin: 0;
}
#nav-sec {
    float: none;
}
label {
    display: block;
}
label:after {
    position: absolute;
    right: .4em;
    top: 0;
    content:"\2261";
    font-size: 2em;
}
label:hover, input:checked ~ label {
    color: #FFF;
}
input:checked ~ nav[role="off-canvas"] {
    opacity: 1;
    left: 0;
}
input:checked ~ .content {
    margin-left: 20.5em;
    margin-right: -20.5em;
}
}
/* CONTENT */
#some-content {
clear: both;
height: 20em;
background: #09B2B3;
}
#some-content {
color: #FFF;
}
#some-content a {
color: #FFF;
text-decoration: none;
}
#some-content a:hover {
text-decoration: underline;
}

Answer 1

当元素被修复时，它需要其坐标和/或宽度，具体取决于具体情况。此外，在所有其他CSS之前，css重置位于css的顶部。你拥有最后一个，这将阻止对其他元素的操纵并引起各种挫折。

   /* NAVIGATION */
     #container-header {
        height: 2.4em;
        background: #ccc;
        position:fixed;
        top:0;
        left:0;
        right:0;
    }


    body {padding-top:2.4em;} /* height of fixed header */

固定顶栏响应式导航的问题

1 个答案: