响应式菜单

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%; }

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

位置：无

位置：绝对

试图实现不重复和删除空格

Answer 1

我看到您的主导航设置为位置：绝对。我建议查看 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%; }