javascript - 没有重复链接的响应式导航？

Question

最近我一直在尝试制作我自己的响应式导航并成功地做到了，但现在我想跳过下一个障碍，即创建相同的导航但没有两个单独的链接列表。

现在我已经尝试了各种方法来让它工作，包括使用 javascript 在特定宽度时添加/删除类，这在一定程度上起作用，但前提是我调整浏览器的大小以找出浏览器宽度，当您在移动设备上无法调整浏览器大小时，这显然有缺陷。

我目前得到的代码是-

HTML

<nav class="mainnav" role="navigation">
    <div class="desktopnav" id="navigation">
            <ul class="mainlinks">
                <li role="menuitem"><a href="#top-page">Home</a></li>
                <li role="menuitem"><a href="#about">About</a></li>
                <li role="menuitem"><a href="#mywork">My Work</a></li>
                <li role="menuitem"><a href="#contact">Contact</a></li>
            </ul>
    </div>
    <div class="mobilenav">
        <button class="navtoggle">toggle</button>
            <ul class="mainlinks">
                <li role="menuitem"><a href="#top-page">Home</a></li>
                <li role="menuitem"><a href="#about">About</a></li>
                <li role="menuitem"><a href="#mywork">My Work</a></li>
                <li role="menuitem"><a href="#contact">Contact</a></li>
            </ul>
    </div>
</nav>

CSS

.mainnav {
  width: 100%;
  height: auto;
  background: #64137B; }

/*Desktop nav*/
.desktopnav {
  display: block; }

.desktopnav ul.mainlinks {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  display: table;
  min-height: 50px; }

.desktopnav ul.mainlinks li {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 10px;
  border-right: 1px solid #A37EAE; }

.desktopnav ul.mainlinks li:first-child {
  border-left: 1px solid #A37EAE; }

.desktopnav ul.mainlinks a {
  color: white;
  text-decoration: none; }

.mobilenav, .desktopnav {
  min-height: 50px;
  height: auto; }

/*Mobile Nav*/
.mobilenav {
  text-align: center; }

.mobilenav, button.navtoggle {
  display: none; }

.mobilenav ul.mainlinks {
  display: none;
  list-style: none;
  padding-left: 0px; }

@media (max-width: 768px) {
  .desktopnav {
    display: none; }

  .mobilenav {
    display: block; }

  button.navtoggle {
    display: table-cell;
    margin: 5px auto;
    text-align: center;
    border: 0;
    text-indent: 200%;
    overflow: hidden;
    background: white url(../../images/navbutton.png) center no-repeat;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-size: 80%;
    width: 40px;
    height: 40px;
    outline: none;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out; }

  button.navtoggle:hover {
    opacity: 0.7; }

  ul.mainlinks {
    background: #8421A0;
    margin: 0px;
    padding: 0px 0px; }

  ul.mainlinks li {
    padding: 15px 10px;
    border-bottom: 1px solid #A37EAE; }

  ul.mainlinks a {
    color: white;
    text-decoration: none; } 
}

有人知道我可以做什么来解决我的问题吗？

谢谢

Answer 1

您需要使用 media queries , 这样您就可以完全根据屏幕大小设置位置值:

.nav {
  /* some common properties here */

  /* some positioning properties here */
  /* these will be set for everything and may need over-riding */
}

@media (min-width: 800px) {
  .nav {
    /* some completely different positioning properties here */
    /* remember, some may be over-rides */
  }
}

在类中声明通用属性，然后随着屏幕变宽而覆盖是移动优先的基本最佳实践 - 它使您能够处理棘手的布局问题并留有扩展空间，而不是让一切都变得完美无缺却发现很难做到压下去。在某些情况下，您可能需要使用这样的声明:

@media (min-width: 480px) and (max-width: 800px) {
  /* properties */
}