尺寸减小时如何将标签更改为下拉菜单？答案

【问题标题】：how to change label into dropdown when size reduce?尺寸减小时如何将标签更改为下拉菜单？
【发布时间】：2015-09-16 19:01:10
【问题描述】：

你好当我的大屏幕移动到小屏幕时，我正在尝试更改屏幕的布局。当我有大屏幕时，我在标题上显示我的菜单选项作为标签。我可以制作。但是当我将屏幕尺寸减小到600px 宽度我需要在下拉菜单选项中显示这个

我将如何做到这一点？我在谷歌上搜索并发现使用媒体查询是可能的。我尝试实现这一点。但我得到了事件，但怎么可能

这是我的代码和图片

http://codepen.io/anon/pen/LpGKYO

    #menubar li {
        display: inline;
        padding:0.5em;
        font-size:1.5em;
        color :red
    }
    @media screen and (max-width: 600px) {
        body {
            background-color: lightblue;
        }
    }
#menubar{
  float:right;
  display: block;
  position:relative;
}

#menubarCont {
  width: 100%;
  float: right ;
  right:10em;
  position:relative;
}

【问题讨论】：

你能创建一个工作演示吗？否则，为了帮助您而修复它并不有趣。但是是的，这是可能的，但您需要稍微更改标记，因为您无法将列表转换为选择。
如何为菜单保留不同的容器并使用Media Queries 调整它们的可见性？

标签： javascript angularjs html css ionic-framework

【解决方案1】：

您只需要媒体查询来隐藏您不想显示的菜单。这是一个简单的示例：（调整浏览器窗口大小以进行测试）

.menu {
    width: 100%;
    height: 60px;
    background-color: orange;
}

@media screen and (max-width: 600px) {
    .large {
        display: none;
    }
}

@media screen and (min-width: 600px) {
    .small {
        display: none;
    }
}

<div class="menu">
    <div class="large">
        Large screen menu
    </div>
    <div class="small">
      <select>
        <option>menu item 1</option>
        <option>menu item 2</option>
      </select>
    </div>
</div>

And here's a Fiddle too

【讨论】：

正要输入相同的答案。简单的解决方案就是将两者都包含在代码中并根据媒体查询显示正确的。

【解决方案2】：

只是扔掉我的两分钱。 @Schlaus 的答案是首选方式，我也会这样做。这是我发现的一种代码笔，无需在标记中对菜单进行两次编码即可完成此操作 - 对于那些对使用 JQuery 完成它的其他替代方法感到好奇的人来说，这是一个很好的参考。

http://codepen.io/ericrasch/pen/GlBed

HTML

<nav> 

  <h1>This menu turns into a <code>&lt;select&gt;</code> when window is less than 960px to conserve space.</h1>

  <ul> 
    <li><a href="#" class="active">Home</a></li> 
    <li><a href="#books">Books</a></li> 
    <li><a href="#blog">Blog</a></li> 
    <li><a href="#about">About Us</a></li> 
    <li><a href="#support">Support</a></li> 
  </ul>

</nav>

CSS

* {
  margin: 0;
  padding: 0;
}

h1 {
  font: 300 21px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  width: 500px;
  margin: 0 auto 15px;
}

nav {
  display: block;
  width: 960px;
  margin: 100px auto;
  text-align: center;
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: inline-block;
    background: #333;
    color: white;
    padding: 5px 15px;
    border: 1px solid white;
    text-decoration: none;
    &:hover {
      border: 1px solid red;
      background: red;
    }
    &:active {
      background: blue;
    }
  }
  select {
    display: none;
  }
}

@media (max-width: 960px) {
  nav {
    ul {
      display: none;
    }
    select {
      display: inline-block;
    }
  }
}

JQuery

// DOM ready
$(function() {

  // Create the dropdown base
  $("<select />").appendTo("nav");

  // Create default option "Go to..."
  $("<option />", {
    "selected": "selected",
    "value"   : "",
    "text"    : "Go to..."
  }).appendTo("nav select");

  // Populate dropdown with menu items
  $("nav a").each(function() {
    var el = $(this);
    $("<option />", {
      "value"   : el.attr("href"),
      "text"    : el.text()
    }).appendTo("nav select");
  });

   // To make dropdown actually work
   // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
  $("nav select").change(function() {
    window.location = $(this).find("option:selected").val();
  });

});

希望这可以为其他人澄清一些事情，并希望在未来对其他人有所帮助

干杯

【讨论】：