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 */
  }
}

声明一个类中的常见属性然后随着屏幕变宽而超越是基本的移动优先实践 - 它使您能够处理难以扩展的空间布局问题，而不是让所有东西都变得非常大并找到它＃39难以挤压。在某些情况下，您可能需要使用如下声明：

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

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

1 个答案: