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

Question

I am trying to make a side nav for a website. 我正在尝试为网站制作侧面导航。 So far I am using a <nav> element and filling it with <li> to create my side bar. 到目前为止，我正在使用<nav>元素并将其填充为<li>来创建我的侧边栏。

So far my code is below (ps in-line styling is just for testing, I will be using an external css file later on) : 到目前为止，我的代码在下面（ps内联样式仅用于测试，稍后我将使用外部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>

The above code outputs the following: 上面的代码输出以下内容：

Whats my issue! 我的问题是什么！

I am trying to change the side nav bar if the user resizes their window or maybe they access the site from a iPad or iPhone etc. 如果用户调整窗口大小或可能从iPad或iPhone等访问该网站，我会尝试更改侧面导航栏。

If the screen is full-size display this (I am already displaying this) 如果屏幕为全尺寸显示（我已经在显示）

But if the screen size goes below a certain size the nav bar automatically changes to: 但是，如果屏幕尺寸小于特定尺寸，则导航栏会自动更改为：

I am not sure how to develop this functionality. 我不确定如何开发此功能。 Can anyone guide me in the right direction. 谁能指导我正确的方向。 If you need any more information please let me know. 如果您需要更多信息，请告诉我。

Thanks in advance. 提前致谢。

Answer 1

Heres a pretty crude example with pure css but could be used as a base, you could add transitions ect to the breakpoint as well to make it look snazzier 这是一个纯css粗略示例，但可以用作基础，也可以将过渡等添加到断点，以使其看起来更漂亮

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

HTML 的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 的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

Have two different spans in your li . 你的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>

By default: 默认：

.showTablet {
    display: none;
}

For tablet viewports: 对于平板电脑视口：

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

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2015-10-14 10:23:58

解决方案2
2 2015-10-14 10:18:16

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2015-10-14 10:23:58

解决方案2 2 2015-10-14 10:18:16

解决方案1
3 已采纳 2015-10-14 10:23:58

解决方案2
2 2015-10-14 10:18:16