Question

我正在尝试为网站制作侧面导航。到目前为止，我正在使用<nav>元素并使用<li>填充它以创建我的侧栏。

到目前为止，我的代码位于 之下（p.s内联样式仅用于测试，稍后我将使用外部css文件） ：

<body>

<nav style="background: #3f9edd; height: 1000px; min-width: 200px; position:fixed;">
    <li style="position: relative; display: block; background: #2ecc71; width: 100%; height: 10%; padding: 33px 25px;">Home Area</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item one</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item two</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item three</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item four</li>
    <li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;">item five</li>
</nav>

<div class="container" ng-controller="projectController">
</div>
</body>

以上代码输出以下内容：

我的问题是什么！

如果用户调整窗口大小或者他们可以从iPad或iPhone等访问该网站，我正在尝试更改侧导航栏。

如果屏幕是全尺寸显示（我已经显示了这个）

但如果屏幕尺寸低于特定尺寸，导航栏会自动更改为：

我不确定如何开发此功能。任何人都可以指导我正确的方向。如果您需要更多信息，请告诉我们。

提前致谢。

Answer 1

纯粹的css是一个相当粗略的例子，但可以用作基础，你可以添加过渡到断点，以使它看起来更加犀利

Codepen http://codepen.io/noobskie/pen/XmeXEo?editors=110

<强> HTML

<nav role='navigation'>
  <ul>
    <li><a href="#"><i class="fa fa-chrome"></i><span>Home</span></a></li>
    <li><a href="#"><i class="fa fa-chrome"></i><span>About</span></a></li>
    <li><a href="#"><i class="fa fa-chrome"></i><span>Clients</span></a></li>
    <li><a href="#"><i class="fa fa-chrome"></i><span>Contact Us</span></a></li>
  </ul>
</nav>

<强> CSS

body{
  margin:0;
}
nav{
  background:#2F404F;
  height: 100vh;
  width:auto;
  position:fixed;
  ul{
    margin:0;
    padding:0;
  }
  li{
    position: relative; 
    display: block;
    padding:20px 10px;
    border-bottom:1px solid #000;
    a{
      color:#FFF;
      text-decoration:none;
      font-size:1.3em;
      i{
        padding:0 5px 0 0;
      }
    }
  }
}


@media only screen and (max-width: 768px) {
  span{
    display:none;
  }
}

Answer 2

li中有两个不同的范围。

<li style="position: relative; display: block; background: #2b87c3; width: 100%; height: 5%; padding: 33px 25px; border-bottom: 1px solid;"><span class="showLarge">Large vieport</span><span class="showTablet">Tablet vieport</span></li>

默认情况下：

.showTablet {
    display: none;
}

对于平板电脑视口：

@media only screen and (max-width: 768px) {
    .showLarge {
        display: none;
    }
    .showTablet {
       display: block;
    }
}

在窗口大小更改时更改侧导航栏

2 个答案: