javascript - 缩小尺寸时如何将标签更改为下拉列表？

Question

你好当我的大屏幕移动到小屏幕时，我试图改变我的屏幕布局。当我有大屏幕时，我在标题上显示我的菜单选项作为标签。我能够制作。但是当我将屏幕尺寸减小到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;
}

Answer 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