在 window 大小更改时更改侧边导航栏

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>

以上代码输出如下：

我的问题是什么！

如果用户调整其 window 的大小，或者他们可能从 iPad 或 iPhone 等访问该网站，我将尝试更改侧边导航栏。

如果全屏显示这个（我已经显示这个了）

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

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

提前致谢。

Answer 1

在您的 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;
    }
}

Answer 2

这是一个非常粗略的示例，纯 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;
  }
}

在 window 大小更改时更改侧边导航栏

Change Side Nav Bar on window size change

javascript

jquery

html

css

nav