css - 响应式菜单

Question

有没有更好的方法来制作响应式页脚菜单？而不是复制和显示:无；在 CSS 中？

这是我的尝试:

<header class="row">
    <div class="container">
      <div class="col-12 columns">
        <img src="images/logo.png" alt="" class="logo">

        <a href="#nav" class="nav-link">Navigation</a>

          <nav role="primary" >
            <ul id="nav">
              <li><a href="">Home</a></li>
              <li><a href="about.html">About Me</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="">Contact</a></li>
            </ul>
          </nav>
      </div>
    </div>
  </header>

页脚导航。出于这个问题的目的，注释掉了导航。

<nav role="secondary_menu">
<!--   <ul id="nav2">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Me</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav> -->
<footer id="footer">
  <div class="container">
    <p>Created by: </p>
  </div>
</footer>

CSS:

a.nav-link{
    float: right;
    text-align: center;
    text-decoration: none;
    background: #808080;
    color:#fff;
    font-weight: bold;
    padding:1em 2em;
    margin-top: 1.5em;
}

nav[role="primary"] ul{
    list-style-type: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

nav[role="primary"] ul li a{
    text-decoration: none;
    font-weight: bold;
    background: #3c3c3c;
    display: block;
    padding:.75em;
    color:#ccc;
    border-bottom: 1px solid #ccc;
}

.container .columns{
float: left;
margin: 0 0 0 0;
padding-right: 1em;
padding-left: 1em;
}

.row{
    float: left;
    clear: both;
    width: 100%;
}
.columns.col-12 { width: 100%; }

所以当屏幕低于 600px 时上面的代码会显示，但是这样它会将页脚推到菜单而不是底部，当然我将页脚定位为绝对但它只是位于菜单上方而不是菜单下方。所以我又做了一次尝试，我复制了导航并在它低于 600 像素时隐藏它。

位置:无

position:absolute

尝试在不复制和删除空格的情况下实现

Answer 1

我看到您的主导航设置为 position: absolute。我建议查看 CSS 模板，了解它们如何构造页脚等内容。例如，http://bootswatch.com/default/试试这个 CSS:

a.nav-link{
float: right;
text-align: center;
text-decoration: none;
background: #808080;
color:#fff;
font-weight: bold;
padding:1em 2em;
margin-top: 1.5em;
}

nav[role="primary"] ul{
list-style-type: none;
bottom: 0;
left: 0;
width: 100%;
}

nav[role="primary"] ul li a{
text-decoration: none;
font-weight: bold;
background: #3c3c3c;
display: block;
padding:.75em;
color:#ccc;
border-bottom: 1px solid #ccc;
}

.container .columns{
margin: 0 0 0 0;
padding-right: 1em;
padding-left: 1em;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
    clear: both;
    width: 100%;
}
.columns.col-12 { width: 100%; }